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

4 posts, 0 answers
  1. Darren
    Darren avatar
    6 posts
    Member since:
    Apr 2008

    Posted 14 Apr 2011 Link to this post

    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
        {
        }
        </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>

  2. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 18 Apr 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Darren
    Darren avatar
    6 posts
    Member since:
    Apr 2008

    Posted 19 Apr 2011 Link to this post

    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
  4. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 22 Apr 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top