froala - FROALA 不可编辑的内容

Question

我正在使用 FROALA 构建电子邮件模板。我不想让用户有权编辑其中的一部分。有没有办法阻止用户编辑部分内容？

谢谢你。

Answer 1

最好的方法是使用contenteditable=false标志，Froala Github repo 上也有一个例子：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>

如果您想在使用退格/删除时允许删除它，那么您还应该将类添加fr-deletable到其中：

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

Answer 2

为此，您可以使用

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

Answer 3

Froala 允许您使 froala 不可编辑，

让这个实例不可编辑：

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

启动 Froala 实例：

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

使不可编辑

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

演示：https ://jsfiddle.net/q87duk2c/17/

如果您想再次激活它，您可以执行以下操作：

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

Answer 4

出于某种原因，我也需要禁用/启用工具栏（仅在这种情况下，将鼠标移动到工具栏中的任何按钮上方时光标是正确的）：

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

}

Answer 5

需求可以有两种类型：

1. 一旦我们启动 froala 编辑器，我们希望在特定场景中禁用编辑器，下面的代码将起作用。

HTML：

<div id="froala-editor">

</div>

JavaScript：

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

2. 如果我们希望 html 的某些部分处于只读模式，其他部分必须可以编辑。为此

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

contenteditable=false 只是在它上面给出这个属性。

id 为 new 的 div 处于只读模式。