Programatically remove HTML element within Editor

5 posts, 1 answers
  1. Tyler
    Tyler avatar
    49 posts
    Member since:
    Nov 2013

    Posted 05 Oct 2016 Link to this post

    I use the Kendo UI Editor using the MVC like this:

    @(Html.Kendo().EditorFor(m => m.Content)
    .Name("Content")
    .Encode(false)
    .Immutables(true)
    .StyleSheets(css => css
      .Add(Url.Content("~/Content/dfw/dfTemplateEditor.css"))
    )
    .HtmlAttributes(new { style = "width:100%;height:100%;min-height:100%" })
    .Events(events => events
      .Select("templateEditor_onSelect")
    )
    .Resizable(resizable => resizable.Content(true).Toolbar(true))

     

    I have html in the editor like this:

    <h1 style="text-align:left;"><strong>Title</strong></h1>
    <div id="xxx">HELP ME I WANT REMOVED!</div><p> </p>
    <h1 style="text-align:left;"><strong>Another Title</strong></h1>

     

    I want to programatically remove the div where id="xxx" but cant get it to work.

    I've tried the following all didn't work:

    var editor = $("#Content").data("kendoEditor");
     
    //NOTE event looking for the named element fails
     if ($('#xxx').length > 0) {
        //never gets here..
        alert('I EXIST!');
     }
     
    //Failed Attempt 1
    $('#xxx').remove();
    editor.update();
     
    //Failed Attempt 2
    editor.body.remove($('#xxx'));
    editor.update();

     

     

     

  2. Answer
    Rumen
    Admin
    Rumen avatar
    13009 posts

    Posted 05 Oct 2016 Link to this post

    Hello,

    Here is how to obtain reference to the Editor body, find the element and delete it:

    var editorBody = $("#editor").data("kendoEditor").body;
    $(editorBody).find("#xxx").remove();


    Best regards,
    Rumen
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Tyler
    Tyler avatar
    49 posts
    Member since:
    Nov 2013

    Posted 05 Oct 2016 in reply to Rumen Link to this post

    Thats what I was looking. Thanks!
  4. sudhanshu
    sudhanshu avatar
    2 posts
    Member since:
    Jan 2017

    Posted 13 Jan in reply to Tyler Link to this post

    Hello Sir,

    Can you reply(sudhanshu_sharma04@infosys.com) on this issue which I am facing-

    aspx page-Kendo UI scipt:

            $(document).ready(function () {

                $("textarea[id$='txt_EmailBody']").kendoEditor({
                    tools: [
                      "dialogInsert", "bold", "italic", "underline", "fontName", "style", "fontSize", "justifyLeft", "justifyCenter", "justifyRight", "insertUnorderedList", "insertOrderedList", "foreColor", "backColor", "indent", "outdent", "createLink", "unlink", "insertImage", "createTable", "viewHtml"
                    ],
                    change: Clearbuttonvisible,
                    encoded: false,              
                    value: '',
                    messages: {
                        fontNameInherit: "Select font",
                        fontSizeInherit: "Select font size"
                    },

                    immutables: true,

                    stylesheets: [
                        "../kendo/kendo.css",
                        "../Styles/corev15.css"
                    ]

                });
                //alert("txt_EmailBody" + txt_EmailBody);
            });

    on save button I save the email body in DB:

    While saving the below body text my data is losing. I am trying to save below text and its html I am sharing -

    <SPAN style="LINE-HEIGHT: 115%"><FONT size=3>&nbsp;
    <P class=MsoNormal style="MARGIN: 0in 0in 12pt; LINE-HEIGHT: normal"><FONT size=7 face=Georgia><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><EM><STRONG>Independence Checkpoint</STRONG></EM></SPAN></FONT></P>
    <P class=MsoNormal style="MARGIN: 0in 0in 12pt; LINE-HEIGHT: normal"><FONT size=5 face=Georgia><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><EM><STRONG>Global Independence</STRONG></EM></SPAN></FONT></P>
    <P class=MsoNormal style="MARGIN: 0in 0in 12pt; LINE-HEIGHT: normal"><FONT size=3 face=Georgia><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"></SPAN></FONT>&nbsp;</P>
    <P class=MsoNormal style="MARGIN: 0in 0in 12pt; LINE-HEIGHT: normal"><FONT color=#800000 size=5><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><FONT color=#800000 face=Georgia><STRONG>Description:</STRONG></FONT></SPAN></FONT></P>
    <P class=MsoNormal style="MARGIN: 0in 0in 12pt; LINE-HEIGHT: normal"><FONT size=3><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><SPAN style="FONT-SIZE: 12pt; LINE-HEIGHT: 115%"><FONT face=Georgia>The dispensation you requested for the relationship below in Independence Checkpoint has been reviewed and responded to by your territory Partner Responsible for Independence (PRI). </FONT></SPAN></SPAN></FONT></P>
    <BLOCKQUOTE style="MARGIN-RIGHT: 0px" dir=ltr>
    <P class=MsoNormal style="MARGIN: 0in 0in 12pt; LINE-HEIGHT: normal"><FONT size=3><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><SPAN style="FONT-SIZE: 12pt; LINE-HEIGHT: 115%">
    <TABLE class=MsoNormalTable style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-COLLAPSE: collapse; BORDER-BOTTOM: medium none; MARGIN: auto auto auto -18.25pt; BORDER-LEFT: medium none; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 1184; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-table-layout-alt: fixed" cellSpacing=0 cellPadding=0 width=786 border=1>
    <TBODY>
    <TR style="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
    <TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 166.25pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt" vAlign=top width=222>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal" dir=ltr><B style="mso-bidi-font-weight: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>Issuer/Instrument Name<?xml:namespace prefix = "o" ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></SPAN></B></P></TD>
    <TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 64.15pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=86>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><B style="mso-bidi-font-weight: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>Entity</SPAN></B><B style="mso-bidi-font-weight: normal"><SPAN style='FONT-SIZE: 12pt; COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'><o:p></o:p></SPAN></B></P></TD>
    <TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 124.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=166>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><B style="mso-bidi-font-weight: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>Relationship Type</SPAN></B><B style="mso-bidi-font-weight: normal"><SPAN style='FONT-SIZE: 12pt; COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'><o:p></o:p></SPAN></B></P></TD>
    <TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 160.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=214>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><B style="mso-bidi-font-weight: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>Owner/Ownership Type<o:p></o:p></SPAN></B></P></TD>
    <TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 73.4pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=98>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><B style="mso-bidi-font-weight: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>Folder<o:p></o:p></SPAN></B></P></TD></TR>
    <TR style="mso-yfti-irow: 1; mso-yfti-lastrow: yes">
    <TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 166.25pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=222>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>#Issuer/Security Name#<o:p></o:p></SPAN></P></TD>
    <TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 64.15pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=86>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>#Entity#<o:p></o:p></SPAN></P></TD>
    <TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 124.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=166>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>#Relationship Type#<o:p></o:p></SPAN></P></TD>
    <TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 160.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=214>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>#Owner/Ownership Type#<o:p></o:p></SPAN></P></TD>
    <TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 73.4pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=98>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style='FONT-SIZE: 12pt; FONT-FAMILY: "Georgia",serif; COLOR: black; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'>#Folder#<o:p></o:p></SPAN></P></TD></TR></TBODY></TABLE></SPAN></P></BLOCKQUOTE></SPAN></FONT>
    <P><FONT size=5><FONT color=#800000><STRONG><FONT face=Georgia>Action Required:</FONT></P></STRONG></FONT></FONT>
    <P><FONT size=3><SPAN style="FONT-SIZE: 12pt; COLOR: black; LINE-HEIGHT: 107%; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'"><FONT face=Georgia>This is only a notification and no action is required. <SPAN style="mso-spacerun: yes">&nbsp;</SPAN><SPAN style="mso-spacerun: yes">&nbsp;</SPAN>Follow the link to your Independence Checkpoint portfolio and view the “Queue Details” section with the dispensation status.<o:p></o:p></FONT></SPAN></P>
    <P><FONT face=Georgia>&nbsp;</FONT></FONT><SPAN style="COLOR: #0070c0; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><o:p><FONT size=3 face=Georgia><SPAN style="COLOR: black; mso-fareast-font-family: 'Times New Roman'; mso-themecolor: text1">#Link to Checkpoint#</SPAN></FONT></o:p></SPAN></P>
    <P><SPAN style="COLOR: #0070c0; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><o:p><FONT size=3 face=Georgia><SPAN style="COLOR: black; mso-fareast-font-family: 'Times New Roman'; mso-themecolor: text1"></SPAN></FONT></o:p></SPAN>&nbsp;</P>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style="COLOR: #0070c0; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><o:p><FONT size=3 face=Georgia><SPAN style="COLOR: black; mso-fareast-font-family: 'Times New Roman'; mso-themecolor: text1"></SPAN></FONT></o:p></SPAN></P>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style="COLOR: #0070c0; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><o:p><FONT size=3><FONT face=Georgia><SPAN style="COLOR: black; mso-fareast-font-family: 'Times New Roman'; mso-themecolor: text1"><SPAN style="mso-spacerun: yes"></SPAN></SPAN><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><o:p></o:p></SPAN></FONT></FONT></o:p></SPAN></P>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><SPAN style="COLOR: #0070c0; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><o:p><FONT color=#800000 size=5><SPAN style="COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: 'Times New Roman'; mso-hansi-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'"><o:p><FONT color=#800000 face=Georgia><STRONG>Questions:</STRONG></FONT></o:p></SPAN></FONT></o:p></SPAN></P>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><FONT face=Georgia></FONT>&nbsp;</P>
    <P class=MsoNormal style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><FONT face=Georgia>- Please do not reply to this automated notification<BR>- Contact your Partner Responsible for Independence (PRI) or a PRI team member within your local Independence Office. A Listing of territory PRI's is available in the "Independence Organisation &amp; Key Contacts" section of the Global Independence Portal.</FONT></P></FONT></SPAN>
    <P>&nbsp;</P>

     

     

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3763 posts

    Posted 16 Jan Link to this post

    Hi Tyler,

    I suggest we keep further communication about this question in the thread that Sudhanshu opened: http://www.telerik.com/forums/content-is-not-getting-saved-in-kendo-editor.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top