CODEWITHSUNDEEP
froala
Alejo Rybak
Alejo Rybak

Reputation: 181

FROALA non editable content

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.

Upvotes: 9

Views: 10078

Answers (5)

Andron
Andron

Reputation: 6621

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();

}

Upvotes: 0

srishti.gupta
srishti.gupta

Reputation: 26

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');
  1. 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.

Upvotes: 0

Ilyas karim
Ilyas karim

Reputation: 4812

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/

enter image description here

If you want to activate it again you can do:

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

Upvotes: 0

st3fan
st3fan

Reputation: 1640

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>

Upvotes: 18

Alejo Rybak
Alejo Rybak

Reputation: 181

For that, You can use 

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

Upvotes: 6

Related Questions