2

現在、cms のバックエンドを構築しています。ページをすばやく作成するために、さまざまなブロックを生成するモジュールを作成するように依頼されました (下にテキストを含む画像、右にテキストを含む画像など)。

そのビットは機能していますが、テキストを編集するには、ckeditorを使用しようとしています。次のコードを使用すると、テキストは編集可能ですが、ツールバーが表示されません:

<div id="editable" contenteditable="true">
    <h4>{{title}}</h4>
    {{text}}
</div>

これを解決するために、CKEditorのガイドのjavascriptを使用してみました:

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable' );

このコードはエラーを作成しているだけです:

Uncaught TypeError: Cannot call method 'getEditor' of undefined

テキストが生成される前に、エディターがリンクするものが何もないためだと思います。

生成されたコードをツールバーで編集可能にするのを手伝ってもらえますか? また、ID の代わりにクラス名を使用して ckeditor を動作させることは可能ですか?

前もって感謝します

4

2 に答える 2

4

初期化段階で、CKEditorは要素に既にバインドされているエディター インスタンスがあるかどうかを確認します。表示されるエラーは、まだ DOM にアタッチされていないか、呼び出されるid前に DOM から削除された要素の を提供していることを示しています。inline()

順序が正しいことを確認します。

<div id="editable" contenteditable="true">
    <h4>{{title}}</h4>
    {{text}}
</div>

<script>
   CKEDITOR.disableAutoInline = true;
   CKEDITOR.inline( 'editable' );
</script>

<div id="editable" contenteditable="true">...</div>JavaScript によって生成されますか? inline()その場合は、要素が DOM に挿入された後に が呼び出されることを確認してください。

「最後の希望」の提案:inline()別の DOM スコープ (つまり、iframeウィンドウ) から呼び出しますか?

于 2013-07-01T20:03:39.637 に答える
3

回答ありがとうございます。

はい、問題は、ckeditor のロード後にコンテンツが挿入されていたことです。また、Google Chrome でツールバーがグレー表示されるという問題もありました。

両方の問題を解決するために、新しいコンテンツを挿入した後に次のコードを使用しました。

$('.editable').click(function() {
    var name;
    for(name in CKEDITOR.instances) {
        var instance = CKEDITOR.instances[name];
        if(this && this == instance.element.$) {
            return;
        }
    }
    $(this).attr('contenteditable', true);
    CKEDITOR.inline(this);
});
于 2013-07-02T19:12:56.323 に答える