AbanteCart Community

AbanteCart Development => Extensions and Add-Ons => General Extensions => Topic started by: dhigz on July 26, 2016, 12:11:02 AM

Title: Multiple instances of timymce on admin pages
Post by: dhigz on July 26, 2016, 12:11:02 AM
When placing more than one "texteditor" (aka tinymce instance) type form field on an admin side form, only the last tinymce instance works properly.

Any instances placed before the last one have these problems: 1) When switching to visual mode, the text area looses all formatting and buttons. Switching back shows correct HTML/Text View. 2) The field acts as an updateable field (ie. turns orange).

I took a look at the jquery code in the form/text_area.tpl file. First thing I noticed was 'tinymce.remove();' was at the very top which appears that the second instance would kill the first instance, but removing it had no affect one way of the other.

One thing I did find is that the value for 'activeEditor' was the last tinymce instance when you clicked on the first. This would suggest to me that activeEditor should be defined. I tried a few solutions, but could not get any to work properly.

Does anyone have a fix for this or a suggestion of how to proceed? The extension I am working on really needs multiple instances of tinymce on the page. This problem appears to be one of the downsides of switching from ckeditor.


Title: Re: Multiple instances of timymce on admin pages
Post by: abolabo on July 26, 2016, 03:45:35 AM
ok.lets test.
1. just open public_html/admin/controller/pages/catalog/category.php
2. find texteditor usage and clone it.
3. change name of clone field.
you'll get something like this^
Code: [Select]
$this->data['form']['fields']['general']['description'] = $form->getFieldHtml(
array('type' => 'texteditor',
'name' => 'category_description[' . $content_language_id . '][description]',
'value' => $this->data['category_description'][$content_language_id]['description'],
'style' => 'xl-field',
'multilingual' => true,
$this->data['form']['fields']['general']['description2'] = $form->getFieldHtml(
array('type' => 'texteditor',
'name' => 'category_description[' . $content_language_id . '][description2]',
'value' => $this->data['category_description'][$content_language_id]['description2'],
'style' => 'xl-field',
'multilingual' => true,

4. open any category edit page.

it works for me.
Title: Re: Multiple instances of timymce on admin pages
Post by: dhigz on July 26, 2016, 05:05:11 PM
Yes, but did you test it?

See attached files:
A-Initial State.PNG - Did exactly what you said above. Add new category - entered values in fields.

B-instance_1_visual.PNG - Clicked the visual button on instance 1. Note the smaller textarea filed and the lack of buttons.

C-instance_2_visual.PNG - Clicked the html/text button on instance 1 and the visual button on instance 2. Note the value of instance 2 is now showing in instance 1 and there is no value in instance 2. I tried alternating clicking of the buttons between the two instances and got different but results of the values transferring between the instances.

D-edit_instance.png - Moving over to edit mode, capture shows where instance 2 is showing an updateable field. Clicking between the buttons again, will either cause the first instance or the second instance to show this behavior.

I am currently using the latest version (1.2.7) for this test and Firefox browser.


Title: Re: Multiple instances of timymce on admin pages
Post by: dhigz on July 27, 2016, 12:28:22 AM
I found a solution that works for me.

First off, the updateable field error turned out to be unrelated and caused by another problem. One down.

Also found that adding media did not work correctly either. You click "Add Media" on the first instance then choose an image, it gets added to the second instance. Upon deeper investigation, I found that the first tinymce instance was never even created (no containers).

There were two root causes of the problems:
The first cause is due to the fact that the tinyMCE.activeEditor value does not get the value of the actual active editor. The id of the element needed to be defined in the jQuery script for each instance. After fixing this, I at least got the values to be correct when changing states between edit and visual, but the first tinymce instance was still not being created.

The other problem centered around the init method. As part of testing I created a new tinymce.init with just the selector value. Suddenly everything worked. Using a common array is good in theory but it does not appear to work with multiple instances.  What I ended up doing is copying the values in the mcei array in head.tpl to my new init statement.

Everything is now working correctly. I have attached my solution.

I also needed a method to turn off the "Add Media" button for a specific field. I accomplished this by assigning an attribute of no_media to the $form->getFieldHtml array and since I already edited the text_editor.tpl file, added some language to turn off the button. This is a quick fix, but might be something to add to later releases.