javascript 向 Summernote 编辑器添加禁用/启用方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29018525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding disable/enable methods to Summernote editor
提问by Stephen Adelakun
I have been using summernote editor for a while now and it's working for most of the things I've needed it for. However, I recently wanted it disabled ( not destroyed ) after a user action. After efforts without success, it occurred to me I could use the destroy() method to achieve what I wanted. I noticed that Summernote still turned an already disabled textarea to its editor, with the writing area disabled. Here is what I finally did:
我已经使用 Summernote 编辑器有一段时间了，它适用于我需要的大部分内容。但是，我最近希望在用户操作后将其禁用（未销毁）。经过努力没有成功，我突然想到我可以使用 destroy() 方法来实现我想要的。我注意到 Summernote 仍然将一个已经禁用的 textarea 转换为它的编辑器，并且禁用了书写区域。这是我最终做的：
To disable summernote after creating it: I first destroyed it, then disabled the target element, and finally re-initialized it:
在创建之后禁用summernote：我首先销毁它，然后禁用目标元素，最后重新初始化它：
$(".summernoteTarget").destroy();
$(".summernoteTarget").prop('disabled', true );
$(".summernoteTarget").summernote();
And to enable it again, I first destroyed it as before, then enabled the target element, and lastly re-initialized it:
为了再次启用它，我首先像以前一样销毁它，然后启用目标元素，最后重新初始化它：
$(".summernoteTarget").destroy();
$(".summernoteTarget").prop('disabled', false );
$(".summernoteTarget").summernote();
This did the trick with minor problem: when it remains in the 'disabled' state, all the controls are not disabled, only the writing area is. So a user can still , say, drag a file onto the writing area but this raises an error.
这解决了一个小问题：当它保持在“禁用”状态时，所有控件都没有被禁用，只有写入区域被禁用。所以用户仍然可以，比如说，将文件拖到写入区域，但这会引发错误。
Has anyone taken a look at the source of Summernote and can add two methods( disable and enable ) in addition to destroy(), so that we can do something like:
有没有人看过Summernote的源码，除了destroy()之外，还可以添加两个方法（disable和enable），这样我们就可以做这样的事情：
$(".summernoteTargetElement").disable();
$(".summernoteTargetElement").enable();
Thanks.
谢谢。
采纳答案by Hacker Wins
You can disable or enable editor with API after v0.7.3.
您可以在 v0.7.3 之后使用 API 禁用或启用编辑器。
// To disable
$('.summernote').summernote('disable');
// To enable
$('.summernote').summernote('enable');
回答by Pedro Acácio
This worked for me:
这对我有用：
// The class note-editable is generated by summernote
// To enable
$('.note-editable').attr('contenteditable', true);
// To disable
$('.note-editable').attr('contenteditable', false);
Source: https://github.com/summernote/summernote/issues/61
来源：https: //github.com/summernote/summernote/issues/61
Hope this helps someone :)
希望这对某人有所帮助:)
回答by Tsiftelis Thanasis
I don't know if you still need this. I am doing the following: For disable
我不知道你是否还需要这个。我正在执行以下操作：对于禁用
$('#textarea').destroy();
$('#textarea').prop('disabled', true);
$('#textarea').summernote({
minHeight: null,
maxHeight: null,
focus: true,
styleWithSpan: false,
toolbar: [
]
});
For enable
对于启用
$('#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 is my area where i applied the summernote.
textarea 是我应用summernote 的区域。
But after this i am having problem with the code property when i post the page.
但是在此之后，我在发布页面时遇到了代码属性问题。
回答by logan gilley
In my situation I wanted to create a class selector for 2 summernote rich text editors. One would be enabled the other disabled.
在我的情况下，我想为 2 个 Summernote 富文本编辑器创建一个类选择器。一个将启用另一个禁用。
To achieve this you can use this approach
为此，您可以使用这种方法
// 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" })
The text area will allow the saved rich text code to be interpreted when you display it back in the textarea later.
文本区域将允许在稍后将其显示回文本区域时解释保存的富文本代码。
Now when you create a summerNote rich text editor it does not convert your element to a summernote, rather it create a new element below the defined element. You can see this in the DOM if you inspect the various elements
现在，当您创建一个 summerNote 富文本编辑器时，它不会将您的元素转换为一个 summernote，而是在定义的元素下方创建一个新元素。如果您检查各种元素，您可以在 DOM 中看到这一点
Now to disable the editor
现在禁用编辑器
// In javascript
$('.summerNote-disabled+.note-editor .note-editable').attr('contenteditable', false)
This selects the element that you defined as the summerNote and grabs the note-editor sibling. Within that sibling exists the note-editable textarea. This is the element that you would want to set its 'contenteditable' attribute to false.
这将选择您定义为 summerNote 的元素并获取注释编辑器兄弟。在该兄弟中存在注释可编辑文本区域。这是您希望将其“contenteditable”属性设置为 false 的元素。
