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

when insert ordered list and then use shift + enter to create new line, editor sends the data with no space

6 Answers 392 Views
Editor
This is a migrated thread and some comments may be shown as answers.
John A
Top achievements
Rank 1
John A asked on 18 Mar 2019, 11:52 PM

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

Sort by
0
Ivan Danchev
Telerik team
answered on 20 Mar 2019, 02:16 PM
Hi,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John A
Top achievements
Rank 1
answered on 24 Mar 2019, 07:14 PM

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,

0
John A
Top achievements
Rank 1
answered on 24 Mar 2019, 08:00 PM

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 "&nbsp;" 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.

 

0
Ivan Danchev
Telerik team
answered on 26 Mar 2019, 03:49 PM
Hi,

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>
The second one is removed on sending the value on the server because it is required only for the visual representation of a new line, i.e. there must be 2 br tags for a new line to be visible in the list, but the second one is not needed in the value.

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John A
Top achievements
Rank 1
answered on 26 Mar 2019, 07:19 PM

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.

0
Ivan Danchev
Telerik team
answered on 28 Mar 2019, 03:15 PM
Hi,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
John A
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
John A
Top achievements
Rank 1
Share this question
or