CKEditor のカスタマイズ(文字列の挿入や入力値の取得)

Tinymceを使いたかったがライセンス(LGPL)がよく分からないし、
自分の勝手な理解だと製品に組み込んで使う場合、ソースコード公開しないといけないようだ。

今回の案件の場合、ソース公開は厳しかったのでTinymceは断念し、
CKEditorのライセンスを購入してカスタムしていこうと思う。

日本語ドキュメントが無い?ので、自分の備忘録としてメモ。

ドキュメント
docs.ckeditor.com/#!/api/CKEDITOR.editor

HTMLベース



    
        A Simple Page with CKEditor
		
        
    
    
        

CKEditorコード

// エディターの内容取得
CKEDITOR.instances.editor1.getData();

// エディターの内容取得(コード内の改行を削除した状態)
CKEDITOR.instances.editor1.getSnapshot();

// エディターの内容を置き換える
CKEDITOR.instances.editor1.setData('

ほげほげ

' , function() { // callback... }); // エディターの変更を認識 CKEDITOR.instances.editor1.on('change', function(){ console.log('変更されました'); }); // 変更フラグ(変更されていたらtrueが変えるっぽい) CKEDITOR.instances.editor1.checkDirty() // 変更フラグをリセット(falseに戻す) CKEDITOR.instances.editor1.resetDirty(); //変更フラグをリセット // 選択範囲、またはカーソル位置に任意のHTML文字列を挿入 CKEDITOR.instances.editor1.insertHtml('

あいうえお

'); // 選択範囲、またはカーソル位置に任意の文字列を挿入 CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' ); // エディターの横幅と高さを指定してリサイズする CKEDITOR.instances.editor1.resize( 900, 300);

CKEditorの自作プラグインの作り方

下記参照
docs.ckeditor.com/#!/guide/plugin_sdk_sample_1

よかったらシェアしてね!

この記事を書いた人

目次
閉じる