如何使用 jQuery 禁用 CKeditor
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6457071/
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
How to disable CKeditor with jQuery
提问by Bakhtiyor
I am using CKEditorin my web application and need to disable/enable the editor from javascript. I know that there is an option called readOnlybut I don't know how to set it from jQuery.
我在我的 Web 应用程序中使用CKEditor，需要从 javascript 禁用/启用编辑器。我知道有一个名为readOnly的选项，但我不知道如何从 jQuery 设置它。
Does anybody know how to disable and enable back the CKEditor using jQuery please?
有人知道如何使用 jQuery 禁用和启用 CKEditor 吗？
回答by Dias
The easiest way:
最简单的方法：
To disableCKEditor:
要禁用CKEditor：
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(true);
To enableCKEditor:
要启用CKEditor：
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(false);
回答by Vishav B Kaith
I am using it in codeigniter. In the view file I am using it like this:
我在 codeigniter 中使用它。在视图文件中，我像这样使用它：
<script type="text/javascript">
$(document).ready(function() {
CKEDITOR.config.readOnly = true;
});
</script>
回答by Petr Vostrel
I assume you are using the CKE's jQuery adapter, so you can use .ckeditorGet()jQuery function to quickly access the CKEditor's API.
我假设您使用的是 CKE 的jQuery 适配器，因此您可以使用.ckeditorGet()jQuery 函数快速访问 CKEditor 的 API。
To switch a running editor instance in read only mode, use the setReadOnlyeditor function:
要以只读模式切换正在运行的编辑器实例，请使用setReadOnly编辑器功能：
$( _your_textarea_ ).ckeditorGet().setReadOnly();
To switch it back into writable use:
要将其切换回可写使用：
.setReadOnly( false );
You can also use readOnlyconfiguration value, when you are firing up your editor to start it in readonly mode right away:
您还可以使用readOnly配置值，当您启动编辑器以立即以只读模式启动它时：
$( _your_textarea_ ).ckeditor({
readOnly: true
});
回答by LoneWOLFs
Assuming you have included jQuery adapter following code should make it readonly. You can take the jQuery adapter from the example if not yet included.
假设您已包含 jQuery 适配器，以下代码应使其成为只读。如果尚未包含，您可以从示例中获取 jQuery 适配器。
<div class="wrapper">
<form id="myfrm" name="myfrm" class="myfrm" action="" method="post">
<textarea id="myeditor" name="myeditor"></textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
</div>?
and the js
和 js
$(document).ready(function(e) {
var myeditor = $('#myeditor');
myeditor.ckeditor();
myeditor.ckeditorGet().config.resize_enabled = false;
myeditor.ckeditorGet().config.height = 200;
myeditor.ckeditorGet().config.readOnly = true;
});
To enable or disable a ckeditor based on your selection of a select box you'd have to make a change event like this
要根据您选择的选择框启用或禁用 ckeditor，您必须进行这样的更改事件
$(document).ready(function(){
//put ckeditor initialization (the above) here.
$('#myselect').change(function(){
var x = $(this);
if(x.val()=='enable'){
myeditor.removeAttr('disabled');
}else if(x.val()=='disable'){
myeditor.attr('disabled','disabled');
}
myeditor.ckeditorGet().destroy();
myeditor.ckeditor();
});
});
What we are doing above is setting the original element to have attribute disabled="disabled"and reloading ckeditor after destroying the current instance. Check the JSFiddle Example 2.
我们上面所做的是disabled="disabled"在销毁当前实例后将原始元素设置为具有属性并重新加载ckeditor。检查 JSFiddle 示例 2。
回答by steve_c
From: cksource forums
来自：cksource论坛
// Temporary workaround for providing editor 'read-only' toggling functionality.
( function()
{
var cancelEvent = function( evt )
{
evt.cancel();
};
CKEDITOR.editor.prototype.readOnly = function( isReadOnly )
{
// Turn off contentEditable.
this.document.$.body.disabled = isReadOnly;
CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly
: this.document.$.designMode = isReadOnly ? "off" : "on";
// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );
// Disable all commands in wysiwyg mode.
var command,
commands = this._.commands,
mode = this.mode;
for ( var name in commands )
{
command = commands[ name ];
isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
}
}
} )();
And usage:
和用法：
// Turn CKEditor into 'ready-only' mode or vice versa.
CKEDITOR.instances.editor1.readOnly( true );
CKEDITOR.instances.editor1.readOnly( false );
回答by Ovais Khatri
I think you haven't read that documentation properly...it says that Ckeditor has some instance name, and with that instance name in the tag of the page set InstanceNameOfCkEditor.config.readOnly = true;
我认为您没有正确阅读该文档...它说 Ckeditor 有一些实例名称，并且在页面集的标签中使用该实例名称 InstanceNameOfCkEditor.config.readOnly = true;
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
回答by HappyCoder
I add a disabled to the textarea which seems to be the simplest way.
我在 textarea 中添加了一个 disabled ，这似乎是最简单的方法。
<div class="col-md-12">
<h3>HTML CONTENT</h3>
<textarea name="editor1" disabled></textarea>
<script>
CKEDITOR.replace('editor1');
</script>
</div>
回答by softwaredeveloper
In our project we are hiding the CKEditor and using a ReadOnlyText Area to display existing text. Hope this helps.
在我们的项目中，我们隐藏了 CKEditor 并使用 ReadOnlyText 区域来显示现有文本。希望这可以帮助。
回答by Osama khodrog
you try this is the best solution
你试试这是最好的解决方案
var existingEditor = CKEDITOR.instances && CKEDITOR.instances[element.id];
try {
if (existingEditor && typeof(existingEditor) !== "undefined" && typeof(existingEditor.setReadOnly) !== "undefined") {
if (el.prop("disabled")) {
existingEditor.setReadOnly(true);
} else {
existingEditor.setReadOnly(false);
}
}
} catch (ex) {
//do nothing
}