読者です 読者をやめる 読者になる 読者になる

なか日記

一度きりの人生、楽しく生きよう。

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

ASP.NET JavaScript

先日、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();

おまけ:textareaを置き換える方法

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

 CKEDITOR.replace("Contents");