search
LoginSignup
13
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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) ;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
13
Help us understand the problem. What are the problem?