[#12555] - Multiple Editors on a single page
- Closed
- 25 Oct 2016
- Medium
- Build: master
- # 12555
This issue exists since the Ice Age
Steps to reproduce
Edit administrator/components/com_content/models/forms/article.xml and add after
<fieldset addfieldpath="/administrator/components/com_categories/models/fields" >this:
<field
name="test1"
label ="Test Field"
type="editor"
width="300"
filter="safehtml"
editor="TinyMCE"
buttons="true"/>
<field
name="test2"
label ="Test Field"
type="editor"
width="300"
filter="safehtml"
editor="none"
buttons="true"/>
<field
name="test3"
label ="Test Field"
type="editor"
width="300"
filter="safehtml"
editor="codemirror"
buttons="true"/>Edit administrator/components/com_content/models/forms/article.xml and add after
<fieldset class="adminform">
<?php echo $this->form->getInput('articletext'); ?>
</fieldset>this:
<fieldset class="adminform">
<?php echo $this->form->getInput('test1'); ?>
</fieldset>
<fieldset class="adminform">
<?php echo $this->form->getInput('test2'); ?>
</fieldset>
<fieldset class="adminform">
<?php echo $this->form->getInput('test3'); ?>
</fieldset>Expected result
Different editors should be able to coexist in a page
Actual result
- XTD-Buttons don't work
- 2 out of the 3 editors are missing vital javascript functionality
- Static function jInsertEditorText is not working universally
Solution
There is a solution, without breaking B/C, but will not solve the problem until every editor out there jumps into the new methods.
The question
[mainly to PLT]
Do you want to solve this problem?
zero-24
- | Labels |
Added:
?
|
||
wilsonge
- | Title |
|
||||||
I totally forgot that there was a previous issue. So some hints and some code here to demystify the ~solution~.
In core.js there is an object named Joomla.editors, let's use it then and set getters and setters for the insert and get data.
here is the updated tinymce-init.js:
setupEditors: function ( target ) {
target = target || document;
var pluginOptions = Joomla.getOptions ? Joomla.getOptions('plg_editor_tinymce', {})
: (Joomla.optionsStorage.plg_editor_tinymce || {}),
editors = target.querySelectorAll('.joomla-editor-tinymce');
for(var i = 0, l = editors.length; i < l; i++) {
this.setupEditor(editors[i], pluginOptions);
//tinyMCE.editors(this.id).getContent()
/** Register Editor */
Joomla.editors.instances[editors[i].id] = {
'id': i,
'getValue': function () { return tinyMCE.editors[this.id].getContent(); },
'setValue': function (text) { return tinyMCE.editors[this.id].setContent(text); },
'insertAtCursor': function (text) { return tinyMCE.editors[this.id].execCommand('mceInsertContent', false, text); },
'onSave': function() { if (tinyMCE.editors[this.id].isHidden()) { tinyMCE.editors[this.id].show()}; return '';}
};
/** On save **/
editors[i].form.addEventListener('submit', function() {
var editors = target.querySelectorAll('.joomla-editor-tinymce');
for(var i = 0, l = editors.length; i < l; i++) {
console.log('hit')
if (tinyMCE.get(editors[i].id).isHidden()) {
tinyMCE.get(editors[i].id).show();
}
}
})
}
},then instead of using tinyMCE.activeEditor.setContent(' . $html . '); we could use:
Joomla.editors.instances['jform_articletext'].getValue()
Joomla.editors.instances['jform_articletext'].setValue('something')
Joomla.editors.instances['jform_articletext'].insertAtCursor('Back once again with the renegade masters')
This is a very simple API but will solve the problem once and for all. Also for J4 all these crap can go away:
/**
* TinyMCE WYSIWYG Editor - get the editor content
*
* @param string $editor The name of the editor
*
* @return string
*/
public function onGetContent($editor)
{
return 'Joomla.editors.instances['.$editor.'].getValue();';
}
/**
* TinyMCE WYSIWYG Editor - set the editor content
*
* @param string $editor The name of the editor
* @param string $html The html to place in the editor
*
* @return string
*/
public function onSetContent($editor, $html)
{
return 'Joomla.editors.instances['.$editor.'].getValue('.$html.');';
}
/**
* TinyMCE WYSIWYG Editor - copy editor content to form field
*
* @param string $editor The name of the editor
*
* @return string
*/
public function onSave($editor)
{
}@ggppdk as you realise I already tested this and it works great!
I ll be happy to test a PR
Didn't the new pr for codemirror also address this?
this is a different topic, it is not about multiple editors of same type in the same page
It is about multiple editors of different type in the same page (@dgt41 right ?)
See below: (editor="...")
<fieldset addfieldpath="/administrator/components/com_categories/models/fields" >
...
<field ... editor="TinyMCE" buttons="true" />
<field ... editor="none" buttons="true" />
<field ... editor="codemirror" buttons="true" />
...
</fieldset>
There is a PR, so closing here
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-10-25 22:23:47 |
| Closed_By | ⇒ | dgt41 |
@dgt41
The following issue is not exactly the same as this one but it is related and it has a J4.0 re-evaluate label,
if you can do earlier without B/C problems it would be great
#8429