Hi,
We are using the Editor with some tools including insert ordered list.
When we use ordered list, we get something like:
1.line1
2.line2
Then we manually create an space between line1 and line2 and it becomes something like:
1.line1
2.line2
When I read the data from editor after submitting the from. I get the details without space. Next time when I add space, editor passes space as well.
Is this a bug or known behavior by default?
6 Answers, 1 is accepted
On pressing Shift + Enter the Editor creates a new line by inserting a "<br/>" tag. I checked how the Editor's value is sent when the form is submitted and as you can see in this screencast the br tag is sent along with the rest of the Html, which is the expected behavior:
"<ol><li>adasdasd<br /></li><li>sdfgdfgdfgdfg</li></ol>"
Here's the example I tested:
<
form
method
=
"POST"
action
=
"@Url.Action("
Submit", "Home")">
<
textarea
id
=
"editor"
></
textarea
>
<
button
type
=
"submit"
>Submit</
button
>
</
form
>
<
script
>
var editor = $("#editor");
editor.kendoEditor({ encoded: true });
$("form").on("submit", function () {
var form = $(this);
form.find("[data-role=editor]").each(function () {
var editor = $(this).data("kendoEditor");
console.log(editor.value());
$("<
input
type
=
'hidden'
/>")
.attr("name", editor.element.attr("id"))
.val(editor.value())
.appendTo(form);
});
});
</
script
>
Let me know in case I am missing something with regard to reproducing the issue.
Regards,
Ivan Danchev
Progress Telerik
Thank you Ivan,
After some investigations, I noticed that the issue is coming from HTML Agility pack which removes break tag close.
I thought this could be useful to share if anybody else experiences the same:
https://html-agility-pack.net/knowledge-base/5556089/html-agility-pack-removes-break-tag-close
solution:
var doc = new HtmlDocument();
HtmlNode.ElementsFlags["br"] = HtmlElementFlag.Empty;
doc.OptionWriteEmptyNodes = true;
Cheers,
Just adding to my previous post, yes I can see editor will send something like:
<ol>
<li>test1<br></li>
<li>test2</li>
</ol>
However, this doesn't work inside "li". It requires something like " " or another </br>.
If I look at the elements of editor when adding a new line, before submitting the form, I can see telerik creates a html elements something like
<ol>
<li>test1<br><br class="k-br"></li>
<li>test2</li>
</ol>
However, when the form submits, telerik sends only one br, and that's why the new line is not working.
I attached an image using your website editor demo. As you can see there are 2 br tags, that's why you see a new line, however when you load the editor with existing data including one br, the new line doesn't work. Not sure why the second br is missed when telerik sends the data to controller.
This is a specific of the contenteditable element, if you enter a new line in an ordered list it will add two br tags. You can test this with a standard content editable div element:
<
div
contenteditable
=
"true"
style
=
"height: 500px; width: 400px; border: 1px solid black;"
> </
div
>
Regards,
Ivan Danchev
Progress Telerik
Thanks Ivan,
But as you said, we receive one br on the sever and if we use @html.raw to render this on the page, there is no newline. How can I address this issue? At the moment we need to create 2 new lines in the editor in order to render the content with only one new line.
Since this is how contenteditable elements work by default, i.e. it is not something that you can configure on/off in the Editor, you could consider modifying the value string on the server. You can check for br tags within li tags and modify the string by adding a second br tag where needed.
Regards,
Ivan Danchev
Progress Telerik