Replace Episerver Commerce Editor (TinyMCE) - tinymce

Question

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

Answer 1

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>