Change font of everything in editor programatically

[IU 17]

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.

[Dimo]

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

 

 

[IU 17]

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.

[Dimo]

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

 

 

[IU 17]

This worked perfectly. Thank you!