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

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

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

现在禁用编辑器

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

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

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

4 个答案: