Kendo Editor - Remove toolbar

4
votes

I am using kendo Editor and though... I want to disable the edit toolbar. Indeed, All I want is to have the possibility to format my textarea (bold, italic...) without allowing the user to interact with my textarea neither have a toolbar which will be very confusing to a user. I want it to be displayed like a normal readonly textarea, nothing else. I tried this :

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

But it's not working. Any ideas?

Edit

I just want to have a simple textarea, I want to hide the toolbar and manipulate the content of the textarea programmatically since it is readonly.

4
jquerykendo-ui
Is working fine here: jsfiddle.net/IrvinDominin/sR4En – Irvin Dominin
have you check if you have some errors in your inspector ? – BENARD Patrick
@IrvinDomininakaEdward But what I want is not what I see in the fiddle, I don' t want to have a toolbar anymore, I don't want it to be disabled, I don't want ti exist in my textarea. Indeed, I need just the possibility to format the output with bold or italic with values that I insert programmatically in a disabled textarea. Do you see ? – Hamdi Baligh
@TheLittlePig I don't have any errors – Hamdi Baligh

4 Answers

3
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: [ ]
});

See it 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, then deselects it. 

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

The full example here: http://jsfiddle.net/OnaBai/Eh6X2/3/

4
votes

This works well in MVC using HTML wrappers

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

Hide toolbar with css:

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

This works for me (Asp.Net Core 3.0)...

1
votes

if you want your kendoEditor textarea readonly then use below code,

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

and if you want to disabled your toolbar then use this code,

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

Hide toolbar 

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