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

10

我一直在使用summernote编辑器,它对于我需要的大多数功能都能正常工作。但是最近我想要在用户操作后将其禁用(而不是销毁)。经过努力没有成功之后,我意识到可以使用destroy()方法来实现我的想法。我注意到Summernote仍然会将已禁用的文本区域转换为其编辑器,并禁用写作区域。这是我最终做的:

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

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

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

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

为了再次启用它,我首先像之前一样将其销毁,然后启用目标元素,最后重新初始化:

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

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

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

这个方法解决了问题,但有一个小问题:当它保持在“禁用”状态时,不是所有的控件都被禁用,只有写作区域被禁用。所以用户仍然可以将文件拖到写作区域,但这会导致错误。

有没有人查看过Summernote的源代码并添加两种方法(disable和enable)以及destroy(),这样我们就可以像这样做:

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

谢谢。

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

希望这能帮助到某些人 :)


在0.8.6版本中运行良好。很好。非常棒。 - bbh

4

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']]
                        ]
                    });

文本框是我应用了Summernote的区域。

但在提交页面后,我遇到了代码属性的问题。


我会尝试您的解决方案,并查看您所提到的代码属性应该怎么处理。 - Stephen Adelakun

0
在我的情况下,我想为两个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的元素,并获取note-editor兄弟元素。在该兄弟元素内存在note-editable文本区域。这就是您想要将其'contenteditable'属性设置为false的元素。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接