Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#11157] - tinyMCE use document "scriptoptions", and allow to override tinyMCE Javascript parameters

? ? Success

User tests: Successful: Unsuccessful:

avatar Fedik
Fedik
16 Jul 2016

Pull Request for Issue #10996 .

Summary of Changes

The patch make tinyMCE plugin use JDocument::addScriptOptions/JDocument::getScriptOptions that automatically allow to override the editor options before the header rendering.

Another improve.
The patch also allow to have multiple editors on the page with specified options for each.

Testing Instructions

step 1

Check whether editor works as before. There was a lot changes in code, I could miss something.

step 2 Test override

In any system plugin for event onBeforeRender, try next code:

public function onBeforeRender()
{
    $doc = JFactory::getDocument();
    $editorOptions = $doc->getScriptOptions('plg_editor_tinymce');

    if(empty($editorOptions['tinyMCE']))
    {
        return;
    }

    $editorOptions['tinyMCE']['default']['menubar'] = false;

    $doc->addScriptOptions('plg_editor_tinymce', $editorOptions);
}

Expected result:

The menu bar should be disabled.

step 2 Test multiple editors with separated options

Use "Custom" module, and add there 2 more editor field:

<field name="test1" type="editor" label="test1"/>
<field name="test2" type="editor" label="test2"/>

Then onBeforeRender event do:

public function onBeforeRender()
{
    $doc = JFactory::getDocument();
    $editorOptions = $doc->getScriptOptions('plg_editor_tinymce');

    if(empty($editorOptions['tinyMCE']))
    {
        return;
    }

    // Specify options for 'test1' editor
    $editorOptions['tinyMCE']['test1']['menubar'] = false;
    $editorOptions['tinyMCE']['test1']['toolbar1']  = 'bold italic underline strikethrough';

    // For 'test2' use default options, but disable "menubar"
    $editorOptions['tinyMCE']['test2'] = $editorOptions['tinyMCE']['default'];
    $editorOptions['tinyMCE']['test2']['menubar'] = false;

    $doc->addScriptOptions('plg_editor_tinymce', $editorOptions);
}

Expected result:

  • Default editor of the Custom module should stay as configured in the plugin.
  • editor with label "test1" should be without "menubar" and with bold italic underline buttons
  • editor with label "test2" should be without "menubar" and "toolbar1" should looks as in default editor

Votes

# of Users Experiencing Issue
1/1
Average Importance Score
5.00
avatar Fedik Fedik - open - 16 Jul 2016
avatar Fedik Fedik - change - 16 Jul 2016
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 16 Jul 2016
Labels Added: ?
avatar brianteeman brianteeman - change - 17 Jul 2016
Category ⇒ JavaScript Plugins
avatar brianteeman brianteeman - change - 17 Jul 2016
Title
…
tinyMCE use document "scriptoptions", and allow to override tinyMCE Javascript parameters
tinyMCE use document "scriptoptions", and allow to override tinyMCE Javascript parameters
avatar schnuti schnuti - test_item - 17 Jul 2016 - Tested successfully
avatar schnuti
schnuti - comment - 17 Jul 2016

I have tested this item ✅ successfully on 7b4b16c

I used a fresh 3.6 instance.
1. Tested article edit and custom module with all three tinyMCE settings (Simple, Advanced and Extended, backend and frontend) All OK!
2. Activated a plugin that overrides the settings and tested again as 1. Override OK!
3. Changed the plugin to use three different settings as described. Tested with "extra fields" added as parameters to the Custom Module. I got one "normal" editor and two modified. -> OK!

I'll have some use of 3. as well. ?

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11157.

avatar schnuti
schnuti - comment - 17 Jul 2016

I'll help with some documentation if you give me a hint to where it belongs.

avatar schnuti
schnuti - comment - 18 Jul 2016

Maybe the key of the array should be named something else than "default". There are now 3 different default settings involved. The plugin default ( = Advanced ), the built in tinyMCE default settings and now in the document. Replace with something like "jmce" ?

avatar Fedik
Fedik - comment - 18 Jul 2016

default here in Joomla context, and contain info how the plugin is configured, here are parameters selected by user in the plugin configuration.
And we do not work with default options of the tinyMCE.js script directly, in any way.
jmce are less obvious name ?

avatar schnuti
schnuti - comment - 18 Jul 2016

@Fedik
Well I got a little confused. Not important but I need some explanation.

Is this "default" used for your example field test1 or the tinyMCE defaults? For field2 you explicitely load this "default"

In the custom plugin:

$editorOptions['tinyMCE']['test2'] = $editorOptions['tinyMCE']['default'];

Result in the HTML:

"test1":{"menubar":false,"toolbar1":"bold italic underline strikethrough"}
,"test2":{"suffix":".min","baseURL ....

avatar Fedik
Fedik - comment - 18 Jul 2016

well, maybe then better I will rename it to global ?

$editorOptions['tinyMCE']['default'] there all options chosen by user in the plugin configuration. So they used by default for all "tinyMCE" editors in Joomla.

When you do:

$editorOptions['tinyMCE']['default']['menubar'] = false;

You override option chosen by the user in the plugin configuration. And it will affect all "tinyMCE" editors in Joomla, except those you override by next 'test1' example.

When you do:

$editorOptions['tinyMCE']['test1'] = array();
$editorOptions['tinyMCE']['test1']['menubar'] = false;
$editorOptions['tinyMCE']['test1']['toolbar1'] = 'bold italic underline strikethrough';

You fully ignore options chosen by user in the plugin configuration.

When you do:

$editorOptions['tinyMCE']['test2'] = $editorOptions['tinyMCE']['default'];
$editorOptions['tinyMCE']['test2']['menubar'] = false;

You copy options chosen by user to an editor with name test2, and modify them (['menubar'] = false) only for this editor instance.

avatar schnuti
schnuti - comment - 19 Jul 2016

@Fedik
Thanks! That's what I was assuming. God to get confirmed.

A simple test without copied options. (test1)
I changed tinyMCE to use
instead of

. Test1 still uses the tinyMCE fallback (default)

. As expected.
If you want ta add a button like charmap, you have to add a "plugin-string" with "charmap" as well. As expected.

avatar joomla-cms-bot joomla-cms-bot - change - 18 Aug 2016
Category JavaScript Plugins ⇒ Layout JavaScript External Library Plugins Front End
avatar dgt41 dgt41 - test_item - 18 Aug 2016 - Tested successfully
avatar dgt41
dgt41 - comment - 18 Aug 2016

I have tested this item ✅ successfully on bc785a3

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11157.

avatar dgt41
dgt41 - comment - 19 Aug 2016

@Fedik you need to resync this as @wilsonge did merge another PR for some button movement

avatar Fedik
Fedik - comment - 19 Aug 2016

I will check

avatar schnuti
schnuti - comment - 24 Aug 2016

@Fedik
Test faild ?
I tested with current-staging and the test data.
Edit: removed the ttext. See my excuse below!

avatar schnuti
schnuti - comment - 24 Aug 2016

@Fedik
Sorry, too early in the morning. I made the change to the backend module and checked the frontend one!
All three instances appear with different toolbars and the error was a typo of mine!
All is well.

avatar dgt41 dgt41 - test_item - 24 Aug 2016 - Tested successfully
avatar dgt41
dgt41 - comment - 24 Aug 2016

I have tested this item ✅ successfully on 7804f39

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11157.

avatar dgt41
dgt41 - comment - 24 Aug 2016

@schnuti can you mark your test in the issue tracker: https://issues.joomla.org/tracker/joomla-cms/11157
So we can move this to RTC?

avatar schnuti schnuti - test_item - 24 Aug 2016 - Tested successfully
avatar schnuti
schnuti - comment - 24 Aug 2016

I have tested this item ✅ successfully on 7804f39

All is well since my last test. New test, same result.

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11157.

avatar zero-24 zero-24 - change - 24 Aug 2016
Status Pending ⇒ Ready to Commit
avatar zero-24
zero-24 - comment - 24 Aug 2016

RTC

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11157.

avatar joomla-cms-bot joomla-cms-bot - change - 24 Aug 2016
Labels Added: ?
avatar dgt41
dgt41 - comment - 24 Aug 2016

@zero-24 can you put a 3.7 milestone here?

avatar zero-24
zero-24 - comment - 24 Aug 2016

Currently we need to ask @brianteeman or anyone from the PLT to do this

avatar zero-24
zero-24 - comment - 24 Aug 2016

We should also add the new feature label maybe

avatar brianteeman brianteeman - change - 24 Aug 2016
Labels Added: ?
avatar schnuti
schnuti - comment - 26 Aug 2016

@Fedik , @dgt41 and anyone else with ideas around those overrides. If you have some time, please read the question I added on the Google dev. list
Testing override of TinyMCE settings

avatar schnuti
schnuti - comment - 27 Aug 2016

@Fedik
I'm trying some more overrides and have found a problem. I want to load plugins from external source ( = not the tinymce plugin path). I want to use this for some available plugins.
This works when I add it directly to a tinymce init but not when I add it in the override.

...],
external_plugins: { 'cbtinybuttons' : 'http://localhost/j3/media/com_mycom/js/cbtinybuttons.min.js'},
toolbar: '   ...

I've tried a lot with single and double quotes but tinymce breaks and no editor is loaded.

$external_plugins = '{ "cbtinybuttons" : "'.JUri::root(true).
                            '/media/com_mycom/js/cbtinybuttons.min.js"}';
$editorOptions['tinyMCE']['default']['external_plugins'] = $external_plugins;

Result in the HTML source:

..."}],"external_plugins":"{ \"cbtinybuttons\" : \"\/j3\/media\/com_oejcb\/js\/cbtinybuttons.min.js\"}","toolbar2...`

I see a difference that there are : included in the parameter.
Any idea?

avatar Fedik
Fedik - comment - 28 Aug 2016

@schnuti In theory should be like:

$editorOptions['tinyMCE']['default']['external_plugins']['myPlugin1'] = 'path/to/plugin.js';
$editorOptions['tinyMCE']['default']['external_plugins']['myPlugin2'] = 'path/to/another-plugin.js';
avatar schnuti
schnuti - comment - 28 Aug 2016

@Fedik
Thanks a lot! :bowtie:
This works as well! I loaded two tinymce plugins from another path in the media folder.
Maybe my code above would also work but this is obviously the way to do it.
If someone else want to test it ->
I used the wrong JUri! It has to be without true i.e. JUri::root() and without the first slash / . Write then the rest as Fedik says.

avatar schnuti
schnuti - comment - 28 Aug 2016

Now I'll make another test. Not really a test, I will use it.
As I do not have any plugins that modifies any of three textarea fields, I use TinyMce for inline editing of those fields in frontend.
I'll move that code to use this tinyMce override instead of the other special coding.
I'm only trying to prove, how useful it can be. ?

avatar alimpam alimpam - test_item - 28 Aug 2016 - Tested successfully
avatar alimpam
alimpam - comment - 28 Aug 2016

I have tested this item ✅ successfully on 7804f39

- Tested int article edit in different modes and it works

avatar Fedik
Fedik - comment - 17 Sep 2016

synced, because of #8544

avatar rdeutz rdeutz - close - 1 Oct 2016
avatar rdeutz rdeutz - merge - 1 Oct 2016
avatar zero-24 zero-24 - close - 1 Oct 2016
avatar rdeutz rdeutz - change - 1 Oct 2016
Status Ready to Commit ⇒ Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 ⇒ 2016-10-01 09:12:46
Closed_By ⇒ rdeutz
avatar zero-24 zero-24 - change - 3 Oct 2016
Labels Removed: ?

Add a Comment

Login with GitHub to post a comment