Need Enter key to insert br instead of p tag

[JohnVS]

I have used a couple other WYSIWYG editors, like CKEditor, and they have a setting to change what the Enter key does. By default, it enters a <p> tag for a new paragraph. But in situations like with HTML emails, you can't use <p> tags, since they don't render consistently in email readers. Instead, you have to use <br /> tags to space things out. At least with CKEditor, there is a setting to change the Enter key's behavior, but I don't see any option for this with Kendo Editor. Is this available, or can it be available? Thanks.

(for reference, here is some explanation of CKEditor's setting: http://stackoverflow.com/questions/3339710/how-to-configure-ckeditor-to-not-wrap-content-in-p-block )

[Alex Gyoshev]

Hello John,

You can use the defaultTools array to setup the editor tools prior to its initialization. This jsBin sample shows how to completely disable the paragraph command.

Regards,
Alex Gyoshev
Telerik

[JohnVS]

We are using the ASP.NET MVC Wrappers. Is there a way to do this with those wrappers? Or a way to do it after the wrapper has setup the Editor?

[Alex Gyoshev]

Hello John,

You need to use the same JavaScript code, just after the Kendo UI script reference. The wrappers themselves do not provide a method for achieving this. 

Regards,
Alex Gyoshev
Telerik

[Bob]

Hi, can you please provide a syntax example for this comment?

"You need to use the same JavaScript code, just after the Kendo UI script reference. The wrappers themselves do not provide a method for achieving this. "

[Alex Gyoshev]

Hello Bob,

1. Include the Kendo UI scripts, via a script tag
        <script src="kendo.all.min.js"></script>
2. Change the default handling of the paragraphs in the editor
         var defaultTools = kendo.ui.Editor.defaultTools;
         defaultTools["insertLineBreak"].options.shift = false;
         delete defaultTools["insertParagraph"].options;
3. Initialize the editor, either with the server-side wrappers or the client-side jQuery plug-in
        @Html.Kendo().Editor() ...

Regards,
Alex Gyoshev
Telerik

 

 

[Andrew]

Hi Alex,

I did what you instructed to do when using the MVC wrappers and it worked, but when I used the unordered list tool after changing the defaults for the enter key the bullet points started at the top of my text instead of where the cursor was. I have attached a screenshot.

Thank you,
Andrew

[Alex Gyoshev]

Hello Andrew,

Indeed, in this scenario list items are broken with Shift-enter, because this is the responsibility for the paragraph command. If the enter key breaks the list items, this would mean that no line breaks can be used in the list items. What are your expectations about this editing mode?

Regards,
Alex Gyoshev
Telerik

 

 

[Dion]

Hi Alex,

We would like the following markup when disabling paragraphs but still use a (un)ordered list.

Is this possible with the latest version of the Editor?

Some generic text Some generic text Some generic text Some generic text
<br />
<br />
generic text above unordered list generic text above unordered list generic text above unordered list
<br />
<br />
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<br />
generic text below unordered listt generic text below unordered list

 

cheers, Dion

[Alex Gyoshev]

Hello Dion,

No, this is a limitation of this approach. Line breaks are to be nested (semantically) in the unordered list. If you don't need to have paragraphs in the editor content, keep the default configuration for line breaks and post-process the paragraphs, converting them to <br> tags.

Regards,
Alex Gyoshev
Telerik

 

 

[Vince]

We implemented this solution, but it take away the ability to justify text. For example, let say I have the words in the editor...

left

right

And I highlight the word left and choose Left Justify and then I highlight the word right and choose Right Justify. Both line get wrapped in a div that is styled to justify right. Is there a way to make the new line char <br /> without taking away the ability to justify each line, because right now it justifies the entire document.

Thanks,

Vince

[Dimitar]

Hello Vince,

The text justifying tools are block commands which apply the format on the entire block and not just the selection (inline format), thus leading to the observed behavior. The same test can be performed in MS Word and you will notice that the behavior is the same as in the Kendo UI Editor.

A suggestion approach to handle this scenario could be to shift the behavior as follows:

<script>
  var defaultTools = kendo.ui.Editor.defaultTools;

  defaultTools["insertLineBreak"].options.shift = false;
  defaultTools["insertParagraph"].options.ctrl = true;

  // Initialize the editor ...
</script>

This way, when enter is pressed a <br> tag will be inserted, but the main difference is that with ctrl + enter, a <p> tag will be inserted which now enables you to insert a block element that allows the current selection to be formatted only and gives the user the ability to decide which approach to use.

Regards,
Dimitar
Progress Telerik