This is a migrated thread and some comments may be shown as answers.

Programatically remove HTML element within Editor

4 Answers 1035 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Ruairi asked on 05 Oct 2016, 02:17 PM

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;">Title</h1>

<div id="xxx">HELP ME I WANT REMOVED!</div> 

<h1 style="text-align:left;">Another Title</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();

4 Answers, 1 is accepted

Accepted

answered on 13 Jan 2017, 06:55 AM

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 -

Independence Checkpoint
Global Independence
 
Description:
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). 
<BLOCKQUOTE style="MARGIN-RIGHT: 0px" dir=ltr>

<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>
Issuer/Instrument Name<?xml:namespace prefix = "o" ns = "urn:schemas-microsoft-com:office:office" /><o:p></o: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>
Entity<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></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>
Relationship Type<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></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>
Owner/Ownership Type<o:p></o: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>
Folder<o:p></o: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>
#Issuer/Security Name#<o:p></o: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>
#Entity#<o:p></o: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>
#Relationship Type#<o:p></o: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>
#Owner/Ownership Type#<o:p></o: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>
#Folder#<o:p></o:p></TD></TR></TBODY></TABLE></BLOCKQUOTE>
Action Required:
This is only a notification and no action is required.   Follow the link to your Independence Checkpoint portfolio and view the “Queue Details” section with the dispensation status.<o:p></o:p>
 <o:p>#Link to Checkpoint#</o:p>
<o:p></o:p> 
<o:p></o:p>
<o:p><o:p></o:p></o:p>
<o:p><o:p>Questions:</o:p></o:p>
 
- Please do not reply to this automated notification - 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 & Key Contacts" section of the Global Independence Portal.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Programatically remove HTML element within Editor

4 Answers, 1 is accepted