10

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

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

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

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

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

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

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

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

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

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

有没有人看过 Summernote 的源代码，除了 destroy() 之外，还可以添加两个方法（禁用和启用），以便我们可以执行以下操作：

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

谢谢。

4

4 回答 4

4

这对我有用：

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

希望这可以帮助某人:)

于 2016-01-20T20:30:43.447 回答
4

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

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

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

于 2016-01-21T01:38:44.270 回答
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 的区域。

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

于 2015-06-03T11:35:50.740 回答
0

在我的情况下，我想为 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 的元素并获取note-editor 兄弟。在该同级中存在注释可编辑的文本区域。这是您希望将其 'contenteditable' 属性设置为 false 的元素。

于 2016-11-25T18:52:52.953 回答