copied text inserted multiple times

[sami]

In some cases , when i paste data in ckeditor the text copied is duplicated multiple times (2 , 4 sometimes 8 ) . The same issues occurs sometimes with the insertText Method : ex : the code is insertText('beep') ---> the text inserted is 'beep beep beep beep'.

Unfortunately the issue is rare and i straggle to reproduce it everytime . Tho , I noticed that this behaviour may occur after heavy use of ckeditor (paste large amout of text etc etc ) .

In thoses cases when i debug the ckeditor i see many listners to insertText event (in the normal flow i see just one ) .

I guess in some heavier use of ckeditor , the same listner to insertText is register multiple times causing this weired behaviour .

Even if the reason may be not clear , I wonder if there is some workaround like reinitialize all listners before setting text .

Any help whould be truly appreciated since this bug is random and may affect clients data .

[Piotrek Koszuliński]

I looked into this, but I don't have any idea what could cause adding more listeners to editor#insertText than one. It would mean that editable's setup method is executed more than once and depending on the editable type you use that varies from "possible if some browser has a serious bug" to "hard to imagine" :D.

Anyway, to make it easier - could you describe what kind of editor you use, how do you initialise it, what plugins do you have, etc? And on what browser does it happen?

[sami]

OK thanks for the quick reply .

browser : chrome ans IE .

I have in mind some dirty warkaround to prevent this in case it occurs . i wish you confirm if it doesn't make regressions .

in editable.js - insert function : i plan to save the data passed in variable in funciton closure . Then if another data comes , i compare it to the old saved data . if it's the same and in time less than acceptable human interaction range time --> i ignore it .

i know what you say in mind but i m desperate :( lol

[sami]

Or , is there a way to tell ckeditor to setup properly again if i detect the problem .

[Piotrek Koszuliński]

Or , is there a way to tell ckeditor to setup properly again if i detect the problem .

You would need to destroy it and initialise again. Another possible way, although it may not help in this case, would be to switch between the source mode and wysiwyg mode (editor.setMode() (note: it is asynchronous)). That will remove the old editable and replace it with the new one so it should get rid of old listeners.

i know what you say in mind but i m desperate :( lol

The plan makes sense :) Desperate times need desperate solutions.

Anyway, as for the bug - there are millions of people using insertText and this is the first time I see such report. There may be some unusual trigger for it, but it means that without a working example we won't be able to reproduce it. In such case we'll need to close the ticket.

[Piotrek Koszuliński]

There's another report of the same issue - ​https://github.com/ckeditor/ckeditor-dev/pull/174. Hopefully, we'll be able to get more details, because two reports make existence of this issue a lot more plausible.

[jacky]

Hi, Thanks for you direct me here, I cannot provide the access to my company internal site, basically, I can provide the references and my code here Reference the following libs

<link rel="stylesheet" href="Scripts/media/smoothness/jquery-ui.css" /><link rel="stylesheet" href="Scripts/media/css/demo_table.css" /><link rel="stylesheet" href="Scripts/media/css/TableTools.css" /><link rel="stylesheet" href="Scripts/media/css/jquery.ui.timepicker.css" /> 
  <script type="text/javascript" src="Scripts/ui/jquery-1.9.1.min.js"></script>
    
  <script type="text/javascript" src="Scripts/ui/jquery-ui.js"></script>
    <script type="text/javascript" src="Scripts/ckeditor/ckeditor.js"></script>
    <script src="Scripts/media/js/jquery.dataTables.js" type="text/javascript"></script>
    
	<script type="text/javascript" charset="utf-8" src="Scripts/media/js/TableTools.js"></script>    
    <script type="text/javascript" src="Scripts/editableselect/jquery.eComboBox.min.js"></script>
    <script type="text/javascript" src="Scripts/timepicker/jquery.ui.timepicker.js"></script>
    <script type="text/javascript" src="Scripts/ServiceAssignment.js"></script>

The placing using the code

In Html

<div id="dialog-modal" title="Service Configuration" style="display: none;">        
            <table>
                <tr>
                    <td align="left" width="30%">
                        Configuration Name:                                            
                    </td>
                    <td>
                        <asp:TextBox ID="ruleName" name="ruleName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="left" width="30%">
                        Active Service:                                            
                    </td>
                    <td>
                        <asp:CheckBox ID="chkActive" name="chkActive" runat="server" value="1" Checked="True"></asp:CheckBox>
                    </td>
                </tr>
                <!--
                <tr>
                    <td align="left" width="30%">
                        Expired Date:                                            
                    </td>
                    <td>
                        <asp:TextBox ID="expiredDate" name="expiredDate" runat="server"></asp:TextBox>
                        <script type="text/javascript">
                            function onlyFuturedays(date) {
                                var today = new Date();
                                today.setDate(today.getDate() - 1);
                                return [(date > today), ''];
                            }
                            
                            g(document).ready(function() {
                                g('#expiredDate').datepicker({
                                    beforeShowDay: onlyFuturedays,                                    
                                });

                              
                            });                            
                        </script>
                    </td>
                </tr>
                    -->
                <tr>
                    <td colspan="2">
                        <table id="tblServiceConfiguration">
                            <tr id="configurationTr_0">
                                <td align="center" id="baserulestd_0">
                                   
                                </td>
                                <td>
                                    <div id="OperatorPlaceHolder_0">
                                        <select id="operator_0" name="operator_0">
                                            <option value=""></option>
                                            <option value="&gt;">&gt;</option>
                                            <option value="&gt;=">&gt;=</option>
                                            <option value="&lt;">&lt;</option>
                                            <option value="&lt;=">&lt;=</option>
                                            <option value="=">=</option>
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div id="ValuePlaceHolder_0">
                                        <asp:TextBox ID="Valuebox_0" runat="server"></asp:TextBox>                                        
                                    </div>
                                </td>
                                <td>
                                    <a href="#" onclick="DeleteValue(0);">Delete</a>                                    
                                </td>
                            </tr>
                        </table>
                    </td>
                    </tr>
                    <tr>
                    <td colspan="2" align="center">
                        <asp:Button ID="btnAddRule" runat="server" Text="Add" OnClientClick="Javascript:return false;" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="divDescription" style="display:inline-block;min-width: 100%; background-color: #d3d3d3;">

                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="left" colspan="2">
                        <textarea id="expression" name="expression" rows="2" cols="50" readonly="readonly"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="height: 10px;">&nbsp;</td>
                </tr>
                <tr>
                    <td align="left" colspan="2">
                         Emails List: (Use ';' to separate multiple email address)
                    </td>
                </tr>
                <tr>                    
                    <td colspan="2" align="left">
                        <asp:TextBox ID="txtEmailsList" name="txtEmailsList" runat="server" Width="350"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="left" width="420">
                        <fieldset>
                            <legend>Email Level Options</legend>
                            Vehicle:<input type="checkbox" value="Vehicle;" id="VehicleLevelEmail" name="VehicleLevelEmail" />
                            Landmark:<input type="checkbox" value="Landmark;" id="LandmarkLevelEmail" name="LandmarkLevelEmail" />                            
                            Fleet Critical:<input type="checkbox" value="FleetCritical;" id="FleetCriticalEmail" name="FleetCriticalEmail" />
                            Fleet Warning:<input type="checkbox" value="FleetWarning;" id="FleetWarningEmail" name="FleetWarningEmail" /><br />
                            Fleet Notify:<input type="checkbox" value="FleetNotify;" id="FleetNotifyEmail" name="FleetNotifyEmail" />
                            Fleet All:<input type="checkbox" value="FleetAll;" id="FleetAllEmail" name="FleetAllEmail" />
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="height: 10px;">&nbsp;</td>
                </tr>
                <tr>
                    <td align="left" colspan="2">
                        Subject:
                        <div align="right">Subject placeholder:
                            <select id="sltSubjectPlaceholder">
                                <option value="">Select subject placeholder</option>
                                <option value="[test test]">test name</option>
                                                            </select>
                        </div>
                    </td>
                </tr>                
                <tr>                    
                    <td colspan="2" align="left">
                        <asp:TextBox ID="txtSubject" name="txtSubject" runat="server" Width="350"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="height: 10px;">&nbsp;</td>
                </tr>
                <tr>
                    <td align="left" colspan="2">
                         Message Body:
                        <div align="right">Message placeholder:
                            <select id="sltInsertPlaceholder">
                                <option value="">Select message placeholder</option>
                                <option value="[test test]">testname</option>
                                                           </select>
                        </div>
                    </td>
                </tr>
                <tr>                   
                    <td colspan="2" align="left">
                        <textarea id="txtMessageBody" name="txtMessageBody" rows="3" cols="55"></textarea>
                    </td>
                </tr>
            </table>
    </div>

The script to trigger the dialog is here

// initialize the ckeditor
CKEDITOR.replace('txtMessageBody', {
        htmlEncodeOutput: true
    });
ckMessageBody = CKEDITOR.instances['txtMessageBody'];

//open from jquery-ui dialog
 g("#dialog-modal").dialog('option', 'buttons', myButtons).dialog("open");  


//when the select dropdown box changed, we shall insert the changed text into the ckeditor textarea
 g('#sltInsertPlaceholder').change(function () {
        if (g('#sltInsertPlaceholder').val() == "" || g('#sltInsertPlaceholder').val() == null) {
            return;
        }
        var insertVal = g('#sltInsertPlaceholder').val();        
        ckMessageBody.insertText(insertVal);
    });

I am hoping I provide all information you need. it is the only issue for Chrome right noe. Thank you

[Jonathan]

We have a Chrome user that is seeing this problem pretty consistently. He is running the latest version of Chrome. As mentioned above, sometimes it pastes in 2 times but sometimes 4 or 8 as well.

[Jakub Ś]

We have a Chrome user that is seeing this problem pretty consistently.

@jbalinski - this is all fine but we need some sample and working HTML file which will show this issue.

I have tried reproducing this issue based on above example but couldn't. What makes more sense to me is that "change" listener is assigned more than once or that insertVal has doubled text thus the result.

Below example inserts code more than once. Is it possible that in your application some listener is assigned to element more than once?

<select id="operator_0" name="operator_0">
	<option value=""></option>
	<option value="&gt;">&gt;</option>
	<option value="&gt;=">&gt;=</option>
	<option value="&lt;">&lt;</option>
	<option value="&lt;=">&lt;=</option>
	<option value="=">=</option>
</select>

for( var i=0; i<2; i++ ) {
	$('#operator_0').change(function () {
		if ($('#operator_0').val() == "" || $('#operator_0').val() == null) {
			return;
		}
		var insertVal = $('#operator_0').val();        
		editor.insertText(insertVal);
	});
}

NOTE: I know that @intersteller has written that he sees multiple listeners for insertText but if you check the events of the editor object, you will see that insertText has two listeners assigned no matter whether you use the above code or not. These two listeners don't insert text multiple times. I only have got doubled result when using above example.
Do you know any other way to multiply these listeners?

[Jonathan]

And the user that was seeing this is no longer seeing it.

Our code does not listen to the insertText event and there isn't a code path where any other listener could be added more than once. I have some debug code in place in case our user sees the problem again.