change tinyMCE Options dynamically

Questions
1

Hey,

maybe someone of you had this situation.
Im using the html area from servoy extra components in my TI project.

Now i have a html element in my form and i change the tinyMCE options in the onLoad() of the form like this:

/**
 * @properties={typeid:35,uuid:"706A860D-EBBE-4EE3-B80D-85791BB2F1D4",variableType:-4}
 */
var TinyMCESettings2 = {
	toolbar : "false",
	menubar : "false"
}

/**
 * Callback method when form is (re)loaded.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"02BFA8F8-FA0E-4BD0-94E0-1E1DD0370DB6"}
 */
function onLoad(event) {
	elements.html1.putClientProperty(UICONSTANTS.HTML_EDITOR_CONFIGURATION,TinyMCESettings2)
}

Now what i really want is, in the onFocus() of the html area i want the toolbar and menubar appear and in the onFocusLost() event i want them gone again.

Do you have any idea? Or am i bound to set the html area only in the onLoad() of the form.

Thanks and greetings.

2

Hi Vik,

As far as I know, you can only set these options once.
Even unloading the form, and reloading it with different options doesn’t have any effect.

Another way would be to modify css, but unfortunately this can not be done directly from Servoy as the editor runs within an iframe.

It could probably be something to be added as part of the component.
So maybe you want to open a feature request for this.

The rigid one-time configuration has bothered me before on an application using different configurations for email signatures.
In this case I think a css solution would be the best as you need to re-instantiate the editor to get different options to be applied.
This will probably result in loss of focus.

Although no direct solution, I hope this helps

3

Hi Vik,

I need to correct myself.
Although the editor part runs in an iframe, the toolbar is not.

So the easy solution is to create 2 functions:

/**
 * @param {JSEvent} event
 *
 * @private
 */
function onFocusLostHTML(event) {
	elements.myHtmlArea.addStyleClass('no-toolbar');
}

/**
 * @param {JSEvent} event
 *
 * @private
 */
function onFocusGainedHTML(event) {
	elements.myHtmlArea.removeStyleClass('no-toolbar');
}

Bind these functions to the components onFocusLost / onFocusGained event handlers.
Set the styleclass of the component to ‘no-toolbar’ (this is your default, unfocused state)

Now add this to your css/less file:

.no-toolbar .tox-editor-header {
	display: none;
}

That should do the trick

4

Thanks Marc, i´ll try that.

For now i just doubled my elements and do a visible true/false handler.
Its rly ugly under the hood but does its job.

I was a similirar feature request on the jira board of servoy. maybe its in a future release.

Have a great day.