Need Enter key to insert br instead of p tag

10 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 18 Feb 2014 Link to this post

    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 )
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 24 Feb 2014 in reply to Alex Gyoshev Link to this post

    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?
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 14 Jul 2014 in reply to Alex Gyoshev Link to this post

    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. "
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Andrew
    Andrew avatar
    1 posts
    Member since:
    Oct 2014

    Posted 20 Feb 2015 in reply to Alex Gyoshev Link to this post

    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
  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 24 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Dion
    Dion avatar
    1 posts
    Member since:
    Mar 2011

    Posted 17 Mar in reply to Alex Gyoshev Link to this post

    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

  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 18 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready