2017-04-11 6 views
0

私は特別なケースが必要なので、私はckeditorに自分のプラグインを作っています。とにかく、私はtextarea要素を編集可能にすることはできません。これは、(プラグインの)私自身のダイアログに私の全体のコードです:CKEditorのダイアログテキストエリアは編集できません

CKEDITOR.dialog.add('myDialog', function(editor) { 
    return { 
     title: 'My Plugin', 
     minWidth: 750, 
     minHeight: 500, 
     onShow: function(evt) { 
      var selection = editor.getSelection(); 
      var widget = editor.widgets.selected[0]; 
      var element = !!widget && !!widget.parts ? widget.parts['my'] : false; 
      var command = this.getName(); 

      if(command == 'myDialog') { 
       var code = selection.getSelectedElement(); 

       if(code && !!element) { 
        this.setupContent(code); 
        widget.data.myinput = element.getHtml(); 
       } 
      } 
     }, 
     contents: [{ 
      id: 'info', 
      label: 'Info', 
      accessKey: 'I', 
      elements: [{ 
       id: 'myinput', 
       type: 'textarea', 
       required: true, 
       label: 'Content', 
       rows: 42, 
       setup: function(widget) { 
        this.setValue(widget.data.myinput); 
       }, 
       commit: function(widget) { 
        widget.setData('myinput', this.getValue()); 
       } 
      }] 
     }], 
    }; 
}); 

問題はcontents.myinput以内です。タイプはテキストエリアですが、ダイアログを開くと編集できません。タイプをテキストに変更して行を削除すると、テキスト入力が表示され、うまく動作します。テキストエリアだけが問題です。これは、ダイアログを開いた後にどのように見えるかです:私のCKEditorバージョンの

enter image description here

バージョンは4.5です。私は既に3つのプラグインを作成していましたが、他のすべてのプラグインがこれを除いて動作するように、テキストエリアを使用する必要はありませんでした。 "ckeditor plugin tester"を提供するサイトがあれば、私はjsFiddleを追加するので、コードを投稿するだけです。

答えて

0

問題は、ブートストラップのダイアログにinit ckeditorがあります。だから私の問題の解決策は、初期化の後に、次のコード行を適用することです:

$.fn.modal.Constructor.prototype.enforceFocus = function() { 
    var $modalElement = this.$element; 

    $(document).on('focusin.modal', function(e) { 
     var $parent = $(e.target.parentNode); 
     if($modalElement[0] !== e.target 
       && !$modalElement.has(e.target).length 
       && !$parent.hasClass('cke_dialog_ui_input_select') 
       && !$parent.hasClass('cke_dialog_ui_input_text') 
       && !$parent.hasClass('cke_dialog_ui_input_textarea')) { 
      $modalElement.focus(); 
     } 
    }) 
}; 

私は問題の前にこのコードを持っていたが、私は追加することを忘れている!$parent.hasClass('cke_dialog_ui_input_textarea')がありませんでしたので、これは私のせいだった:)

関連する問題