Replace Episerver Commerce Editor (TinyMCE)

Is there anybody who knows how can I replace TinyMCE with the default editor on Episerver Commerce SP2?

Solution

Copy tiny_mce folder to eCommerceFramework\5.2\EPiServerCommerceManager\Shared\Apps\Core\Controls\Editors\
Copy TinyMCEEditor.dll to the \bin folder in your Commerce Manager site.
In the Commerce Manager site folder open appSettings.config. Change the 2 keys “HtmlEditorControl” and “AdminHtmlEditorControl” to the new editor path.
Create folder name “UserFiles” in the root folder of Commerce Manager site.
Done, enter Commerce Manager and test the editor.
Use the following Control :
```
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditorControl.ascx.cs" Inherits="TinyMCEEditor.EditorControl" %>
```
tinyMCE.init({ // General options mode: "textareas", theme: "advanced", plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist", file_browser_callback : "filebrowser", setup: function(ed) { ed.onKeyPress.add( function(ed, evt) { } ); }, // Theme options theme_advanced_buttons1: "bold,italic,underline,|,charmap,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2: "cut,copy,paste,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,code,|,preview", theme_advanced_buttons3: "tablecontrols", theme_advanced_buttons4: "", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", theme_advanced_resizing: true, // Example content CSS (should be your site CSS) content_css: "css/content.css", // Drop lists for link/image/media/template dialogs template_external_list_url: "lists/template_list.js", external_link_list_url: "lists/link_list.js", external_image_list_url: "lists/image_list.js", media_external_list_url: "lists/media_list.js", // Style formats 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' } ], // Replace values for the template plugin template_replace_values: { username: "Some User", staffid: "991234" } });

function filebrowser(field_name, url, type, win) {
```
fileBrowserURL = "../FileManager/Default.aspx?sessionid=<%= Session.SessionID.ToString() %>";


    tinyMCE.activeEditor.windowManager.open({
        title: "Ajax File Manager",
        url: fileBrowserURL,
        width: 950,
        height: 650,
        inline: 0,
        maximizable: 1,
        close_previous: 0
        }, {
        window: win,
        input: field_name,
        sessionid: '<%= Session.SessionID.ToString() %>'
        }
    );
}
</script>
<script type="text/javascript" language="javascript">
    $(".ajax__htmleditor_editor_toptoolbar").each(function (index) {
        $(this).html($(this).html() + "<img onclick=showImgManager('" + index + "') src='../FileManager/icons/img-add-32.png' class='ajax__htmleditor_toolbar_button' /><img onclick=showFileManager('" + index + "') src='../FileManager/icons/Files-add-32.png' class='ajax__htmleditor_toolbar_button' /><div style='display:none;float:left;width:100%;padding-top:5px;' id='divImgManager" + index + "'></div>");
    });
    function openFileManager(index) {
        window.open("../FileManager/Default.aspx?sessionid=<%= Session.SessionID %>&input=" + index, "myWindow", "status = 1, height = 650, width = 950, resizable = 0")
    }

</script>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 40%" 
runat="server"></textarea>
```