[TUTORIAL] Add more functions to the TinyMCE editor!

Store Builder Questions
1
  1. You must have TinyMCE editor enable on Settings: Appearance | Default wysiwyg editor | TinyMCE
  2. Download http://tinymce.moxiecode.com/track.php?url=http%3A%2F%2Fgithub.com%2Fdownloads%2Ftinymce%2Ftinymce%2Ftinymce_3.4.3.2_jquery.zip → TinyMCE 3.4.3.2 jQuery package and extract it. You only need the plugins from this package.
  3. Overwrite the directory: root\lib\js\tinymce\plugins with the directory you extracted → tinymcesrc\jscripts\tiny_mce\plugins (don`t forget to make a backup first, if anything go wrong!)
  4. Edit this file: /js/editors/tinymce.editor.js and find:
<br />
			plugins : 'safari,style,advimage,advlink,xhtmlxtras,inlinepopups',<br />
theme_advanced_buttons1:formatselect,fontselect,fontsizeselect,bold,italic,underline,forecolor,backcolor,|,link,image,|,numlist,bullist,indent,outdent,justifyleft,justifycenter,justifyright,|,code',<br />
                        theme_advanced_buttons2: '',<br />
                        theme_advanced_buttons3: '',
```<br />
and replace it with:<br />
```php
<br />
       plugins : "autolink,lists,spellchecker,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",<br />
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",<br />
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",<br />
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",<br />
	<br />

```<br />
5. Refresh your page and you will see the new buttons. <br />
<br />
Troubleshoot: make backups of you files before overwriting!!! If anything goes wrong, revers what you have done. If you don`t update plugins folder, the plugins won`t work and you won`t have editor at all!<br />
<br />
Hope it works, mine works like a charm!!!<br />
<br />
Feel free to arrange the buttons the way you want, just edit the theme rows<p><a href="127.0.0.1/uploads/monthly_07_2011/post-16330-0-68855100-1310629225.jpg">Clipboard03.jpg</a></p>
2

Thanks worked like a charm.

3

I tried twice to do this and after I upload the new plugins folder and when I change the the code in /js/editors/tinymce.editor.js the HTML editor disappears completely. I've tried clearing the CS-Cart cache and my browser cache but it makes no difference. Any ideas?

4

I had the same problem. See if this post helps you: 2.2.1 wysiwyg editor can no longer justify - General Questions - CS-Cart Community Forums.

5

You did not put all the plugins available. Please check.

plugins : "autolink,lists,spellchecker,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",



Check if the folder plugins in root\lib\js\tinymce\plugins contains all the folders that plugins refer to: autolink…etc! If one is missing, error follows!



See if you have it all, if not, try to remove them from this line one by one untill it works. Maybe one plugin folder is incomplete.



I must say that I have 2.2.1 version and it works. That is all that I have done!

6

Can we create webpages in prettyphoto with this now? ive tried everything and cannot get it to work.

7

for newer version of the editor try this in the tinymce.editor.js

plugins : 'safari,style,advimage,advlink,xhtmlxtras,inlinepopups,table,paste,print,insertdatetime,preview,media,searchreplace,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,advhr,emotions,save,autolink,',<br />
			<br />
			theme_advanced_buttons1: 'formatselect,fontselect,fontsizeselect,bold,italic,underline,forecolor,backcolor,|,link,image,|,justifyleft,justifycenter,justifyright,|,code',<br />
			theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor',<br />
			theme_advanced_buttons3: 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,fullscreen',
8

I've followed this method using the latest tinymce version 4.1.7



It added many more formatting options but is still lacking the media (video embed) button.



I've installed the latest tinymce plugins and verified the “media” is included in the toolbar options in the tinymce.editor.js



Is there something I'm missing?

9

Done all the above steps, can't get it to work.

Copied just the plugin folder into my old tinymce.

As far as code in the tinymce.editor.js it looks different in my file. I have have to places with plugins:

    var editor = {
        editorName: 'tinymce',
        is_destroying: false,
        params: {
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste spellchecker textcolor"

            if (!this.params) {
                this.params = {

                script_url : _.current_location + '/js/lib/tinymce/tinymce.min.js',
                plugins: [
                    "advlist autolink lists link image charmap print preview anchor",
                    "searchreplace visualblocks code fullscreen",
                    "insertdatetime media table contextmenu paste spellchecker textcolor"

Replaced both lines with your code. Cleared cache on the site and in browser. The editor just disappears.

Tried replacing old TinyMCE with a new one fully, same thing.

What am I doing wrong?