web-dev-qa-db-ja.com

jQueryでCKeditorを無効にする方法

Webアプリケーションで CKEditor を使用しており、JavaScriptからエディターを無効/有効にする必要があります。 readOnly というオプションがあることは知っていますが、jQueryから設定する方法がわかりません。

JQueryを使用してCKEditorを無効にしてから有効にする方法を知っている人はいますか？

jqueryckeditor
12
Bakhtiyor

最も簡単な方法：

To disable CKEditor：

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

To enable CKEditor：

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

Codeigniterで使用しています。ビューファイルでは、次のように使用しています。

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

CKEの jQueryアダプター を使用していると仮定しているので、.ckeditorGet()jQuery関数を使用してCKEditorのAPIにすばやくアクセスできます。

実行中のエディターインスタンスを読み取り専用モードに切り替えるには、 setReadOnly エディター関数を使用します。

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

書き込み可能な使用に戻すには：

.setReadOnly( false );

エディターを起動して読み取り専用で起動する場合は、 readOnly 構成値を使用することもできます。すぐにモード：

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

次のコードに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を確認してください。

OPのクエリを反映するJSFiddleの例

3
LoneWOLFs

差出人： 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 );
1
steve_c

そのドキュメントを正しく読んでいないと思います... Ckeditorにはインスタンス名があり、そのインスタンス名がページセットのタグに含まれていると書かれていますInstanceNameOfCkEditor.config.readOnly = true;

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

1
Ovais Khatri

これが最善の解決策です

 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
            }
0
Osama khodrog

最も簡単な方法のように思われるtextareaにdisabledを追加します。

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

私たちのプロジェクトでは、CKEditorを非表示にし、ReadOnlyText領域を使用して既存のテキストを表示しています。お役に立てれば。

0
softwaredeveloper