如何使用jQuery禁用CKeditor

Question

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

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

- Bakhtiyor

---

这有帮助吗？？？https://dev59.com/TVfUa4cB1Zd3GeqPJZje - Val

怎么会这么麻烦啊。:( - ficuscr

Answer 1

最简单的方法：

禁用CKEditor：

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

启用CKEditor：

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

- Dias

---

根据文档，setReadOnly自3.6版本起可用。 - Rockallite

Answer 2

我在使用CodeIgniter。 在视图文件中，我像这样使用它：

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

- Vishav B Kaith

---

如果您在单个页面上有许多CKEditor，并且只需要禁用其中一些，则此方法不可行。 - Gherman

Answer 3

我假定您正在使用CKE的jQuery适配器，因此您可以使用.ckeditorGet() jQuery函数快速访问CKEditor的API。

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

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

将其切换回可写模式，请使用：

.setReadOnly( false );

你可以使用 readOnly 配置值，当你启动编辑器时立即将其设置为只读模式：

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

- Petr Vostrel

---

似乎没有任何一种方法适用于我。据我所知，我使用的是版本3.5.2。 - ficuscr

根据文档，setReadOnly自3.6版本起可用。 - Rockallite

Answer 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示例以反映OP的查询

- LoneWOLFs

Answer 5

来自：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 );

- steve_c

Answer 6

我将标签添加了一个disabled属性，这似乎是最简单的方法。</p> <pre class="guess-SQL"><code><div class="col-md-12"> <h3>HTML CONTENT</h3> <textarea name="editor1" disabled></textarea> <script> CKEDITOR.replace('editor1'); </script> </div> </code></pre>

- HappyCoder

Answer 7

我认为您没有仔细阅读文档......它表明Ckeditor具有某些实例名称，并且在页面的标签中使用该实例名称，设置InstanceNameOfCkEditor.config.readOnly = true;

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

- Ovais Khatri

---

你不是在重复我之前说过的话吗？ - Bakhtiyor

Answer 8

如果您在页面上有多个CKEditor，以下解决方案适用于我。

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

      //for disable
      editor.setReadOnly();

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

- Anjana Ethilkandy

Answer 9

在我们的项目中，我们隐藏了CKEditor并使用只读文本区域来显示现有文本。希望这可以帮助到您。

- softwaredeveloper

---

我同意这个人的观点，在找到正确的解决方案之前，可以采用这种方法。如果你知道如何收集下面的文本，那么可能会暴露HTML文本而不是真正的文本，除非你去掉标签并使用适当的间距和换行等等...或者你可以将其放在一个div中，这样它就可以得到适当的格式化了 :) - Val

Answer 10

你可以尝试这个，这是最好的解决方案。

 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
            }

- Osama khodroj