カスタマイズCKEditorの一つのアプローチ

CKEditorは多くのユーザーを使うWYSIWYG（What You See Is What You Get）エディタです。使いやすいし、多くの機能し、十分なドキュメントです。

会社を使っているリストは以下のリンクです。例：IBM、Orcale、 Adobe。。。

　 http://ckeditor.com/about/who-is-using-ckeditor

CKEditorはフリーソフトで、このリンクをダウンロードできます。

　 http://ckeditor.com/download

パッケージと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) ;