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

Question

我已经使用了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

这对我有用：

// 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 2

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

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

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

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" })

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

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

现在禁用编辑器

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

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