webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
①【CKEditor4の導入設置】エラーを回避する本体/プラグインのダウンロード設定方法 [WYSIWYGエディタ CKEditor] eyecatch画像

①【CKEditor4の導入設置】エラーを回避する本体/プラグインのダウンロード設定方法 [WYSIWYGエディタ CKEditor]

rss
 

WYSIWYGエディタ CKEditor4

何かと要望の多いWEBエディタ周り。
WYSIWYGエディタは色々なものが各社から提供されていますが、
高機能でリッチなWEBエディタ「CKEditor」は、多機能でたくさんのプラグイン開発もされているので、よく利用します。
 

CKEditorのエディタ



CKEditor本体やプラグインの導入・設定時にエラーが出ることが多く、
エラーを回避し一番上手くいくCKEditor本体のダウンロード・導入方法を、今回はバージョン4で紹介します。
エラーが出てうまく設置できない場合は、
これまで数多く設置してきた結果、一番うまくいくエラー回避ポイントをあげましたので、参考にしてみてください。

 


 

①【CKEditor4の導入設置】エラーを回避する本体/プラグインのダウンロード設定方法

 

CKEditor本体ダウンロード時のポイント

■エラーが出る場合CDNを利用しない

CKEditor本体を下記のように「CDN利用」しエラーが出る場合(プラグインを追加した際にエラーが出ることも多い)、

<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>

CDNは利用せず、本体をダウンロードして自サーバー内にCKEditor本体を置きエラー回避します。

■パッケージは利用しない

本体のダウンロード時は、パッケージでダウンロードせず「Online Builder」でダウンロードします。
(パッケージの Basic Package・Standard Package・Full Packageは利用しない)

■Optimizedバージョンを利用しない

「Online Builder」でのCKEditor本体ダウンロード時、
「Optimized」(最適化)バージョンを利用しエラーが出る場合、「Source (Big N’Slow)」バージョンをダウンロードし利用します。

■追加プラグインは後で追加し、本体設置の段階ではデフォルトプラグインのままダウンロードする

「Online Builder」でのCKEditor本体ダウンロード時、
デフォルトのプラグイン以外にプラグインを追加してダウンロードすると、エラーが出た際にどのプラグインでエラーが出ているのか、判別しにくいです。
一旦デフォルトプラグインのまま、「Online Builder」の「Standard」をダウンロード・設置し、動作確認した後から希望のプラグインを追加していきます。

 

 

CKEditor本体ダウンロード手順

下記はダウンロードの手順です。

CKEditor 4 公式HP ダウンロードページ 

まず、CKEditor公式HPの上記ダウンロードページにアクセスし、「Customize」「Online Builder」を選択します。

  1.  Choose preset で、「Standard」を選択
  2.  Select your plugins and skin で、プラグインはとりあえずデフォルトのままで、変更しません。(後でPluginを追加していく)
  3.  Available skins はお好きなスキンテーマを選択(後で変更可能)
  4.  Finalize and download で「Japanese」を追加(日本語化)
  5.  最後に利用規約の同意にチェックを入れ、「Source (Big N’Slow)」をクリックしてダウンロード

※5で、「Optimized」(最適化バージョン)を利用するとエラーが発生することが結構あります。その場合は「Source (Big N’Slow)」を利用します。
 

動作確認済みの本体(standard)

上記方法でダウンロードし(2018年11月時点)、問題なく動作したCKEditor本体(standard)を上げておきますので、ご利用ください。
CKEditor 4.11.1 standard source zip 

 


 

CKEditor本体の設置・導入

CKEditor本体フォルダを設置

まず、自サーバー内に、ダウンロードしたCKEditorフォルダを任意の場所にアップロード設置します。
 

CKEditorを利用するページで導入・設定

CKEditorを利用するページの<head>部で、設置した「ckeditor.js」ファイルを読込み参照します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">

    <!-- CKEditor4 -->
    <script src="/CKEditorの設置ディレクトリパス/ckeditor/ckeditor.js"></script>
  </head>

 

<body>内のformのテキストエリアを次のように設定します。

  <body>
    <form>
      <textarea name="article" id="ckeditor" rows="10" cols="80"></textarea>
      <script>
        CKEDITOR.replace( 'ckeditor' );
      </script>
    </form>
  </body>


ここで動作確認ができたら、
基本設定をしたり希望のプラグインを追加したり、CKEditorディレクトリ内の「config.js」を編集していきます。
 

カスタマイズした「config.js」を別名で保存し利用したい場合

もし「config.js」をカスタマイズしリネームしたい場合、
例:「config_customized.js」
上記<body>内のformテキストエリアは、下記のように設定し「config.js」を置き換えて読み込ませます。

  <body>
    <form>
      <textarea name="article" id="ckeditor" rows="10" cols="80"></textarea>
      <script>
        CKEDITOR.replace( 'ckeditor', {
          customConfig: '/CKEditorの設置ディレクトリパス/ckeditor/config_customized.js'
        });
      </script>
    </form>
  </body>




次回から、config.jsの基本設定/カスタマイズの方法や、各プラグインの導入設定方法/カスタマイズ方法も記事にしていこうと思います。


ページの先頭へ

rss
1件目 (1件中)