Multipule TinyMCE editors per page

Topics: Customizing Orchard, General, Writing modules
Feb 17, 2011 at 6:17 PM
Edited Feb 17, 2011 at 8:01 PM

Hi,

I just created this HtmlField Module: http://orchardproject.net/gallery/Packages/Modules/Details/Orchard-Module-Contrib-HtmlField-0-5

It has two "flavors" like the BodyPart, Html and Text

When it is set to Text flavor everthing works fine I can have multipule fields on the Admin screen and the data is persisted and displayed correctly.

When I set it to Html flavor (TinyMCE editor Module included with orchard) the editors appear fine and content can be added but it does not persist correctly. The hidden textarea that TinyMCE fills does not get populated. Hence on the post back no content is sent.

Any ideas?

Coordinator
Feb 17, 2011 at 7:50 PM

Conflicting ids?

Feb 17, 2011 at 8:00 PM

I've checked the ids... and there all unique

The editor is applied through the CSS Class so I tested changing the class to also be unique per editor and still had the same problem.

 

Coordinator
Feb 17, 2011 at 8:54 PM

Hard to say without seeing the code. If you can come up with a simple repro, please file a bug and we'll look at it.

Feb 17, 2011 at 11:32 PM
Edited Feb 17, 2011 at 11:33 PM

I've tracked down the issue.

Its due to "tinyMCE.init" being called more than once, although it actually works in IE8 just not FireFox and Crome

When I said "changing the class to also be unique per editor and still had the same problem." above I obviously didn't test it that well.

Here is the fix i have implemented for now in the TinyMCE Module.

 

@{ 
    Script.Require("TinyMce");
    var unique = Guid.NewGuid();
}
@using(Script.Foot()) {
<script type="text/javascript">
//<![CDATA[
    tinyMCE.init({
        theme: "advanced",
        mode: "specific_textareas",
        editor_selector: "Html @unique",
        plugins: "fullscreen,autoresize,searchreplace,addmedia",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,image,addmedia,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,code,fullscreen",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        convert_urls: false,
        addmedia_action: "@Url.Action("AddFromClient", "Admin", new {area = "Orchard.Media"})",
        addmedia_path: "@Model.AddMediaPath",
        request_verification_token: "@Html.AntiForgeryTokenValueOrchard()",
        extended_valid_elements: "canvas[id|width|height],script[src|type]," +
            "object[classid|codebase|width|height|align|name|id],param[name|value],embed[quality|type|pluginspage|width|height|src|align]," +
            "iframe[src|frameborder|width|height|scrolling|name|id]," +
            "video[src|audio|autoplay|controls|width|height|loop|preload|poster],audio[src|autoplay|loop|controls|preload],source[id|src|type]"
    });
//]]>
</script>
}
@Html.TextArea("Text", (string)Model.Text, 25, 80, new { @class = string.Format("Html {0}", unique) })

 

I'll file a bug tomorrow at work!

Coordinator
Feb 17, 2011 at 11:33 PM

Fantastic, thanks.

Feb 10, 2014 at 4:32 PM
jrmurdoch,

I'm having the exact same issue when creating a custom button, works in IE8 but not the others.

Can you repost your code? I think it got scrambled.

Should I change the Body.Html.Editor of TinyMce and then alter the Orchard-tinymce script?

Kind regards,

Borrie
Feb 11, 2014 at 7:31 AM
borrierulez,

This is really old code so only relevant if you are using a very old version of orchard. The HTML field is now part of the standard orchard install so I would go that way.

The issue was that unique Id's needed to be created for the editors. The code is a little scrabled above.

1, In the cshtml file, at the top create a unique id in .net code: var unique = Guid.NewGuid();
2, In the tincy mce init make sure the editor selector is set to: editor_selector: "Html_@unique"
3, Add the Id to the text area: @Html.TextArea("Text", (string)Model.Text, 25, 80, new { @class= string.Format("Html_{0}", unique) })

hope this helps