Link to home
Start Free TrialLog in
Avatar of Ken Haynes
Ken HaynesFlag for United States of America

asked on

Issues with the CKEditor plugin AutoSave, when there is more than one editor on the same page

I have a web page which contains 6 CKEditor instances, using the AutoSave plugin.

The AutoSave plugin works perfectly with single instances on a page but not with multiple instances. Multiple instances cause erratic behavior in that 6 prompts relating to autosaved content are displayed one at a time, but they are unresponsive.

I appreciate that each CKEditor instance requires a unique ID (as is illustrated in the code below) and research has shown me how to set these IDs within CKEditor.replace but for the life of me, I cannot get it to work.

I have tried different browsers and cache cleaning, to no avail.

The following code is in a loop of 6 iterations within a table. I have verified that the ColdFusion variable values are correct. The autosave_Savekey range is "autosave_2" to "autosave_7".
<td>
<textarea name="text_value_box#agi_array[agi][5]#" cols="78" rows="<cfif #agi_array[agi][4]# EQ "R">4<cfelse>8</cfif>" #route_form#>#getItem.text_value#</textarea>
<script type="text/javascript">
    CKEDITOR.replace( 'text_value_box#agi_array[agi][5]#',
     {
        customConfig: '#Editor.customConfig#',
        allowedContent: true,
        autosave_SaveKey: 'autosave_#agi_array[agi][5]#',
        toolbar: '#Editor.toolbar#'
        <cfif isDefined('Editor.font_names')>
        , font_names: '#Editor.font_names#'
        </cfif>
        <cfif isDefined('Editor.fontSize_sizes')>
        , fontSize_sizes: '#Editor.fontSize_sizes#'
        </cfif>
        <cfif not vIsSuperUser>
        , removePlugins: 'elementspath'
        </cfif>
     }
    );
</script>
</td>

Open in new window


I would be grateful for any suggestions as to a resolution.

Tech Spec:

CKEditor version: 4.9.2.
AutoSave Version: 0.1.8.
ColdFusion Version: 11.
Browsers Tested: Firefox, IE and Chrome.
Avatar of Ken Haynes
Ken Haynes
Flag of United States of America image

ASKER

[RESOLVED]

The correct format is:

<td>
    <textarea name="text_value_box#agi_array[agi][5]#" cols="78" rows="<cfif #agi_array[agi][4]# EQ "R">4<cfelse>8</cfif>" #route_form#>#getItem.text_value#</textarea>
    <script type="text/javascript">
        CKEDITOR.replace( 'text_value_box#agi_array[agi][5]#', 
        {
            autosave:   
                        {
                            SaveKey: 'autosave_#agi_array[agi][5]#'
                        },           
            customConfig: '#Editor.customConfig#',
            allowedContent: true,
            toolbar: '#Editor.toolbar#'
            <cfif isDefined('Editor.font_names')>
            , font_names: '#Editor.font_names#'
            </cfif>
            <cfif isDefined('Editor.fontSize_sizes')>
            , fontSize_sizes: '#Editor.fontSize_sizes#'
            </cfif>
            <cfif not vIsSuperUser>
            , removePlugins: 'elementspath'
            </cfif>
         }
        );
    </script>
</td>

Open in new window


The documentation for the AutoSave plugin, could be a little clearer in this respect.

Thanks to w8tcha on GitHub for this resolution.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.