This topic is locked

Guide 60 - Customizing the TinyCME editor

5/9/2023 1:47:43 PM
PHPRunner Tips and Tricks
fhumanes author

With guide 59, HTML to Word document conversion, I have been evaluating which HTML editors worked best (they generated the best HTML code for the converter) and I saw that the TinyMCE editor that PHPRunner brings was the one that generated the best HTML for the conversion.
The version that PHPRunner brings is 5.6.22 and the latest version of this product on the internet is 6.4.2. The HTML of 5.6.22 is older but it is the best conversion performer so I started to see how I could customize the product to fit my needs.
Objective
How we can customize the TinyMCE editor that comes with PHPRunner.
Technical Solution
Default Appearance:
img alt
Result after adjustment:
img alt
If you are interested in this topic, keep reading the article at this link .

fhumanes author 5/9/2023

I have adjusted the toolbar and functionality to the aspects that interested me for the HTML to Word conversion guide.
TinyMCE documentation can be found on the internet at https://www.tiny.cloud/docs/
In PHPRunner the configuration is in the directory "C:\Program Files\PHPRunner10.7 \source\include\common\runnerJS\editControls\RteControl.js ", in this case it corresponds to the installation of PHPRunner version 10.7.
What I propose to you is the modification of the sources of the product, so that once the change is applied, this change will be applied to all the developments that we do with this version of PHPRunner.
The changes I have made are:
img alt
As you can see, I have commented on the original information and also, I have put the plugins and toolbar that I needed for development.
tinymce.init({ selector: "#" + this.valContId, menubar: false, branding: false, setup: function( editor ) { ctrl.editor = editor; editor.on('init', function( e ) { ctrl.setDefaultValue(); ctrl.initCustomEvents(); }); }, /* plugins: 'lists code link image charmap hr table', */ plugins: 'lists code charmap wordcount fullscreen', height: $("#" + this.valContId).height(), /* FH */ toolbar: [ 'undo redo | fontsizeselect forecolor |'+ 'bold italic underline | alignleft aligncenter alignright alignjustify | ' + ' numlist charmap | code removeformat fullscreen'], /* toolbar: [ 'styleselect fontselect fontsizeselect forecolor backcolor table', 'bold italic underline | alignleft aligncenter alignright hr | ' + ' bullist numlist outdent indent | code link image charmap '], */ /*inline: ctrl.isInline,*/ });I hope you like this theme and for any questions, contact via email: fernandohumanes@gmail.com

mbintex 5/10/2023

Hi Fernando,
great insight as always.
Even more interesting though would be, if TinyMCE would be configurable like your Summernote plugin, so that you could have for example a full fledged editor for a correspondence module and a tiny editor for side notes in the same application.
Regards
Martin

fhumanes author 5/10/2023

Hello,
The plugins, at least those that I have seen, have many limitations and in this case, the TinyMCE configuration method has much more potential, since you can persalize it much more to the needs of the project.
Try it, you'll see how the solution will convince you.
Greetings,
fernando

A
alghanim 5/10/2023

Thank you for always providing something useful

mbintex 5/11/2023

The plugins, at least those that I have seen, have many limitations@Fernando
Could you elaborate? I don“t really see, what TinyMCE makes much better than Summernote oder Trumbowyg.
As you know, I am working with the Trumbowyg plugin and never found any downsides in using this editor. Only pros: Language changeable via settings, complete functionality/toolbar changeable via settings plus custom text blocks via settings. Since all this is done via settings of the plugin, the main code does not have to be changed with every update and I can change the settings for every occurrence of the editor in a solution, which in my case is the main advantage since I want for example full editor capabilities for pure online notes and less possibilities for textblocks that should be printed.
I only would like to have this with more builtin functionality instead of a plugin. TinyMCE is already there out of the box, but not configurable on the fly ... hey Admin - feature wish :-)