FROALA non editable content

Question

I am building an email template with FROALA. I don't want to give the user the power to edit a part of it. Is there a way to stop the user from editing a part of the content?

Thank you.

Adlib

Answer 1

The best way for that would be to use the contenteditable=false flag and there is an example on the Froala Github repo as well: https://github.com/froala/wysiwyg-editor/blob/master/html/popular/disable_edit.html#L40.

<p>This <span contenteditable="false">zone</span> can't be edited.</p>

If you would like to allow deleting that when using backspace/delete, then you should also add the class fr-deletable to it:

<p>This <span contenteditable="false" class="fr-deletable">zone</span> can be deleted.</p>

Undercurrent

Answer 2

For that, You can use

<div contenteditable="false"></div>.

Adlib

Answer 3

Froala allows you to make froala non-editable,

Lets make this instance non editable:

<div id="froala-editor"></div>

Initiate Froala Instance:

$('#froala-editor').froalaEditor({});

Make in non-editable

$('#froala-editor').froalaEditor('edit.off');

Demo: https://jsfiddle.net/q87duk2c/17/

If you want to activate it again you can do:

$('#froala-editor').froalaEditor('edit.on');

Musaceous

Answer 4

Requirement can be of 2 types :

1. As soon as we initiate froala editor we want editor to be disabled in that particular scenario below code will work.

HTML:

<div id="froala-editor">

</div>

JavaScript:

$('#froala-editor').froalaEditor({});
$('#froala-editor').froalaEditor('edit.off');

2. If we want some part of html to be in read only mode will other must work as editable.For that

<div id="froala-editor">
<div id="new" contenteditable="false">
  <p>
  hi lets make this content non editable
  </p>
  </div>
</div>

contenteditable=false just give this attribute on top of it.

div with id new is in read only mode.

Unicef

Answer 5

For some reason, I need to disable/enable the toolbar too (only in this case the cursor is correct when moving the mouse above any button in the toolbar):

var editor = new FroalaEditor(...);
...
if (booReadOnly) {
    editor.edit.off();
    editor.toolbar.disable();
} else {
    editor.edit.on();
    editor.toolbar.enable();

}

Dispersoid