Custom dialogue issue with pasting into selected are when contenteditable=false

[Darren]

HI there,

I am experiencing some strange behaviour when using a custom dialogue to paste an html fragement, which is a "locked" area within the editor (ie, contenteditable=false). 

The paste works the first time around, with the expected html being injected into the editor, but when i revisit the locked area, and edit editing it via the custom dialogue, on re-pasting, I get extra attributes within the pasted fragment. 

Eg, first paste looks like:
<span class="Hotword" id="1" contenteditable="false" xml="Hotword">test</span>

Second paste (from same dialogue, with same javascript etc...) looks like:
<span class="Hotword" id="1" title="test" contenteditable="false" cssclass="Hotword" xml="Hotword" doPaste="true">test </span>


To recreate, I have 2 pages (pasted below).  On the page containing the editor, create a simple 1 word piece of text, highlight, and clikc the "hotword" button, bringing up the dialogue.  Enter some values and click OK.  All is fine at this point (ie, expected markup from 1st fragment above).  Then, select the locked area again, and right click, go to "custom properties", which re-opens the dialogue,  On clicking OK again, I end up with the 2nd fragment above being pasted. 

Im really stuck with this one, so if anyone can offer any help, that would be great!


My editor page markup looks like this:

 

 

 

<style type="text/css">
    .reToolbar.Default .InsertHotword
    {
         background-image: url( http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/Custom.gif);
    }
    </style>

     <script type="text/javascript">


        Telerik.Web.UI.Editor.CommandList["CustomProperties"] = function(commandName, editor, args)
        {
        // get the selected Html
          var currentSelectedHtml = editor.getSelectionHtml();

          var elem = editor.getSelectedElement();
          editor.selectElement(elem);
          argument = elem;


          var myCallbackFunction = function(sender, args)
          {
            if(args.doPaste == true)
                editor.pasteHtml(String.format("<span id={0} contenteditable='false' class='{1}' xml='{2}'>{3}</span> ", args.id, args.cssclass, args.xml, args.title))
          }

          editor.showExternalDialog(
               "Hotword.aspx",
               argument,
               450,
               350,
               myCallbackFunction,
               null,
               "Hotword",
               true,
               Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
               false,
               false);
    };


     Telerik.Web.UI.Editor.CommandList["InsertHotword"] = function(commandName, editor, args)
        {
          // get the selected Html
          var currentSelectedHtml = editor.getSelectionHtml();

          var elem = editor.getSelectedElement();

          if(elem.tagName == 'BODY')
          {
             var content = editor.getSelectionHtml();
             var link = editor.get_document().createElement("FONT");
             link.innerHTML = currentSelectedHtml;
             argument = link;
          }

          var myCallbackFunction = function(sender, args)
          {
            if(args.doPaste == true)
                editor.pasteHtml(String.format("<span id={0} contenteditable='false' class='{1}' xml='{2}'>{3}</span> ", args.id, args.cssclass, args.xml, args.title))

          }

          editor.showExternalDialog(
               'Hotword.aspx',
               argument,
               450,
               350,
               myCallbackFunction,
               null,
               'Hotword',
               true,
               Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
               false,
               false);
    };


    </script>


    <asp:ScriptManager id="ScriptManager" runat="server"/>

        <telerik:RadEditor ID="rdedContent" runat="server" Width="340px" Height="450px" SkinID="DefaultSetOfTools" ToolsFile="AuthoringTools.xml">
               <Tools>
                 <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="InsertHotword" Text="Hotword" ShowText="true" ShowIcon="false" />
                 </telerik:EditorToolGroup>
              </Tools>
            <ContextMenus>
               <telerik:EditorContextMenu TagName="A" Enabled="false"></telerik:EditorContextMenu>
                <telerik:EditorContextMenu>
                  <telerik:EditorTool name="Cut"/>
                  <telerik:EditorTool name="Copy"/>
                  <telerik:EditorTool name="Paste"/>
                  <telerik:EditorTool name="CustomProperties"/>
                </telerik:EditorContextMenu>
            </ContextMenus>
        </telerik:RadEditor>

And my custom dialogue markup looks like this:

<asp:ScriptManager id="ScriptManager" runat="server"/>
   <div>
   Hotword Properties:
   <br />
   title: <input type="text" id="hotwordTitle">
   <br /><br />
   Content:
   <telerik:RadEditor ID="rdedContent" runat="server" Width="200px" Height="150px" SkinID="DefaultSetOfTools" ToolsFile="AuthoringTools.xml"></telerik:RadEditor>
<br />
       <input type="button" onclick="javascript:insertContent();" value="OK"/>
   </div>

     <script type="text/javascript">
  if (window.attachEvent)
  {
      window.attachEvent("onload", initDialog);
  }
  else if (window.addEventListener)
  {
      window.addEventListener("load", initDialog, false);
  }
  var hotwordTitle = document.getElementById("hotwordTitle");
  var hotword = null;
  function getRadWindow()
  {
         if (window.radWindow)
      {
          return window.radWindow;
      }
      if (window.frameElement && window.frameElement.radWindow)
      {
          return window.frameElement.radWindow;
      }
      return null;
  }
  function initDialog()
  {
     var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page

     hotwordTitle.value = clientParameters.innerHTML;

     hotword = clientParameters;
  }
  function insertContent()
  {
     //create an object and set some custom properties to it
     hotword.id = '1';
     hotword.cssclass = 'Hotword';
     hotword.xml = 'Hotword';
     hotword.title = hotwordTitle.value;
     hotword.doPaste = true;

     getRadWindow().close(hotword);
  }
  </script>

[Rumen]

Hello Darren,

My recommendation is to not apply contentEditable="false" to the span tag because this attribute clears the selection, which is causing the reported problem. If needed you can go through all span elements with specific ID in the OnClientSubmit event of RadEditor and apply the contentEditable="false" attribute when submitting the content.

Kind regards,
Rumen
the Telerik team

[Darren]

Hi Rumen,

Thanks for the feedback.  Im not too sure what you mean when you say it clears the selection.  I am able to retrieve and parse the selected markup fragment (ie, everything within the contenteditable=false span) client side. 

I think for now, I will parse and strip out any unnecessary attributes when saving the content.  Do you see this as a bug and something that might be addressed in a future update though?

thanks again

Darren

[Rumen]

Hi Darren,

I cannot confirm that this browser behavior is a bug in the RadEditor's code, because it is not expected to edit elements / objects / content which are non editable (contentEditable="false").
I logged the reported browser behavior for investigation and if possible our developers will fix it.
Here you can find the PITS Issue: Public URL.

Best regards,
Rumen
the Telerik team