How can I disable wysiwyg buttons and make 'readonly' the text box?

[elygiahh]

Hello folks!

I need a help in disabling the buttons and the text box.

I'm using a Wizard Bootstrap to make step-by-step forms, so when I pass a step forward and then want to come back and see the step before, all items in the form must be adjusted for reading. So, for the inputs I'm using the class uneditable-input, which is working pretty well, but this class isn´t efficient for the wysiwyg buttons and the text box.

I really can disable the buttons and make uneditable-input the text box, but it works only in appearance because they're still editable. I tryed the readOnly attribute too, but with no success.

Is there any way to disable wysiwyg functionality?

[elygiahh]

Well, with no response, I did a workaround. I used the code: document.getElementById("editor1_toolbar").remove(); to remove the toolbar, once I just want to read and not to edit content in the text box. And for the text box to stop editing, I used a bootstrap inputmask functionality, using the code: $('#editor1').inputmask({ mask:' ' }). And I'm done. But, if anyone have the "correct" way to do this, please, tell me.

[webdogz]

You need to remove the contenteditable attribute or simply set it to false: $('#editor').attr('contenteditable', false); I would also hide the toolbar as opposed to removing it this way you can wrap it all in a toggle editor function like so: HTML:

<button id="toggler" class="btn btn-default">toggle</button>

JavaScript:

$('#toggler').on('click', function (){
    $('#editor').attr('contenteditable', $('#editor1_toolbar').toggle().is(':visible'));
});