Editor Font Help

6 posts, 0 answers
  1. Andrew
    Andrew avatar
    125 posts
    Member since:
    Sep 2008

    Posted 11 Nov 2016 Link to this post

    I am using  kendo editor as so:

    @(Html.Kendo().EditorFor(m => m.Interests)
            .Name("txtInterests")
            .Tag("div") -- inline mode I have also tried as an iframe
            .Tools(t => t.Clear())
            .HtmlAttributes(new { style = "width:100%; height: 400px" })
            )

    i want to either set the font that is used in the editor or have it use the font from the page. The use will not be able to change it.

    I tried inline mode and that did pick up the page font, but every time i click into the editable area a tool bar pops up and i do not want to see the toolbar.

    I don't really care if i use inline or iframe i just want to be able to control the font-family and font-size of the editor but inheriting the page or setting them in code

    any help would be great.

    Thanks,

     

     

     

     

     

     

     

  2. Rumen
    Admin
    Rumen avatar
    12949 posts

    Posted 15 Nov 2016 Link to this post

    Hello,

    You can permanently hide the inline editor toolbar using the following CSS class:

    .k-widget.k-window.k-window-titleless.k-editor-widget
    {
                    display: none !important;
    }

    Here is a sample Dojo project: http://dojo.telerik.com/@RumenJ/oYoto


    Best regards,
    Rumen
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. John
    John avatar
    2 posts
    Member since:
    Aug 2011

    Posted 13 Dec 2016 in reply to Rumen Link to this post

    I don't see the inline editor toolbar using k-editor-widget. When I remove that from the class hierarchy above, then the toolbar disappears.
  4. Rumen
    Admin
    Rumen avatar
    12949 posts

    Posted 13 Dec 2016 Link to this post

    Hello John,

    I'm not sure that I understand the problem. Can you please explain it in more detail? Are you able to reproduce it in the live demos? Can you record a video or provide screenshots demonstrating the current and the desired behavior?

    Thank you!

    Regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. John
    John avatar
    2 posts
    Member since:
    Aug 2011

    Posted 13 Dec 2016 in reply to Rumen Link to this post

    What I mean is that you said this CSS should make the toolbar disappear.

    .k-widget.k-window.k-window-titleless.k-editor-widget
    {
                    display: none !important;
    }

    That didn't work for me. However, when I examined the CSS classes on the toolbar (using F12 in IE11), I do not see k-editor-widget but I do see the other classes. So, I tried this CSS and the toolbar disappears.

    .k-widget.k-window.k-window-titleless

    {
                    display: none !important;
    }

     

  6. Rumen
    Admin
    Rumen avatar
    12949 posts

    Posted 13 Dec 2016 Link to this post

    Thank you for the clarification.

    I assume that everything is fine now and your request is satisfied.

     

    Best regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top