This is a migrated thread and some comments may be shown as answers.

Choosing a font other than inherited before inserting text

4 Answers 150 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Don
Top achievements
Rank 1
Don asked on 21 Dec 2012, 01:37 AM
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.

4 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 24 Dec 2012, 01:47 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Don
Top achievements
Rank 1
answered on 11 Feb 2013, 06:59 PM
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.
0
Accepted
Alex Gyoshev
Telerik team
answered on 12 Feb 2013, 08:26 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Don
Top achievements
Rank 1
answered on 12 Feb 2013, 07:10 PM
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" } );
                                }
Tags
Editor
Asked by
Don
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Don
Top achievements
Rank 1
Share this question
or