Kendo Editor - Remove Toolbar

I use the kendo editor and though ... I want to disable the editing toolbar. Indeed, all I want is to be able to format the text field (in bold, italics ...), not allowing the user to interact with my text area, and does not have a toolbar that will be very confusing for the user. I want it to appear as a normal readonly text environment , and nothing more. I tried this:

$("#output").kendoEditor();
$($('#output').data().kendoEditor.body).attr('contenteditable', false);

But it does not work. Any ideas?

Edit

I just want to have a simple text area, I want to hide the toolbar and programmatically process the contents of the text field, as it is read-only.

+4
source share
3 answers

If you do not want the toolbar to display an empty line toolsin the initialization of the KendoUI editor:

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

See here http://jsfiddle.net/OnaBai/Eh6X2/

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

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

And the following code selects all the text and converts it to bold, and then cancels it.

var range = editor.createRange();
range.selectNodeContents(editor.body);
editor.selectRange(range);
editor.exec("bold");
editor.selectRange();

Full example here: http://jsfiddle.net/OnaBai/Eh6X2/3/

+3
source

This works well in MVC using HTML wrappers

 @(Html.Kendo().EditorFor(m => m.Body).Tools(t => t.Clear()))
+2
source

, kendoEditor textarea readonly, ,

$('iframe').contents().find("body").attr('contenteditable',false);

, ,

$('.k-editor-toolbar').find('li a').click(function(){return false;})

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

Source: https://habr.com/ru/post/1534236/


All Articles