CODEWITHSUNDEEP
asp.netasp.net-mvctinymce-4
arnaudoff
arnaudoff

Reputation: 640

How can I have two TinyMCE editors on the same page with different configurations

I've been debugging this the whole day.

I have an ASP.NET MVC project and a TinyMCE as an editor template, but basically the problem is that only the last TinyMCE is shown.

@Html.TextArea(string.Empty, new { id = textAreaId, value = ViewData.TemplateInfo.FormattedModelValue })

<script type="text/javascript">
    tinyMCE.init({
        mode: "exact",
        elements: "textarea#@textAreaId",
        theme: "modern",
        inline: true,
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "template paste textcolor colorpicker textpattern imagetools"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "preview media | forecolor backcolor code | ltr rtl",
        image_advtab: true,
        templates: [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
        ],
        file_picker_callback: function (callback, value, meta) {
            if (meta.filetype === 'image') {
                $('#@formId input').click();
            }
        }
    });
</script>

I'm calling the EditorTemplate like this:

@for (int i = 0; i < Model.Answers.Count; i++)
{
        @Html.EditorFor(
            model => model.Answers[i].Text,
            new
            {
                htmlAttributes = new { @class = "form-control" },
                textAreaId = string.Format("answer-textArea-{0}", i),
                formTargetId = string.Format("answer-formTarget-{0}", i),
                formId = string.Format("answer-form-{0}", i)
            })
}

So far I've been trying different modes, different selectors, even downgraded to TinyMCE 3.0 - no effect. All solutions I found so far on the Internet don't work for me. The only error I was getting in the console is that Theme is not a constructor, but since I changed to mode exact and elements in the config, even the last editor that used to be shown (probably because tinyMCE.init overrides the previous initializations or something) is not shown and so is the error. I honestly have no clue how to solve this. Any help is appreciated.

Upvotes: 0

Views: 890

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13744

You can absolutely have multiple editors with different configurations.

As the init() call is happening in the browser the real question is what your ASP code is becoming when its loaded into the browser.

To start with I would not use TinyMCE 3 - its a very old version of TinyMCE and is no longer getting updates. Your example seems to use the elements configuration option which was an option for TinyMCE 3 but not TinyMCE 4 so that is why its not working at all for TinyMCE 4 - you should return to using the selector option.

As for TinyMCE 4 - you should use the selector configuration option to control which configuration object is for which <textarea>:

https://www.tinymce.com/docs/configure/integration-and-setup/#selector

For example:

tinymce.init({        
    selector: "#area3",
    ...
});

The selector option expects a string that equates to a CSS selector for one or more elements on the page. The above example assumes that one <textarea> on the page has an ID of area3 so that single <textarea> will get replaced by TinyMCE.

If you are trying to create multiple configurations on the fly via ASP code you need to debug what code like this:

selector: "textarea#@textAreaId"

is evaluated to when its sent to the browser. If @textAreaId is replaced with a valid ID and you end up with something like 

selector: "textarea#abc123"

...then if such a textarea exists TinyMCE will replace it. I suspect that what your ASP code is providing to the browser is not what you think so TinyMCE is not getting invoked. Without seeing this running that is about all we can suggest to you.

Upvotes: 1

Related Questions