CKEditorの適用方法について解説!!

Web技術

サイト管理人の’kai’です。( `・∀・´)ノヨロシク

今回は、WYSIWYG(What You See Is What You Get)の一つの機能である「CKEditor」というプラグインの適用方法について解説していきます。

この記事の内容を用いると、 CKEditorを用いてシステム作成をする際に適用することが出来ます。

プロパティについて

先ずは、 CKEditorにどういったプロパティが存在しているか、説明していきます。

プロパティ名説明
language言語の設定を行っていきます。(例:’ja’)
extraPluginsCKEditorには、機能拡張用のプラグインが存在しています。
そのプラグインを適用する際に当項目へ追加していきます。
removePluginsCKEditorには、標準で備わっているプラグインが存在しています。
そのプラグインの適用を削除する際に当項目へ追加していきます。
(例:elementspath)
※elementspathは、フッターにデータを表示しているプラグイン。)
uiColorツールバーの背景色の設定を行っていきます。
toolbarCanCollapseツールバーの折り畳みを行えるかどうかの設定を行っていきます。
設定には、True/Falseで行っていきます。
toolbarStartupExpandedツールバーの折り畳みの初期状態の設定を行っていきます。
設定には、True/Falseで行っていきます。(True:折畳まない、False:折畳む)
toolbarLocationツールバーの表示位置の設定を行っていきます。
設定には、top/bottomで行っていきます。 (top:上/bottom:下)
height縦幅の設定を行っていきます。単位は、ピクセルで行っていきます。
width横幅の設定を行っていきます。単位は、ピクセルで行っていきます。
resize_enabled入力エリアのサイズを変更出来るかの設定を行っていきます。
設定には、True/Falseで行っていきます。
enterModeEnterを押した際に追加されるタグの設定を行っていきます。
(1:pタグ、2:brタグ、3:divタグ)
toolbarツールバーのボタンの設定を行っていきます。
“/”を設定することで改行を設定し、”-“を設定することで区切り線を設定します。
ボタンの種類については、以下の記事を参考にしてください。
https://moiraiblog.info/archives/526

適用方法について

それでは、適用方法について説明していきます。説明には、実際のサンプルコードを基に行います。

CKEDITOR.replace('txtEditor', {
     language: 'ja',                     // 言語設定
     extraPlugins: '',                   // プラグインの適用追加
     removePlugins: 'elementspath',      // プラグインの適用削除(elementspath:フッターの表示)
     uiColor: '#EEEEEE',                 // ツールバーの背景色を変更
     toolbarCanCollapse: true,           // ツールバーの折り畳み設定
     toolbarStartupExpanded: true,       // ツールバーの折畳初期状態(True:折畳まない、False:折畳む)
     toolbarLocation: 'top',             // ツールバーの表示位置(top:上、bottom:下)
     height: 300,                        // 縦幅(ピクセル)
     width: 700,                         // 横幅(ピクセル)
     resize_enabled: false,              // 編集エリアのサイズ変更可否
     enterMode: 2,                       // Enter時の設定(1:pタグ、2:brタグ、3:divタグ)
     toolbar: [                          // ツールバーのボタン設定("/"で改行、"-"で区切り線)
         {
             name: 'clipboard'
             , items: [
                 'Cut',                  // 切り取り
                 'Undo',                 // 元に戻す
                 'Redo',                 // やり直す
                 'Copy',                 // コピー
                 'Paste',                // 貼り付け
             ]
         },
         {
             name: 'basicstyles'
             , items: [
                 'Bold',                 // 太字
                 'Italic',               // 斜体
                 'Underline',            // 下線
                 'Strike',               // 打ち消し線
                 'Subscript',            // 下付き
                 'Superscript'           // 上付き
             ]
         },
         {
             name: 'colors'
             , items: [
                 'TextColor',            // 文字色
                 'BGColor'               // 背景色
             ]
         },
         '/',
         {
             name: 'paragraph'
             , items: [
                 'NumberedList',         // 番号付きリスト
                 'BulletedList',         // 番号無しリスト
                 'Outdent',              // インデント解除
                 'Indent',               // インデント
                 'Blockquote',           // ブロック引用文
                 'JustifyLeft',          // 左揃え
                 'JustifyCenter',        // 中央
                 'JustifyRight',         // 右揃え
                 'JustifyBlock',         // 両端揃え
             ]
         },
         {
             name: 'links'
             , items: [
                 'Link',                 // リンクの挿入/編集
                 'Unlink',               // リンクを削除
             ]
         },
         {
             name: 'insert'
             , items: [
                 'Image',                // イメージ
                 'HorizontalRule',       // 水平線
             ]
         },
         '/',
         {
             name: 'styles'
             , items: [
                 'Styles',               // スタイル
                 'Format',               // 段落の書式
                 'Font',                 // フォント
                 'FontSize'              // フォントサイズ
             ]
         },
     ]
 });

まとめ

CKEditorの適用方法についてまとめました。

この内容を用いれば、システムに組み込むことが出来ます。

システム開発をする上での参考となればと思います。