CKEditor：値を設定したり取得する方法

先日、wysiwygなエディタであるCKEditorを紹介しました。

今回はJavaScriptを使って動的に値を設定・取得する方法を紹介します。

ajaxでWebAPIからデータ取ってきて、その結果をセットする場合等に使用できるはず。

HTMLソース

以下のようなソースで作成されたtextareaがあるとします。

@Html.EditorFor(model => model.Contents,
        new { htmlAttributes = new { @class = "form-control ckeditor" } })

生成されたHTMLはこんな感じ。

<textarea name="Contents" class="form-control ckeditor text-box multi-line" 
    id="Contents" style="display: none; visibility: hidden;"></textarea>

 CKEDITOR.instances.Contents.setData(json.Contents);

CKEDITOR.instances.[idの値].setData('hoge')という風にidの値を使用します。

ちなみに、取得する場合はこんな感じですね。

 CKEDITOR.instances.Contents.getData();

前回はckeditor というクラスを設定しましたが、以下のような方法もあります。

 CKEDITOR.replace("Contents");