hide toolbar dynamically

[Doug]

Is there a way to turn off the tools menu in the editor through javascript.  I want to remove the tools when the control is disabled and then make them show when it's enabled.

 

[Neli]

Hello Doug,

You can hide the toolbar container in editor by using the 'k-editor-toolbar' class.

$('.k-editor-toolbar').hide();

In the linked Dojo example the toolbar is hidden if the Editor is disabled. the toolbar is again visible if the Editor is enabled. 

Regards,
Neli
Progress Telerik

[Dan]

unfortunately I can't seem to access the dojo example - I have a kendo editor in a ListView template.  Depending upon the user the ListView will be editable or read-only.  When read-only I would like to hide the tool-bar for the associated editor.  will your dojo example be useful for this purpose?  if so can you send me the code? thanks

[Petar]

Hello Dan,

Here is the Dojo code which demonstrates how to hide/show an Editor toolbar. 

<input type="button" class="k-button" value="Disable" onclick="setzIndex(2)">
    <input type="button" class="k-button" value="Enable" onclick="setzIndex(0)">

    <div id="content">
      <textarea id="editor" rows="10" cols="30" style="width:740px;height:440px"></textarea>
    </div>
    <script>
      function setzIndex(index){
        if(index == 2){
                $('.k-editor-toolbar').hide();
        }else{
                $('.k-editor-toolbar').show();
        }
      }
      $(document).ready(function() {
        // create Editor from textarea HTML element with default set of tools
        $("#editor").kendoEditor();
      });
    </script>

Please, try the above approach and let me know if it resolves the issue. If not, please provide more details about it. If you can't access dojo.telerik.com, you could send us a runnable project demonstrating the application's scenario.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

[Saby]

hi, please, show me how to disable a toolbar icon, don't hide it, just disable it

[Neli]

Hi Saby,

If you need to disable the Editor tools, you could for example add the "disabled" attribute for all the buttons, using the $(".k-button.k-tool'') selector. For the dropdowns, you could set the 'pointer-events" to 'none'. Below is an example:

    <div id="content">
      <textarea id="editor" rows="10" cols="30" style="width:740px;height:440px"></textarea>
    </div>
    <script>  
      $(document).ready(function() {
        $("#editor").kendoEditor();
        $(".k-button.k-tool").attr("disabled", "disabled")
        $("span.k-editor-dropdown").css("pointer-events", "none");
      });
    </script>

And a Dojo example with a code above is linked here. 

I hope the above will help you to resolve the issue. 

 

Regards,
Neli
Progress Telerik

[Saby]

Hello Neli, thank you for your answer.

Please tell me if I can force the textarea with kendo so that what is copied and pasted displays with the 'Roboto' font family. 

Thanks

[Neli]

Hello Saby,

You could customize the font in the Editor editable area by using the stylesheet option and set the needed font to the body element.

You could take a look at the Editor Styles Demo linked below:

- https://demos.telerik.com/kendo-ui/editor/styles

I hope this helps.

Regards,
Neli
Progress Telerik

[Saby]

Thank you for your answer, Neli.

Please help me with this:
the table wizard lightbox comes out with an error in the dimensions. I have tried with the new versions (2020.3.1118) and the error persists. There is inconsistency with the kendo.common.min.css file. If I put that, the tool icons disappear. Thanks for your help

[Saby]

Can you make a version by adding the familiar Roboto font to your font drop-down menu?. This is necessary, please. Thank you

[Neli]

Hi Saby,

I have tested the appearance of the Table Wizard of the Editor in our Demos. On the screencast linked here, you could see the appearance on my end. Could you please double-check if there are some custom styles in your project that are overwriting the default styles and that might lead to an unexpected appearance? If the issue is not caused by custom style could you please provide more details - does the issue occurs in all browsers? Could you please let me know if the Table Wizard is rendered as expected when you open our Demos? 

Regarding adding Roboto font to the fonts DropDownList, we have such a How-To article that describes how the Google WebFonts could be added to the Kendo Editor fonts dropdown. You could use the same approach with the 'Roboto'.

- https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/appearance/add-google-web-fonts-to-editor

I hope the provided article will be helpful.

Regards,
Neli
Progress Telerik