FROALA 不可编辑的内容答案

【问题标题】：FROALA non editable contentFROALA 不可编辑的内容
【发布时间】：2022-02-02 03:51:36
【问题描述】：

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

谢谢。

【问题讨论】：

标签： froala

【解决方案1】：

最好的方法是使用contenteditable=false 标志，并且在 Froala Github 存储库中也有一个示例：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>

【讨论】：

【解决方案2】：

为此，您可以使用

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

【讨论】：

【解决方案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');

【讨论】：

【解决方案4】：

需求可以有两种类型：

一旦我们启动 froala 编辑器，我们希望在特定情况下禁用编辑器，下面的代码将起作用。

HTML：

<div id="froala-editor">

</div>

JavaScript：

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

如果我们希望 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 处于只读模式。

【讨论】：

【解决方案5】：

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

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

}

【讨论】：