[#12561] - Allow multiple (different) editors in one page
- Fixed in Code Base
- 22 Feb 2017
- Medium
- Build: staging
- # 12561
- Diff
- dgrammatiko:+++multiple_editors
- Success continuous-integration/drone the build was successful Details
- Success continuous-integration/travis-ci/pr The Travis CI build passed Details
- Success JTracker/HumanTestResults Human Test Results: 2 Successful 0 Failed. Details
User tests: Successful: Unsuccessful:
Pull Request for Issue #12555
XTD-Buttons will NOT work if more than one (and different) editors are rendered on the page
Steps to reproduce
Make sure that the default editor is tinyMCE
Edit administrator/components/com_content/models/forms/article.xml and add after
<fieldset addfieldpath="/administrator/components/com_categories/models/fields" >this:
<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/views/article/tmpl/edit.php and add after
<fieldset class="adminform">
<?php echo $this->form->getInput('articletext'); ?>
</fieldset>this:
<fieldset class="adminform">
<?php echo $this->form->getInput('test2'); ?>
</fieldset>
<fieldset class="adminform">
<?php echo $this->form->getInput('test3'); ?>
</fieldset>Then try to use the buttons to insert some images, contacts, etc. Oops it's broken for all except the last one.
Summary of Changes
Introducing a simple API which is just some setters and some getters.
This is more informative:
// An object to hold each editor instance on page, only define if not defined.
Joomla.editors.instances = Joomla.editors.instances || {
/**
* Editors MUST register, per instance, the following:
*
* getValue Type Function
* Should return the complete data from the editor
* Example: function () { return this.element.value; }
* setValue Type Function
* Should replace the complete data of the editor
* Example: function (text) { return this.element.value = text; }
* replaceSelection Type Function
* Should replace the selected text of the editor
* If nothing selected, will insert the data at the cursor
* Example: function (text) { return insertAtCursor(this.element, text); }
*
* USAGE (jform_articletext is the editor id)
* getValue:
* Joomla.editors.instances['jform_articletext'].getValue();
* setValue:
* Joomla.editors.instances['jform_articletext'].setValue('Joomla! rocks');
* replaceSelection:
* Joomla.editors.instances['jform_articletext'].replaceSelection('Joomla! rocks')
*
* *********************************************************
* ANY INTERACTION WITH THE EDITORS SHOULD USE THE ABOVE API
* *********************************************************
*/
};Testing Instructions
Apply this patch
Go to back end and edit/create an article
On purpose there are all the editors in that page
Try the buttons in all of them. Cool eh?
Documentation Changes Required
The comment above comes from core.js but needs to be published also in the form->editor page.
TL;DR
Some images then:
Calling @Fedik @andrepereiradasilva @ggppdk @mbabker
This change is
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Category | ⇒ | Administration Components JavaScript Front End Plugins |
| Title |
|
||||||
| Title |
|
||||||
I'm not sure what this media/system/js/editor-codemirror.js is about but I don't like it.
it's just the initiator script, this way there is no inline script at all
I don't think there's anything wrong with inline script. The problem with this is that it seems to be part of Joomla core instead of the CodeMirror plugin and it can't be overridden like the current version can (via layouts).
@okonomiyaki3000 not quite true, you can still use the layouts although a tiny script will be missing (the one that comes from code mirror.php). But if it breaks B/C I can revert it and redo this in J4
Sorry, I can't get behind putting files used by the editors in media/system/js/. They just don't belong there. The editors should be thought of as optional plugins, decoupled from the Joomla core.
@okonomiyaki3000 I will revert that part, but this PR is NOT about the initialisation of the editors, it solves a very fundamentally wrong architectural concept that limits joomla to only one editor per page...
@okonomiyaki3000 I've restored the inline initialisation script for codemirror...
I don't know, I'm still seeing media/system/js/editor-codemirror.js. What about other editors?
What about other editors?
Other editors also using static scripts in media/editors/whatever/js. Also code mirror should move to static script in J4
Isn't media/editors/whatever/js just the editor's distro code? Is Joomla-specific code meant to go in there too?
Right now the folders `media/editor/whatever are maintained/manipulated by joomla, in J4 the aim is that foreign code should live in media/vendor/ folder and there should be an automated way to manage the updates (code is already written for that).
So here is a glimpse from the future (j4):
I see, that makes sense I guess. Does that mean that the libraries under vendor must be used as distributed? What if we prefer custom builds?
@okonomiyaki3000 I guess this will manage only the joomla distributed code, I have no clue if this will be extended somehow for 3rd PD (my guess is no, 3rd PD could provide their custom code in their own directory). Or you can manipulate or override the grunt script and get whatever you want, with the added step to re-run the script every time joomla updates these assets...
Conflicts
@dgt41 Would be nice to have some javascript tests too.
Bit busy this month. I'll see what I can do when I get some free time
Is this ready for testing ?
In Joomla article form , if i use tinymce editor, i am getting (firefox console):
SyntaxError: expected expression, got '<'[Learn more]index.php:1
| Category | Administration Components JavaScript Front End Plugins | ⇒ | Administration Components JavaScript External Library |
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-11-14 11:42:49 |
| Closed_By | ⇒ | dgt41 |
| Category | Administration Components JavaScript External Library | ⇒ | Administration com_contact com_content com_menus com_modules JavaScript External Library Components |
please re-open
after your latest changes, i had re-tested but i was still getting
SyntaxError: expected expression, got '<'[Learn more]index.php:1
Some attempt to get JS code actually returns html code, i was going to look more to it, and find for which URL it is happening
| Status | Closed | ⇒ | New |
| Closed_Date | 2016-11-14 11:42:49 | ⇒ | |
| Closed_By | dgt41 | ⇒ |
| Status | New | ⇒ | Pending |
Thanks,
i will post back, with the URL, that is causing this
I had found the URL, but i had not find the PHP file that was adding it
Tested, looks good, but can you rebase this PR ?
there have been changes to e.g. addStyleSheet, etc functions
@jeckodevelopment done
| Labels |
Removed:
?
|
||
Any interest to get this merged or should I close it?
I ll test after you re-fix conflicts, and re-test after that if needed )
It works, but
- new configuration that allows tinyMCE configurations per per access level added by recent PR is not used
- the editor always start in OFF state i have to click "toggle editor" to show it
I think we need to wait for this PR to be tested:
#13387
and then update / test this one ?
I have tested this item
In the testing steps, there is no tmpl/default.php... so I guess it has to be tmpl/edit.php
Buttons only work in the last editor.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12561.
@ggppdk yes that needs to be pulled as well
@anibalsanchez I just tested it again and works fine here, I also updated the description and the steps required to test this..
Anyways let's wait for the #13387 to be merged and then I will re update this one
Great one to test, once updated ;-)
@ggppdk @rvbgnu @anibalsanchez re synced the repo, can you give it a go?
I have tested this item
Thanks Dimitri!
Just a precision, as I am not sure to be able to reproduce the issue, compare to your images: I don't have the any content in the two additional editors when I open an existing article. As I understand a bit the two code changes to get them, I supposed it is normal. I may suggest to edit your test instruction to remove the confusion.
Otherwise, I have the buttons working properly in the other two editors. So I marked this test successful (Please remove it if I'm wrong).
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12561.
As I understand a bit the two code changes to get them, I supposed it is normal
Yes, you are right, the extra editors are dummies, so any data you've put into them will be lost after save (there is no code to manipulate it and save it in the database).
Thanks you for testing this, really appreciated!
I have tested this item
Test OK
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12561.
@ggppdk @rvbgnu @infograf768 can we have one more test here, so we can RTC this?
So nobody for this test ?
Or should I re-test it (changes since 08/01/2017)??
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12561.
So I've tried, but it doesn't change before or after the patch. The TinyMCe also had an update. I have to reset with repository copy and re-install I think...
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12561.
I have tested this item
If this is in, then we can offer the different editors attributes on com_fields.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12561.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12561.
Note to whomever might merge this: please ping to update the documentation for the editor input field, etc
rdeutz
- | Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2017-02-22 16:59:39 |
| Closed_By | ⇒ | rdeutz | |
| Labels |
Added:
?
?
|
||
I just grabbed the latest build and run into an issue with having multiple editors on the same page. Seems like only one of them gets initialized. I have three of them in my example. The Joomla.editors.instances object contains just the first editor instance. The tinyMCE.editors shows one as well. If I click the "toggle editor" button, this field shows up in tinyMCE.editors.
This can also be reproduced by changing some form elements of the com_content/forms/article.xml to type editor:
I just grabbed the latest build and run into an issue with having multiple editors on the same page.
That's impossible (each tinyMCE or code mirror or none has it's own instance) according to the code: https://github.com/joomla/joomla-cms/blob/staging/media/editors/tinymce/js/tinymce.js#L65-L79
Can you type Joomla.editors and press enter in your browsers console? Do you have all the instances there?
@svenbluege actually there is a bug, but here is the fix: #14194
Thanks for testing!
@infograf768 check #14902
@okonomiyaki3000 can you check the changes I did in codemirror here?