如何使用jQuery禁用CKeditor
我在我的Web应用程序中使用CKEditor ，需要从javascript禁用/启用编辑器。 我知道有一个名为readOnly的选项，但我不知道如何从jQuery中设置它。
有人知道如何使用jQuery禁用和启用CKEditor吗？
最简单的方法：
要禁用 CKEditor：
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(true); 要启用 CKEditor：
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(false);
我在codeigniter中使用它。 在视图文件中我使用它像这样：
我假设您正在使用CKE的jQuery适配器 ，因此您可以使用.ckeditorGet() jQuery函数来快速访问CKEditor的API。
要以只读模式切换正在运行的编辑器实例，请使用setReadOnly编辑器函数：
$( _your_textarea_ ).ckeditorGet().setReadOnly();
要将其切换回可写用途：
.setReadOnly( false );
当您启动编辑器以立即以只读模式启动它时，您还可以使用readOnly配置值：
$( _your_textarea_ ).ckeditor({ readOnly: true });
假设你已经包含了jQuery适配器，下面的代码应该使它只读。 如果尚未包含，可以从示例中获取jQuery适配器。
和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; });
要根据您选择的选择框启用或禁用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(); }); });
我们上面所做的是将原始元素设置为具有属性disabled="disabled"并在销毁当前实例后重新加载ckeditor。 检查JSFiddle示例2。
JSFiddle示例反映OP的查询
来自： 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 ); } } } )();
用法：
// Turn CKEditor into 'ready-only' mode or vice versa. CKEDITOR.instances.editor1.readOnly( true ); CKEDITOR.instances.editor1.readOnly( false );
我认为您没有正确阅读该文档…它说Ckeditor有一些实例名称，并且在页面集的标签中使用该实例名称InstanceNameOfCkEditor.config.readOnly = true;
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
在我们的项目中，我们隐藏了CKEditor并使用ReadOnlyText区域来显示现有文本。 希望这可以帮助。
你试试这是最好的解决方案
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 }
我在textarea中添加了一个禁用，这似乎是最简单的方法。
HTML CONTENT