TinyMCE customization

Hi,

I believe TinyMce at the moment is not available as a configurable component within Rollbase. This could be a nice add on, so please add it to the ideas section.

Given that, you can directly customize tinymce by modifying rbf_initializeAllTinyMCEs under common.js. It would be advisable to customize this function and add it to the Application (More Actions-> Header & Footer) as this would be one way to preserve your customization's across upgrades.

-Regards,

Manooj

Hi,

Thanks for the reply. I added some changes to the rbf_initializeAllTinyMCEs under main.js. (Changes under common.js does not seem to apply. Do you know why?).

Now I am calling it from a script component in one of the Edit page where I have the TinyMCE component.

It is applying the changes to TinyMCE, but the Edition of the HTML text is not saved, ie, if I type something in the new HTML editor, and I click save, the view page comes up, but what I just typed is not there.

Also, I tried just calling rbf_initializeAllTinyMCEs from that same script, without changing anything in main.js or common,js. It is behavinbg the same : the changes are not saved. Same if I put the code in a hosted js file and call it from the header of one application.

Here is the code I am adding to the script :

var rbv_htmlEditorButtonRow1 = 'bold,italic,underline,|,forecolor,backcolor,|,alignleft,aligncenter,alignright,alignjustify,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,styleselect,anchor,|,link,unlink,|,image,|,table,emoticons,|,fontselect,fontsizeselect,|,code,fullscreen';

var rbv_htmlEditorButtonRow2 = 'image';

var rbv_hideHtmlEditorMenu = false;

rbf_addOnLoadMethod(function () {

rbf_initializeAllTinyMCEs('en');

});

Can you see anything wrong here ?

Thank you

Meryem

Hi again,

When I add the whole definition of the function to the Hosted file, it works properly. (I was just calling rbf_initialiazeAllTinyMCEs, not redefining it in that file).

So that's fine! thank you :)

Cheers

Meryem

Hi again,

After some testing, the customization of tinyMCE is done properly, but when any change is done to the HTML rich text, it is not saved to the view page.

So to sum up :

- I have a hosted file containing rbf_initializeAllTinyMCEs(lang){...}, which is a custom definitionof the function. followed by this :

var rbv_htmlEditorButtonRow1 = 'bold,italic,underline,|,forecolor,backcolor,|,alignleft,aligncenter,alignright,alignjustify,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,styleselect,anchor,|,link,unlink,|,image,|,table,emoticons,|,fontselect,fontsizeselect,|,code,fullscreen';

var rbv_htmlEditorButtonRow2 = 'image,italic';

var rbv_hideHtmlEditorMenu = false;

rbf_addOnLoadMethod(function () {

rbf_initializeAllTinyMCEs('en');

});

- I am calling this hosted file from the header of application like this :

<script src="{!#HOSTED_FILE.539526}" type="text/javascript"></script>

Do you know why the saving is not done please ?

Thank you

Mery

Hi guys,

Any update with this please ?

Thank you!

Mery

Hi -

In common.js, we have function tinyMceInitCallback which is specifically for the purpose of customizing tinyMCE Editor.

Can you try moving your customizing code into :

function tinyMceInitCallback(){

//customizing code.

   // variable to access tinyMCE is tinyMCE.

};

then add this function into the page you need. See if this helps your case.

If not, please see if there are errors on the browser console that can help.

- Regards,

Manooj

Hi,

My custom code is :

file_browser_callback : function (field_name, url, type, win) {

win.document.getElementById(field_name).value = '';

},

I am just trying to add a file browser to the insert image/video/link popups.

I am adding file_browser_callback to the tinyMCE.init() in rbf_initializeAllTinyMCEs.

Should I call all tinyMCE.init() again inside of tinyMceInitCallback() with file_browser_callback ?

And then add just this function to the page ? Or both this one and rbf_initialiazeAllTinyMCEs?

Thank you

Mery

A sample implementation :

function tinyMceInitCallback(){

tinyMCE.DOM.get('HTMLTextarea_ifr').style.height="200px";

};

Whenever tinymce initializes, it will call this function and logic in this can involve the customization stuff. I am hoping that adding your custom logic into this function and then adding the function to the page should work.

-Regards,

Manooj

Hi,

Thank you for the last reply. I got some customization working from tinyMceInitCallback() function.

Now I am trying to detect the onchange of the active editor to do some more changes, as all I am writing in that callback function is done on load of tinymce page.

I added this in tinymce.init() :

setup : function(ed) {

         ed.onChange.add(function(ed, l) {

                 alert('Editor contents was modified. Contents: ' + l.content);

         });

  },

And it does not alert anything on change.

I also tried this, from the cllback function:

tinyMCE.activeEditor.dom.get('tinymce').addEventListener('mouseenter', function test(event){

alert('mouseenter firing');

alert(event.target.tagName);

});

Doesnt do anything.

I tried the classic onchange as well, nothing..

Any ideas please how to achieve that ?

Just as a reminder, the tinyMceInitCallback() function is in a hosted file, that I am calling in teh header of the application.

Thank you

Mery

Hi,

Any update about this please?

Thank you

Mery

Do you see any errors on the console? Is the javascript cache reloaded?

Yes I did an 'Empty Cache and hard reload' form my browser.

When I add the option 'setup' to tinymce.init(), with this code :

setup : function(ed) {

        ed.onChange.add(function(ed, l) {

                alert('Editor contents was modified. Contents: ' + l.content);

        });

 },

I have this error :

Uncaught TypeError: Cannot read property 'add' of undefinedtinyMCE.init.setup @ main.js:110N.execCallback @ tinymce.min.js:9N @ tinymce.min.js:8r @ tinymce.min.js:9(anonymous function) @ tinymce.min.js:9o @ tinymce.min.js:2a @ tinymce.min.js:9a.bind @ tinymce.min.js:2f.bind @ tinymce.min.js:4v.init @ tinymce.min.js:9rbf_initializeAllTinyMCEs @ main.js:108(anonymous function) @ main.jsp?id=31596&pageId=19390&view=main:87rbf_runOnLoadMethods @ main.jsp?id=31596&pageId=19390&view=main:75onload @ main.jsp?id=31596&pageId=19390&view=main:92

I don't think the parameter 'ed' has an onChange available. Can you please try debugging what sort of object 'ed' is?

Also, please refer to tinymce documentation (if not already) just to be sure that what you are doing is the correct as this doesn't seem to be a rollbase error.

-Thanks

I just found some other way to detect the changes :

tinyMCE.activeEditor.dom.get('tinymce').onmouseenter = function(){};

It is not exactly the same behavior than the on Change function I was looking for, but it does the job since the mouse is inside of the editor (which is always the case when editing).

Thank you

Mery