pasteHtml modifies html

5 posts, 0 answers
  1. Oscar
    Oscar avatar
    3 posts
    Member since:
    Jul 2018

    Posted 18 Jul 2018 Link to this post

    Hi I'm using pasteHTML event on radeditor to paste new content on cursor position, if the editor box is empty it works just great, but if there something else and I hit enter it will modify my html making it useless

     

    Here is my script:

    function Add_Accordion() {
                var Edtr = $find("<%=ContentEditor.ClientID%>");
                Edtr.pasteHtml("<div id=\"accordion\"><h2>Section 1 title</h2><div><p>Text 1</p></div><h2>Section 2 title</h2><div><p>Text 2</p></div></div>");

    }

    So.. if I add Hello world! on the first line of editor, hit enter and then click the button to add the script above, this is the resulting html...it add tags and duplicates the ids

    <div id="accordion">
    </div>
    <p>Hello world</p>
    <div id="accordion">
    <h2>Section 1 title</h2>
    <div>&nbsp;</div>
    </div>
    <p>Text 1</p>
    <div id="accordion">
    <div>&nbsp;</div>
    <h2>Section 2 title</h2>
    <div>&nbsp;</div>
    </div>
    <p>Text 2</p>

     

    Thanks for your help!

  2. Rumen
    Admin
    Rumen avatar
    14107 posts

    Posted 19 Jul 2018 Link to this post

    Hello Oscar,

    Can you please test by changing the NewLineMode to Br or Div:

    <script type="text/javascript">
        function Add_Accordion() {
            var Edtr = $find("<%=ContentEditor.ClientID%>");
            Edtr.pasteHtml("<div id=\"accordion\"><h2>Section 1 title</h2><div><p>Text 1</p></div><h2>Section 2 title</h2><div><p>Text 2</p></div></div>");
        }
    </script>
    <telerik:RadEditor NewLineMode="br" RenderMode="Lightweight" runat="server" ID="ContentEditor">
        <Content>
        </Content>
    </telerik:RadEditor>

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Oscar
    Oscar avatar
    3 posts
    Member since:
    Jul 2018

    Posted 19 Jul 2018 in reply to Rumen Link to this post

    Hi Rumen, thanks, that worked a bit better but there are still issues. I tried both but Br seems to work better. If for example I intentionally paste an html script without a final closing div that i'd like to close later after adding more sections, the pastehtml event will close it for me.

    e.g.running this
    Edtr.pasteHtml("<div id=\"accordion\"><h2>Add section title here</h2><div><p>Add section text here</p></div>");

    will result on this
    <div id="accordion"><h2>Add section title here</h2><div><p>Add section text here</p></div></div>

    Regards

  4. Rumen
    Admin
    Rumen avatar
    14107 posts

    Posted 20 Jul 2018 Link to this post

    Hello Oscar,

    The reported behavior is a browser one.

    Each tag is actually a node in the DOM node and if the browser finds a non closed tag, it automatically corrects and closes it. This cannot be prevented since it is not possible to turn off this underlying validation mechanism of the browser.

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Oscar
    Oscar avatar
    3 posts
    Member since:
    Jul 2018

    Posted 20 Jul 2018 in reply to Rumen Link to this post

    Ah! Understood. Thanks a lot for the support!
Back to Top