Summernote is the default html editor for OpenCart 2. Summernote is not very good. It messes up tags, randomly adds blank lines, gets confused with <b> vs <strong> vs <font> tags, reformats the html at will and worryingly randomly deletes most of the html under various circumstances. Most of the time I spend in source view, and even then it still sucks trying to edit html.
Tinymce is a fairly simple html editor, but it works a lot better than summernote.
1. Go to http://www.tinymce.com/ and download the regular tinymce package.
2. Copy the package into the admin/view/javascript directory so that tinymce.min.js is at admin/view/javascript/tinymce.min.js
3. Create a tinymce configuration file tinymce.config.js and copy into the same directory as the tinymce.min.js file.
Code: Select all
tinymce.init({
selector:"textarea.editor",
browser_spellcheck:true,
height:500,
content_css: "view/stylesheet/stylesheet.css",
document_base_url: "https://www.<<base url>>/store/",
statusbar:false,
menubar: false,
plugins:["autolink code fullscreen image link media preview spellchecker table"],
entity_encoding:"raw",
extended_valid_elements: "script[language|type|src],form[name|action],input[type|value|size|id|onkeypress|onclick]",
toolbar_items_size: 'small',
toolbar: "alignleft aligncenter alignright alignjustify | styleselect formatselect | bold italic | bullist numlist | outdent indent blockquote | table | link unlink image media | fullscreen code preview",
});
Code: Select all
<modification>
<name>Replace summernote with tinymce</name>
<code>tinymce</code>
<version>1.0</version>
<vqmver>2.5.1</vqmver>
<author>dstevens</author>
<!-- Add tinymce script to the header of all admin pages -->
<file path="admin/view/template/common/header.tpl">
<operation>
<search><![CDATA[summernote.js]]></search>
<add position="after"><![CDATA[<script type="text/javascript" src="view/javascript/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="view/javascript/tinymce/tinymce.config.js"></script>]]></add>
</operation>
</file>
<!-- Information form -->
<file path="admin/view/template/catalog/information_form.tpl">
<operation>
<search><![CDATA[#input-description]]></search>
<add position="before"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, "input-description<?php echo $language['language_id']; ?>");
<?php if(0) { ?>]]></add>
<add position="after"><![CDATA[<?php } ?>]]></add>
</operation>
<operation>
<search><![CDATA[#input-description]]></search>
<add position="after" offset="2"><![CDATA[<?php } ?>]]></add>
</operation>
<operation>
<search><![CDATA[$('#input-tab-description'+tab_row).summernote({ height: 300 });]]></search>
<add position="replace"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, 'input-tab-description'+tab_row);]]></add>
</operation>
<operation>
<search><![CDATA[$('#input-tab-description<?php echo $i; ?>').summernote({ height: 300 });]]></search>
<add position="replace"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, 'input-tab-description<?php echo $i; ?>');]]></add>
</operation>
</file>
<!-- Product form -->
<file path="admin/view/template/catalog/product_form.tpl">
<operation>
<search><![CDATA[$('#input-description<?php echo $language['language_id']; ?>').summernote({height: 300});]]></search>
<add position="replace"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, "input-description<?php echo $language['language_id']; ?>");]]></add>
</operation>
<operation>
<search><![CDATA[$('#description<?php echo $i; ?>-<?php echo $language['language_id']; ?>').summernote({]]></search>
<add position="before"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, "description<?php echo $i; ?>-<?php echo $language['language_id']; ?>");
<?php if (0) { ?>]]></add>
</operation>
<operation>
<search><![CDATA[$('#description<?php echo $i; ?>-<?php echo $language['language_id']; ?>').summernote({]]></search>
<add position="after" offset="2"><![CDATA[<?php } ?>]]></add>
</operation>
<operation>
<search><![CDATA[$('#description'+tab_row+'-<?php echo $language['language_id']; ?>').summernote({]]></search>
<add position="before"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, "description"+tab_row+"-<?php echo $language['language_id']; ?>");
<?php if (0) { ?>]]></add>
</operation>
<operation>
<search><![CDATA[$('#description'+tab_row+'-<?php echo $language['language_id']; ?>').summernote({]]></search>
<add position="after" offset="2"><![CDATA[<?php } ?>]]></add>
</operation>
</file>
<!-- Category form -->
<file path="admin/view/template/catalog/category_form.tpl">
<operation>
<search><![CDATA[$('#input-description<?php echo $language['language_id']; ?>').summernote({]]></search>
<add position="before"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, "input-description<?php echo $language['language_id']; ?>");
<?php if (0) { ?>]]></add>
</operation>
<operation>
<search><![CDATA[$('#input-description<?php echo $language['language_id']; ?>').summernote({]]></search>
<add position="after" offset="2"><![CDATA[<?php } ?>]]></add>
</operation>
</file>
<!-- Html -->
<file path="admin/view/template/module/html.tpl">
<operation>
<search><![CDATA[$('#input-description<?php echo $language['language_id']; ?>').summernote({height: 300});]]></search>
<add position="replace"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, "input-description<?php echo $language['language_id']; ?>");]]></add>
</operation>
</file>
<!-- Contact -->
<file path="admin/view/template/marketing/contact.tpl">
<operation>
<search><![CDATA[$('#input-message').summernote({]]></search>
<add position="before"><![CDATA[tinyMCE.execCommand("mceAddEditor", false, "input-message");
<?php if (0) { ?>]]></add>
</operation>
<operation>
<search><![CDATA[$('#input-message').summernote({]]></search>
<add position="after" offset="2"><![CDATA[<?php } ?>]]></add>
</operation>
<!-- Remove 'summer not fix' -->
<operation>
<search><![CDATA[$('textarea[name=\'message\']').html($('#input-message').code());]]></search>
<add position="replace"><![CDATA[$('textarea[name=\'message\']').html(tinyMCE.get('input-message').getContent());]]></add>
</operation>
</file>
</modification>
Basically we are adding the tinymce script links to the admin page headers after the summernote script link.
Then each admin page where summernote is involked for textareas needs the tag.summernote({height: 300}); init replaced with tinyMCE.execCommand("mceAddEditor", false, tag); This would have been massively easier of the OpenCart source did not dribble over multiple lines for no good reason.
Hope this helps anyone who wishes to exorcise summernote like I did. The only thing which I don't like about tinymce is that the view source uses a rather small pop up window without and context colors. Otherwise it copes with scripts and everything else I throw at it.
Update: Image linking will not work. tinymce has hooks for image editing, so it would be possible to add this back in like summernote.