0
votes

I applied kendo editor on a div element rather using textarea as it's giving some issues in iPad. Now, I don't want the editor to have toolbar to format text.

I tried applying styles as none & set tools to an empty array but still the toolbar appears with a draggable button in it.

<div id="targetdiv" contenteditable="true" style = "resize: none;width: 
  100% 
!important; height:150px; max-height:150px;max-width: 100% !important;">
</div>

<script>
$("#targetdiv").kendoEditor({
    tools: []});
</script>

The toolbar appears though the editor it initialized with no tools, as in image below.

empty toolbar with draggable icon

Approach 1: (Not working)

<style>
.k-editor-toolbar
{
   display:none;
}
</style>

Approach 2: (Not working)

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

Approach 3: (partially works)

Added a select event but still the toolbar appears for an instant and then disappears.

 $("#targetdiv").kendoEditor({
    tools: [],
    //Fires when the Editor selection has changed.
    select: function (e) {
        let editor = $("#targetdiv").data("kendoEditor");
        editor.toolbar.hide();
    });
2

2 Answers

0
votes

If you don't want to show the toolbar define an empty tools in the KendoUI editor initialization:

$("#editor").kendoEditor({
// Empty tools so do not display toolbar
tools: [ ]
});

If you want to disable the edition, you should use:

$(editor.body).attr('contenteditable',false);

you can try this one as well

.k-editor-toolbar
{display:none !important;}
0
votes

Finally,

I have to subscribe for the open event of the editor toolbar and prevent its execution. This resolved my issue.

let editor = $("#targetdiv").getKendoEditor();
editor.toolbar.window.bind("open", function (e) {
    e.preventDefault();
});