Post by dstevens2 » Fri Mar 13, 2015 5:00 am

This is a quick note on how to replace summernote with tinymce. I won't provide an ocmod as mine is fairly customized and would not work for all. ** This requires ocmod knowledge and some technical skill. **

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",
});
4. Create a modification file tinymce.ocmod.xml. You may need to customize this - I make no guarantees.

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>
5. Install the modification, refresh and you should be good.

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.

Newbie

Posts

Joined
Fri Mar 13, 2015 4:41 am

Post by siteadvice » Thu Apr 16, 2015 10:35 pm

There's a slight inconsistency with your code/description - in point 2 you say that tinymce.min.js should be uploaded to admin/view/javascript/tinymce.min.js but your XML mod (point 4) places the tinymce.min.js in the tinymce folder:

Code: Select all

<script type="text/javascript" src="view/javascript/tinymce/tinymce.min.js">
In case anyone is interested, when it comes to initiating TinyMCE in admin/view/template/catalog/product_form.tpl, you should find this line of code:

Code: Select all

$('#input-description<?php echo $language['language_id']; ?>').summernote({height: 300});
And replace it with something like this:

Code: Select all

tinyMCE.init({
        mode : "specific_textareas",
	    plugins: "code",
	    height: 400,
        editor_selector : "mceEditor"
});
Like you, I'm finding that summernote is altering perfectly good HTML code so I was keen to remove it, but I didn't find TinyMCE any better.

inframes.com Website Design with Opencart, Wordpress, Lucee and bespoke application design and development


User avatar
New member

Posts

Joined
Mon Oct 24, 2011 8:12 pm

Post by stalker780 » Fri May 08, 2015 12:06 am

There are also several tested CKEditor replacements for OpenCart 2.0.

Everybody seems got used to it in 1.5. And also it gives much more functionality tan Summernote.
Don't know why Daniel used Summernote for 2.0.

Newbie

Posts

Joined
Thu Jan 03, 2013 6:00 pm
Location - Ukraine

Post by Hoogun » Tue Sep 19, 2017 6:56 pm

For Opencart 2.2 version work this code:
tinyMCE.execCommand("mceAddEditor", false, "input-description<?php echo $language['language_id']; ?>");
tinyMCE.execCommand("mceAddEditor", false, "input-preview<?php echo $language['language_id']; ?>");

Newbie

Posts

Joined
Wed Sep 06, 2017 8:42 pm

Post by pauldore » Sat Nov 14, 2020 4:06 pm

Just want to keep people update with TinyMCE WYSIWYG Editor support forum. It's all now using 2 online spaces: Stack Overflow and GitHub - Stack Overflow for assistance with TinyMCE, and GitHub to report a bug or enhancement request.

Newbie

Posts

Joined
Sat Nov 14, 2020 3:43 pm
Who is online

Users browsing this forum: No registered users and 11 guests