向 Summernote 编辑器添加 disable/enable 方法

Question

我使用 summernote 编辑器已有一段时间了，它可以满足我需要的大部分功能。但是，我最近希望在用户操作后将其禁用（而不是销毁）。经过努力没有成功，我突然想到我可以使用 destroy() 方法来实现我想要的。我注意到 Summernote 仍然将一个已经禁用的文本区域转换为它的编辑器，同时禁用了书写区域。这是我最后做的：

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

    $(".summernoteTarget").destroy();

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

    $(".summernoteTarget").summernote();

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

    $(".summernoteTarget").destroy();

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

    $(".summernoteTarget").summernote();

这解决了一个小问题：当它保持在'disabled'状态时，所有的控件都没有被禁用，只有书写区域被禁用。所以用户仍然可以，比如说，将文件拖到书写区域，但这会引发错误。

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

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

谢谢。

Answer 1

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

$('#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 是我应用 summernote 的区域。

但在此之后，当我 post 页面时，代码属性出现问题。

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

在 v0.7.3 之后，您可以使用 API 禁用或启用编辑器。

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

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

Answer 4

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

要实现这一点，您可以使用这种方法

// 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 的元素并获取笔记编辑器同级元素。在那个兄弟姐妹中存在可编辑注释的文本区域。这是您希望将其 'contenteditable' 属性设置为 false 的元素。

向 Summernote 编辑器添加 disable/enable 方法

Adding disable/enable methods to Summernote editor

javascript

jquery

textarea

summernote