2. TinyMCE Editor plugin support forum
  3. Customising TinyMCE - Some pointers needed!
This topic is locked

Customising TinyMCE - Some pointers needed!

 		7/3/2021 2:21:01 PM
TinyMCE Editor plugin support forum
G
 gtothill author

Hi,

Given that TinyMCE is provided as part of PHPR I have been using it for most of my projects.

Its probably worth noting that the version bundled with PHPR 10.5 Build 36251 is slightly out of date. The latest buld (v 5.8.2) for self hosted community version can be found here: https://www.tiny.cloud/get-tiny/self-hosted/

I need to customise the appearance of the editor in my PHPR projects - for example to reduce the number of toolbar buttons, set a single font size and activate some plugins.

The TinyMCE configuration guide guide here - https://www.tiny.cloud/docs/general-configuration-guide/customize-ui/ suggests that the way of doing this is by initializing an element with TinyMCE as follows:

tinymce.init({
selector: 'mytextarea',
toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code',
plugins: 'code'
});

The problem is that, although PHPR is undoubtedly a very powerful RAD environment - it can obfiscate some of the code and understanding just how it is building pages can be challenging.

Can someone suggest if I can customise instances of TinyMCE on elements of my pages and if so, where I should put this code?

Any help would be much appreciated.

Regards,

Geoff.
G
 		gtothill author 7/3/2021

OK so I did some digging and this is where PHPR initiates an instance of TinyMCE in RunnerAll.js

initEditor: function() {
var ctrl = this;

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',
height: $("#" + this.valContId).height(),
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,*/
});
},

So changing the parameters there changes TinyMCE throughout the application.

Thats cool ,but there must be a better way of doing this rather than changing the core RunnerAll.js file.

Can I just re-initialize the instance in a code snippet in the JavaScript OnLoad event?

Any pointers much appreciated.
Tandy 7/4/2021

I really do not know if it is the right way to do things but what I do is take a full copy of that file. Then I upload it into my program. That replaces that file and leaves the core files alone. Then just change it there.

Goto the Editor tab then scroll down to Custom Files. Be sure to add all folders to that file. That way the structure is the same. Don't add any of the files in those folders to that file you need. Only add that file you edited. It will replace the core one. That way everything else will upgrade but that file you edited. Then when you need to edit more you just edit it there and leave the core files alone.

fhumanes 7/4/2021

Hello:

If it is possible to use another HTML editor, I advise you to check the free plugins that are available and specifically that of "Summernote", which has the functionality you ask.

Free plugins, URL: https://fhumanes.com/blog/guias-desarrollo/plugines-de-phprunner/

Greetings,
fernando
G
 		gtothill author 7/5/2021

Thanks both - really helpful.

D&J Data - Boat Transporters - I was aware of the additional file functionality - but I wasnt aware that placing a file with the same name as a core file replaced the corresponding core file - this is extremely helpful and means I can safely (and quickly) experiment with alterations to the core files where necessary.

Fernando - thanks so much for your help with this and for pointing me at your collection of updated plugins. The work you have done on this is really amazing - there are several plugins that you have updated that are going to be really useful. Im also going to try Summernote, which is a great combination of simplicity and styling.

Thanks again both!

Geoff.
G
 		gtothill author 7/5/2021

Just a quick warning in case you are struggling with the same issues with customising TinyMCE by editing RunnerAll.js and putting it in the custom files section.

When I tried this the PHPR editor crashed and I corrupted my current project, requiring a restore from the backup.

Still searching to a good solution for using TinyMCE - although Summernote may be what I will settle on in the end.

I will drop Sergey an email and see if he can shed some light on the best way of doing this.

Cheers

Geoff.