Change font of everything in editor programatically

5 posts, 1 answers
  1. IU 17
    IU 17 avatar
    3 posts
    Member since:
    Dec 2013

    Posted 17 Nov 2014 Link to this post

    Hello,

    I am trying to implement a custom feature into the editor that reverts all of the text that has been inputted by the user to a default font and size. I have tried implementing code from this post:

    http://www.telerik.com/forums/choosing-a-font-other-than-inherited-before-inserting-text#AOlsW9Z310Kn8ZkDoJoFWQ

    But it does not work. It will change the name of the font, but does not actually change the appearance of the markup.

    Thanks in advance.
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 19 Nov 2014 Link to this post

    Hello,

    If you are setting some styles on the top-level DOM element(s) inside the Editor, they will naturally be overridden by styles, which are set to inner elements. This is how CSS works.

    You can try using the cleanFormatting command, but it may remove more styles than you want:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#methods-selectRange

    http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#methods-exec

    var editor = $("#editor").data("kendoEditor");
    var range = editor.createRange();
    range.selectNodeContents(editor.body);
    editor.selectRange(range);
    $("#editor").data("kendoEditor").exec("cleanFormatting");


    Depending on what exactly you are trying to do, you may also need to use DOM manipulation techniques. For example, replace the heading tags with paragraphs via jQuery.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#fields-body

    http://api.jquery.com/category/manipulation/dom-replacement/

    Regards,
    Dimo
    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. IU 17
    IU 17 avatar
    3 posts
    Member since:
    Dec 2013

    Posted 19 Nov 2014 in reply to Dimo Link to this post

    Hi Dimo,

    Here is a very brief, concise description of what I'm trying to do: the equivalent of ctrl + a followed by a change in font selection. The editor clearly already has the ability to parse through any manner of garbage that is pasted into it and modify it accordingly to change the font; I am simply looking to take advantage of that through a custom button and avoid re-inventing a terrible, terrible wheel.

    If you can help me with this, please advise, and if not, I appreciate your time.

    Thank you.

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 Nov 2014 Link to this post

    Hello,

    The equivalent of "Ctrl + A" is shown in my previous reply - select a range based on the Editor body. Then you can call .exec() with the fontName and fontSize command names and empty value arguments to remove all custom font styles.

    var editor = $("#editor").data("kendoEditor");
    var range = editor.createRange();
    range.selectNodeContents(editor.body);
    editor.selectRange(range);
    editor.exec("fontSize", {value: ""});
    editor.exec("fontName", {value: ""});


    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. IU 17
    IU 17 avatar
    3 posts
    Member since:
    Dec 2013

    Posted 21 Nov 2014 in reply to Dimo Link to this post

    This worked perfectly. Thank you!
Back to Top
Kendo UI is VS 2017 Ready