CKEditorは多くのユーザーを使うWYSIWYG（What You See Is What You Get）エディタです。使いやすいし、多くの機能し、十分なドキュメントです。
会社を使っているリストは以下のリンクです。例：IBM、Orcale、 Adobe。。。
http://ckeditor.com/about/who-is-using-ckeditor
CKEditorはフリーソフトで、このリンクをダウンロードできます。
パッケージとCDNリンクを選べます。Internetでパッケージのカスタマイズドキュメントが多いですから、このポストはCDNリンクから、カスタマイズCKEditorの一つのアプローチを説明します。
このリンクは次のようなもの:
cdn.ckeditor.com/4.5.7/standard/ckeditor.js
1. カスタマイズCSS
動作しているとき, CKEditorはiframeを作って、この中で全てインタラクティブを起こっています。だから、WebsiteのCSSを使えるために、CSSパスはCKEditorにインポートすることが必要です。そのことを実行するために、CKEditorのcontentsCssロパティを変更します。
例えば、CKEditorの内容にBootstrapを使いたいです。
config.contentsCss = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
ローカルパスも使うことができます。
しかし、デフォルトのCKEditorはいくつかのelement, attribute, style, classを実行できない。ロック解除が必要です。
一番簡単な方は
config.allowedContent = true；
ですが、時々、リミットelement, attribute, style, classがあって、以下がいいです。
allowedContent: {
p: {
styles: 'text-align'
},
}
他のは同じです。
2.Javascript を実行する
CSS見たいで、デフォルトは外のjavascriptを実行できない。
わかりやすいために、この例の解決する方を説明します。
例はマウスのドラッグとドロップでiframeをリサイズします。
iframeがなったら、その問題は簡単だと思います。
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
});
</script>
<div id="resizable" class="ui-widget-content"> <iframe src=" /> </div>
でも、CKEditor中で、そのjavascript functioinを実行できない。どうすればいいですか。。。
解決する方はCKEditorのプラグインを作ります。
CKEDITOR.plugins.add(PLUGIN_NAME, {
onLoad: function() {
//code
}
init: function(){
//code
}
});
onLoad と init functionの中で、javascript code を書きます。
...
init: function(){
$("#resizable").resizable({ helper: "ui-resizable-helper" });
}
...
今、javascriptはまだ実行できない。CKEditorにプラグインをインポートすることが必要です。
CKEDITOR.config.extraPlugins = PLUGIN_NAME;
他のCKEditorのインタラクティブfunctionも供給します。
例：editor.on(click, select, doubleclick,..)
editor.on( 'doubleclick', function( evt ) {
var element = evt.data.element;
//code
}, null, null, 100000) ;