Tinymceを使いたかったがライセンス（LGPL）がよく分からないし、
自分の勝手な理解だと製品に組み込んで使う場合、ソースコード公開しないといけないようだ。
今回の案件の場合、ソース公開は厳しかったのでTinymceは断念し、
CKEditorのライセンスを購入してカスタムしていこうと思う。
日本語ドキュメントが無い？ので、自分の備忘録としてメモ。
ドキュメント
docs.ckeditor.com/#!/api/CKEDITOR.editor
HTMLベース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>A Simple Page with CKEditor</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="./ckeditor.js"></script> </head> <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"> CKエディターの内容 </textarea> <script> CKEDITOR.replace( 'editor1' ); // ここにいろいろ書ける </script> </form> </body> </html> |
CKEditorコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// エディターの内容取得 CKEDITOR.instances.editor1.getData(); // エディターの内容取得（コード内の改行を削除した状態） CKEDITOR.instances.editor1.getSnapshot(); // エディターの内容を置き換える CKEDITOR.instances.editor1.setData('<p>ほげほげ</p>' , 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('<p>あいうえお</p>'); // 選択範囲、またはカーソル位置に任意の文字列を挿入 CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' ); // エディターの横幅と高さを指定してリサイズする CKEDITOR.instances.editor1.resize( 900, 300); |
