Choosing a font other than inherited before inserting text

[Don]

I want to be able to chose a font from the dropdown then start typing in the editor and have it honor this selection.  Currently I have to type the text first, then highlight it and then change it to the font I want.

Is there a way to set the font to a font type other than inherited before I type the text?

If so I would also like to be able to set this in Javascript.

[Alex Gyoshev]

Hello Don,

There is a misleading UI bug that leaves the impression that nothing happens. In fact, after you change the font through the UI, your selection is persisted, and typing in the editing area will honor it (see this video). The bug is that the UI doesn't show your selection, and I am happy to inform you that it has been fixed and will be available in the next internal build, as well as in the next service pack.

Regards,
Alex Gyoshev
the Telerik team

[Don]

Thanks!  That helps.  Is there a way to set this with javascript, or even set a default font?  The issue I am trying to solve is we want the font to honor a default font depending on a users settings.  At the time the control is created, as soon as the user begins to type the font is using whatever font we have decided to be the default.  The font chosen is not guaranteedto be the same font as used through the site, so doing it with css is not an option, as two users may have different chosen fonts and/or font sizes.

[Alex Gyoshev]

Hello Don,

I am not sure whether I'm understanding the scenario correctly; if each user has a default font (that is used simply for her convenience), you can load a per-user stylesheet within the editor that styles the content according to that font (body { font-face: {{user-font}}; }).

Otherwise, you can use the fontName command to change the font programatically, like this:

var editor = $("#editor").data("kendoEditor");
var range = editor.getRange();
// select all content
range.setStart(editor.body, 0);
range.setEnd(editor.body, editor.body.childNodes.length);
editor.selectRange(range);
// change font
editor.exec("fontName", { value: "Impact" });
// set caret position to beginning of content
range.collapse(true);
editor.selectRange(range);

Kind regards,
Alex Gyoshev
the Telerik team

[Don]

Thank you for the reply.
This helped me find the solution I needed.  The problem was when the editor was empty this code did not work.  It would still default to the inherited text once I started to type.

So I added the font change to the keydown event, checking if I am at the start of the editor. If so I execute the font change.

Thanks again for the quick response and providing a solution.

keydown: function () {
                                if ( this.getRange().startOffset == 0 && this.getRange().endOffset == 0 ) {
                                    this.exec( "fontName", { value: "Impact" } );
                                }