Tuturial - Add extended Code/html editor to TinyMCE

[rfourt]

Hi guys.

This is a simply 2 step process, very fast and easy. 

I have been searching for an better way to edit the code with the TinyMCE editor and decided to go all in today and add a code plugin to the TinyMCE editor.

Only tested on PS 1.6.x

The TinyMCE wysiwyg editor comes with a very basic HTML source editor.This plugin for TinyMCE makes editing HTML source code a more pleasant experience. It is based on the excellent CodeMirror code editor, developed by Marijn Haverbeke. This plugin offers the following functionality:

 

• Syntax highlighting of HTML, Javascript and PHP code
• Line numbers
• Highlighting the line currently being edited
• Automatic indentation
• Many undo/redo levels
• Search/Replace functionality
• Etc. etc.

 

Ok so here we go.

 

Step 1

Go to this github link and download the latest resp.https://github.com/christiaan/tinymce-codemirror

1. Unpack the content to a folder on your HD. 

    You should have some folders in this way:
        + plugins

           |+  codemirror

                | + codemirror-4.x (or higher)

                | + langs

 

Go into "langs" folder and check if your language is there. If not just copy en.js and change the name of that to your countrycode. (if you want to translate just edit that file)

 

2. Change the name of the folder called "codemirror-4.x"   to only "codemirror"

 

3. Upload the content of the plugins folder to your TinyMce plugins folder on your server. Should be located here:
/js/tiny_mce/plugins/

 

4. now you should have a folder in your /js/tiny_mce/plugins/ folder that is simply called "codemirror".

in that folder there should be 2 folders and some files like this.

|+ codemirror

|+ langs

|- plugin.js

|- plugin.min.js

|- source.html

 

Step 2

Now its time to edit the settings file of your tinyMCE editor. "tinymce.inc.js"

For me the settings file is located here: /js/admin/tinymce.inc.js

1. Open up that file and there you should have some code that looks something like this:
 

default_config = {
        selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons improvedcode",
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,",
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",
        toolbar4 : "visualblocks,|,charmap,|,hr,|,improvedcode", 

Remember your file might differ from this but the basics should be the same.  
 

2. So now in that file you should in the variable "plugins" change the word "code" to "codemirror" you should see it between "table" and "media" . Just change the word "code" to "codemirror". 
Ps: there is another "code" word in the toolbar variables, Dont touch that, only change the "code" in the plugins row.

 

3. directly below the "toolbar4" row add a new row with this code below:

codemirror: {
            indentOnInit: true, // Whether or not to indent code on init.
            fullscreen: false,   // Default setting is false
            path: 'codemirror', // Path to CodeMirror distribution
            config: {           // CodeMirror config object
                mode: 'application/x-httpd-php',
                lineNumbers: true
            },
            width: 800,         // Default value is 800
            height: 600,        // Default value is 550
            jsFiles: [          // Additional JS files to load
                'mode/clike/clike.js',
                'mode/php/php.js'
            ]
        }, 

Be sure to take a backup of your file and then save it.

Go into your admin and edit a product. Be sure to clear your cache using CTRL+F5 and sometime you need to go into settings and clear the cache in your browser settings to be able to see the changes.

 

now you should have a much greater source editor with nice looking colors and linenumbers.

 

I would also strongly recomend following VEIKA´s tuturial on extending the editor even more before adding this plugin. Also buying his plugin for even more extensions is recommended. 

Extend your editor for free:
https://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html

A great and cheep module to extend it even further.

https://mypresta.eu/modules/administration-tools/tinymce-pro-extended-rich-text-editor.html
 

 

Im planing on adding some more plugins to the editor, and remember be sure to backup any files that you are editing. i take no responsibility for your mistakes.

 

Happy editing. i know my life got Little bit better with this plugin anyway.

Cheers.
/Rickard

           

Sveriges bästa e-cigg ifall du vill sluta röka.

[flower34]

Does this work in 1.7?

[myselfidem]

Thank you very much !

Works very fine.

[asdasd2]

Hey. Related question.

I'm trying to update tinymce.inc.js (to enable a shipped-in TinyMCE plugin), but I can't get any changes to show at all. Version 1.7.6.2.

1. I removed the file completely (for debugging purposes),
2. disabled browser cache,
3. emptied /var/cache,
4. emptied cache via backend, and
5. made sure there's only one tinymce.inc.js file on the server,

and the editor still works as it used to.

What do I do to get the thing to budge?

Thanks.

Forgot to mention: in Firefox's debugger view of loaded JS files, somehow there is no tinymce.inc.js at all.

Also, another related question: any canonical ways to have that file persist over updates?

Edited December 24, 2019 by asdasd2 (see edit history)

[renegades]

On 12/7/2016 at 3:24 AM, rfourt said:

 

default_config = {
        selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons improvedcode",
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,",
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",
        toolbar4 : "visualblocks,|,charmap,|,hr,|,improvedcode", 

Remember your file might differ from this but the basics should be the same.  
 

Happy editing. i know my life got Little bit better with this plugin anyway.

Cheers.
/Rickard

           

Sveriges bästa e-cigg ifall du vill sluta röka.

Works Really nice (I'm working with 1.6).  However, any style I add within  <style>...</style>, CSS is being totally stripped out!

Wanted to try it with this table :

Table HTML/CSS

? 🤔