向Summernote编辑器添加禁用/启用方法

我已经使用了summernote编辑器一段时间了，它适用于我需要它的大部分内容。 但是，我最近希望在用户操作后禁用（未销毁）。 经过努力没有成功，我发现我可以使用destroy（）方法来实现我想要的。 我注意到Summernote仍然将已经禁用的textarea转换为其编辑器，禁用了写入区域。 这是我最后做的：

要在创建它之后禁用summernote：我首先销毁它，然后禁用目标元素，最后重新初始化它：

$(".summernoteTarget").destroy(); $(".summernoteTarget").prop('disabled', true ); $(".summernoteTarget").summernote(); 

为了再次启用它，我首先像以前一样销毁它，然后启用目标元素，最后重新初始化它：

  $(".summernoteTarget").destroy(); $(".summernoteTarget").prop('disabled', false ); $(".summernoteTarget").summernote(); 

这样就解决了一个小问题：当它处于“禁用”状态时，所有控件都不会被禁用，只有写入区域。 因此，用户仍然可以将文件拖到写入区域，但这会引发错误。

有没有人看过Summernote的源代码，除了destroy（）之外还可以添加两个方法（禁用和启用），这样我们可以做类似的事情：

  $(".summernoteTargetElement").disable(); $(".summernoteTargetElement").enable(); 

谢谢。

Answer 1

您可以在v0.7.3之后禁用或启用带有API的编辑器。

 // To disable $('.summernote').summernote('disable'); // To enable $('.summernote').summernote('enable'); 

http://summernote.org/deep-dive/#disable-enable

Answer 2

这对我有用：

 // The class note-editable is generated by summernote // To enable $('.note-editable').attr('contenteditable', true); // To disable $('.note-editable').attr('contenteditable', false); 

资料来源： https ： //github.com/summernote/summernote/issues/61

希望这有助于某人:)

Answer 3

我不知道你是否还需要这个。 我正在做以下事情：禁用

 $('#textarea').destroy(); $('#textarea').prop('disabled', true); $('#textarea').summernote({ minHeight: null, maxHeight: null, focus: true, styleWithSpan: false, toolbar: [ ] }); 

启用

 $('#textarea').destroy(); $('#textarea').prop('disabled', false); $('#textarea').summernote({ minHeight: null, maxHeight: null, focus: true, styleWithSpan: false, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['para', ['ul', 'ol']] ] }); 

textarea是我申请夏令时的地方。

但在此之后，当我发布页面时，我遇到了代码属性的问题。

Answer 4

在我的情况下，我想为2个summernote富文本编辑器创建一个类选择器。 一个将启用另一个残疾人。

为此，您可以使用此方法

 // This is in a razor view using MVC // Enabled @Html.TextAreaFor(i => i.Explanation, new {@class = "summerNote" }) // Disabled @Html.TextAreaFor(i => i.Explanation, new {@class = "summerNote-disabled" }) 

文本区域将允许在稍后将其显示回文本区域时解释保存的富文本代码。

现在，当您创建一个summerNote富文本编辑器时，它不会将您的元素转换为summernote，而是在已定义元素下创建一个新元素。 如果检查各种元素，可以在DOM中看到这一点

现在禁用编辑器

 // In javascript $('.summerNote-disabled+.note-editor .note-editable').attr('contenteditable', false) 

这将选择您定义为summerNote的元素并获取音符编辑器兄弟。 在那个兄弟姐妹中存在着可编辑的textarea。 这是您希望将其“contenteditable”属性设置为false的元素。