1

CKEditor インスタンスでプレビュー機能を作成しようとしています。

私は CKEditor 4 を使用しており、テキストエリアをクラス名に置き換えています。私が直面している唯一の問題は、JavaScript を使用してテキストエリアの値を取得できないことです。これは私がこれまでに試したことです:

function prev()
    {
        html=document.forms["1_form"]["editor1"].value;
        document.getElementById("prev").innerHTML = html;
    }

および CKEditor テキストエリア:

<textarea class="ckeditor" onkeydown="prev()"></textarea>

なぜこれが機能しないのですか？CKEditor を無効にすると、スクリプトは期待どおりに機能しますが、ckeditor を有効にすると機能しません。私はどうしたらいいですか？

ありがとう！

編集：

私は今それを置き換えようとしていますが、これは私が使用しているコードです: CKEDITOR.replace('editor1'); //新しい ckeditor インスタンス var editor = CKEDITOR.instances.editor1; // インスタンスへの参照

//on `key` event
editor.on('key', function(){

var data = editor.getData(); //reference to ckeditor data
$('#prev').html(data); //update `div` html

});

それは機能しますが、これだけです。次のキーが押された後にのみ更新されるため、エディターの値は、このコードを修正するために何ができるかとしhello worldてプレビューが表示されます。コードの最初のセットは無視してください。hello worl

4

2 に答える 2

4

これは、CKEDITOR が<textarea>into<div>を属性に置き換え、要素の DOM にプロパティcontenteditable="true"がないためです。value<div>

DOM要素ではなく、CKEDITORインスタンスにイベントリスナーを追加する必要があります。次に例を示します。

// check if editor is ready
CKEDITOR.on( 'instanceCreated', function( e ) {

        // check if DOM is ready
        e.editor.on( 'contentDom', function() {

            // bind "keydown" event to CKEDITOR
            e.editor.document.on('keydown', function( event ) {

                // write editor content into "prev" element
                document.getElementById( "prev" ).innerHTML = e.editor.getData();
            }
        );
    });
});
于 2012-12-24T18:20:54.797 に答える
1

必要な人のために、HTML フィールドの TEXT 値を取得する 1 つの方法を次に示します (この場合、動的文字カウンターに使用されます)。

JS ...

CKEDITOR.replace( 'myDoc', {
    width: 605,
    height: 500
});

setInterval("updateCount()", 500);

function updateCount() {
    var str = CKEDITOR.instances.myDoc.getData();
    if (str) {
        var element = CKEDITOR.dom.element.createFromHtml( str );
        var no_html = element.getText();
        $('#myDoc_length').html( no_html.length );
    }
}

... HTML で ...

<textarea id="myDoc"></textarea>
<span id="myDoc_length">0</span> characters
于 2013-01-09T06:39:27.923 に答える