19

バージョン 4.2.1 を使用して CKEditor プラグインを作成しています。Simple Pluginのチュートリアルに従おうとしています。ただし、チュートリアルからabbrプラグイン全体を変更せずにコピーしただけでも、ダイアログウィンドウのテキスト入力は編集/クリックできません。

ダイアログのタブ、[OK] / [キャンセル] ボタンをクリックして、ダイアログをドラッグすることはできます。カスタム バージョンのダイアログに他の要素 (selects など) を追加したので、それらを操作できます。

Chrome の Dev Tools でテキスト入力要素を確認すると、コンソール/jQuery 経由でテキストを追加でき、表示されます。コンソールでエラーが発生しません。

$('#cke_229_textInput').val('help');

テキスト入力にテキストを追加して画面に表示します。しかし、マウス/キーボード/ブラウザを介して要素を操作できません。不足している CKEditor 構成に明らかなものはありますか? これが本当にばかげた質問である場合は申し訳ありません-CKEditorを初めて使用します。CKEditor フォーラムと Google も検索しましたが、関連する問題は見つかりませんでした。

これは、Chrome 30 と FF 24 の両方で発生します。

エディターを作成するための私の呼び出し:

var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
    fullPage: true,
    removePlugins: 'newpage,forms,templates',
    extraPlugins: 'abbr',
    allowedContent: true
});

ヒントやヒントをありがとう！

更新 #1

これが関連している可能性があると考えて、Chrome の Dev Tools を使用して、テキスト要素の z-index を非常に高く設定しようとしました。運が悪い、それはまだ編集可能/強調表示可能ではありません...

アップデート #2

これは、jQuery UIとの競合のようです。提案された修正はまだ私にはうまくいきませんが、突っ込んでいきます...これに出くわす可能性のある人のためにこれを残します.

最終更新

だからブライアンのヒントは私を助けました. ブートボックスのモーダル背景 (元のダイアログを生成するために使用しているもの) と CKEditor ダイアログの背景の両方に tabindex=-1 があるため、何らかの形で競合します。Bootbox の背景を手動でオフにする (つまり、tabindex='' を設定する) ことは Chrome 開発ツールで機能するので、jQuery などと一緒に何かをハックできると思います。素晴らしいもの...助けてくれてありがとう!! なぜこれが jsFiddle で機能するようになったのかわかりません...私の記憶が正しければ、これらのダイアログに背景がなかった可能性があります。

また、参考までに、tabindex を -1 にするとuntabbableになります。これは、背景としては理にかなっています。

4

7 に答える 7

29

モーダル html 属性tabindex='-1'が問題を引き起こしているようです。

これtabindex='-1'は実際にはブートストラップのドキュメントにあり、私が知らない何らかの理由で必要です。

于 2014-01-31T17:44:18.480 に答える
3

OMG私はこれを何時間もグーグルで検索してきましたが、ついに機能するコードが気に入りました!!

ckeditor を含むダイアログ ページにこれを貼り付けます。

orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
   if ($(event.target).closest('.cke_dialog').length) {
      return true;
   }
   return orig_allowInteraction.apply(this, arguments);
};

ここで修正を見つけました: https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

于 2015-01-22T10:27:53.797 に答える
3

他の誰かが現在この問題を抱えているかどうかはわかりません。ハックを作成しようとして髪を引き裂いていました。しばらくウェブを掘り下げて検索した後、これは非常に単純なソリューションでした。この修正は私を助けました。jQuery からロードする場合、エディターを配置したい同じページに配置するだけです。問題はタブインデックスの競合であるため、モーダルからその属性を削除しました。

<script>
$(function(){ 
       // APPLY THE EDITOR TO THE TEXTAREA
       $(".wysiwyg").ckeditor();

       // FIXING THE MODAL/CKEDITOR ISSUE
       $(".modal").removeAttr("tabindex");
});
</script>
于 2019-01-30T20:37:41.640 に答える
-2

[CKFinderなしで] CK Editorからサーバーに画像をアップロードしようとしましたが、良い面ではできました。ダイアログを作成しようとするときはいつでもdiv、ダイアログボックスを保持するダイアログをオンザフライで作成しています。CSSクロムを使用してテキストボックスのプロパティを確認し、変更することをお勧めします。これがあなたを助けることを願っています。

于 2014-02-06T17:46:20.130 に答える