如何使用 jQuery 禁用 CKeditor答案

【问题标题】：How to disable CKeditor with jQuery如何使用 jQuery 禁用 CKeditor
【发布时间】：2011-09-21 08:57:50
【问题描述】：

我在我的 Web 应用程序中使用 CKEditor，需要从 javascript 禁用/启用编辑器。我知道有一个名为readOnly 的选项，但我不知道如何从jQuery 设置它。

请问有人知道如何使用 jQuery 禁用和启用 CKEditor 吗？

【问题讨论】：

这有帮助吗？？？ stackoverflow.com/questions/6135892/…
这怎么会这么难。 :(

标签： jquery ckeditor

【解决方案1】：

最简单的方法：

要禁用 CKEditor：

CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(true);

要启用 CKEditor：

CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(false);

【讨论】：

根据the docs，setReadOnly从3.6版本开始可用。

【解决方案2】：

我在 codeigniter 中使用它。在视图文件中，我是这样使用它的：

<script type="text/javascript">
    $(document).ready(function() {
        CKEDITOR.config.readOnly = true;
    });
</script>

【讨论】：

如果你在一个页面上有很多 CKEditor 并且只有其中一些必须被禁用，这不会减少它。

【解决方案3】：

我假设你使用的是CKE的jQuery adapter，所以你可以使用.ckeditorGet() jQuery函数来快速访问CKEditor的API。

要将正在运行的编辑器实例切换为只读模式，请使用setReadOnly 编辑器函数：

$( _your_textarea_ ).ckeditorGet().setReadOnly();

将其切换回可写使用：

.setReadOnly( false );

您也可以使用readOnly 配置值，当您启动编辑器以立即以只读模式启动它时：

$( _your_textarea_ ).ckeditor({
    readOnly: true
});

【讨论】：

这些似乎都不适合我。最好使用 3.5.2 版本。
根据the docs，setReadOnly从3.6版本开始可用。

【解决方案4】：

假设您在代码之后包含了 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>

和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 Example to reflect OP's query

【讨论】：

【解决方案5】：

我认为您没有正确阅读该文档...它说 Ckeditor 有一些实例名称，并且该实例名称在页面的标签中设置 InstanceNameOfCkEditor.config.readOnly = true;

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly

【讨论】：

你不是在重复我上面说的吗？

【解决方案6】：

发件人：cksource forums

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

【讨论】：

【解决方案7】：

我在 textarea 中添加了一个禁用，这似乎是最简单的方法。

<div class="col-md-12">
    <h3>HTML CONTENT</h3>
    <textarea name="editor1" disabled></textarea>
    <script>
        CKEDITOR.replace('editor1');
    </script>
 </div>

【讨论】：

【解决方案8】：

在我们的项目中，我们隐藏了 CKEditor 并使用 ReadOnlyText 区域来显示现有文本。希望这会有所帮助。

【讨论】：

我同意这个人的观点，直到你找到正确的解决方案，使用这个方法，如果你知道如何收集下面的文本，你可能最终会暴露 HTML 文本。到真实的文本，除非你剥离标签并使用适当的间距和新行等......或者你可以把它放在一个div中，所以它的格式也正确:)

【解决方案9】：

你试试这是最好的解决方案

 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
            }

【讨论】：

【解决方案10】：

如果您在一个页面上有多个 ckeditor。以下解决方案对我有用。

   CKEDITOR.instances.instance_name.on('instanceReady', function(ev) {
      var editor = CKEDITOR.instances.instance_name;

      //for disable
      editor.setReadOnly();

      //for enable
      editor.setReadOnly(false);    
                                                
    });

【讨论】：