Script does not appear when pressing Section

Question

I have a Section called Scripts (the one configured by default):

@RenderSection("scripts", required: false)

And I’m trying to load the Tinymce Plugin as follows:

@section Scripts {
    <script src="~/Scripts/Libs/tiny/[email protected]()" type="text/javascript"></script>
    <script type="text/javascript">

        tinymce.init({
            mode: "textareas",
            plugins: "table",
            content_css: "css/content.css",
            style_formats: [
                { title: 'Bold text', inline: 'b' },
                { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
                { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
                { title: 'Example 1', inline: 'span', classes: 'example1' },
                { title: 'Example 2', inline: 'span', classes: 'example2' },
                { title: 'Table styles' },
                { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
            ],
            formats: {
                alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
                aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
                alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
                alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
                bold: { inline: 'span', 'classes': 'bold' },
                italic: { inline: 'span', 'classes': 'italic' },
                underline: { inline: 'span', 'classes': 'underline', exact: true },
                strikethrough: { inline: 'del' },
                customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format' } }
            }
        });
    </script>
}

However it does not load the Plugin, only if I give F5 on the page, it loads.

What’s wrong with it?

Answer 1

Maybe you are starting the plugin before you finish loading the page.

Try checking when the page is loaded to load the plugin:

@section Scripts {
    <script src="~/Scripts/Libs/tiny/[email protected]()" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
           tinymce.init({ ... });
        }
    ...
}