web-dev-qa-db-ja.com

javascriptでckeditorのtextareaのtextarea値を取得する

私はJSに関しては学習者であり、多くの助けになったチュートリアルを読むのにかなりの時間を費やしましたが、ユーザーがckeditorテキストエリアに入力しているものを正確に見つける方法を理解するのにまだ問題があります。

私がやろうとしているのは、誰かがテキストエリアに入力したときに、入力したものがページの別の部分のdivに表示されるようにすることです。

私はそれをうまくやっている単純なテキスト入力を持っていますが、テキスト領域がckEditorであるため、同様のコードは機能しません。

私は答えがここにあることを知っています： ckEditor API textarea value しかし、私が何をするつもりなのかを理解するのに十分な知識がありません。誰かが私を助けてくれるとは思いませんか？

私が働いているコードは次のとおりです：

$('#CampaignTitle').bind("propertychange input", function() {
  $('#titleBar').text(this.value);
});

そして

<label for="CampaignTitle">Title</label>
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />

そして

<div id="titleBar" style="max-width:960px; max-height:76px;"></div>
javascriptckeditor
41
Didju Juzphart

ユーザーがckeditorテキストエリアに入力しているものを正確にどのように見つけるかを正確に把握するのにまだ問題があります。

わかりました、これはかなり簡単です。エディターの名前が「editor1」であると仮定すると、その内容とともにアラートが表示されます。

alert(CKEDITOR.instances.editor1.getData());

難しい部分は、ユーザーが入力するタイミングを検出しています。私が知ることができることから、それを実際にサポートすることはありません（そして、私はドキュメントにあまり感心していません）。この記事を参照してください： http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

代わりに、textareaの値で2番目のdivを継続的に更新するタイマーを設定することをお勧めします。

timer = setInterval(updateDiv,100);
function updateDiv(){
    var editorText = CKEDITOR.instances.editor1.getData();
    $('#trackingDiv').html(editorText);
}

これはうまくいくようです。わかりやすくするために、次のようにします。

<textarea id="editor1" name="editor1">This is sample text</textarea>

<div id="trackingDiv" ></div>

<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );

    timer = setInterval(updateDiv,100);
    function updateDiv(){
        var editorText = CKEDITOR.instances.editor1.getData();
        $('#trackingDiv').html(editorText);
    }
</script>
105
Jere

少なくともCKEDITOR 4.4.5の時点では、タイマーを実行するのではなく、エディターのコンテンツに対するすべての変更に対してリスナーを設定できます。

CKEDITOR.on("instanceCreated", function(event) {
    event.editor.on("change", function () {
        $("#trackingDiv").html(event.editor.getData());
    });
});

これはOPには遅すぎる可能性があり、正しい答えとして表示されず、投票も（まだ）ありませんが、将来の読者のために投稿を更新すると思いました。

17
Lindsay

単純に実行する

CKEDITOR.instances[elementId].getData();

エディターに割り当てられた要素の要素id = idを使用します。

9
itzmukeshy7

JQueryに関数を統合できます

jQuery.fn.CKEditorValFor = function( element_id ){
  return CKEDITOR.instances[element_id].getData();
}

ckeditor要素IDをパラメーターとして渡す

var campaign_title_value = $().CKEditorValFor('CampaignTitle');
4
p1nox

まあ。 textareaから値を取得するように求めましたが、この例では入力を使用しています。とにかく、ここに行きます：

$("#CampaignTitle").bind("keyup", function()
{
    $("#titleBar").text($(this).val());
});

本当にテキストエリアが必要な場合は、入力タイプのテキストをこれに変更してください

<textarea id="CampaignTitle"></textarea>

それが役に立てば幸い。

0
Rodrigo Manguinho