CKEditor
Customize
approach

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

More than 3 years have passed since last update.

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

Screen Shot 2016-02-27 at 00.25.57.png

会社を使っているリストは以下のリンクです。例: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

動作しているとき, CKEditoriframeを作って、この中で全てインタラクティブを起こっています。だから、WebsiteのCSSを使えるために、CSSパスはCKEditorにインポートすることが必要です。そのことを実行するために、CKEditorcontentsCssロパティを変更します。

例えば、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) ;