[HTML] リッチなWYSIWYGエディタ「CKEditor」で貧相なWYSIWYGエディタを表示する

WYSIWYGエディタ「CKEditor」を使えばとってもリッチなテキスト編集ができます。
( CKEditor の表示は 前編 をご覧ください。)

CKEditorFull

いや〜、リッチですね。本当に素晴らしい。
しかし、私が求めているのはこう。

CKEditorToolBar3

いや〜、貧相ですね。せっかくのリッチさが台無し。
しかし、ユーザが欲するのはこのテキスト編集なんだから仕方ありません。

では、とってもリッチな CKEditor のツールバーをカスタマイズしてとことん貧相にしていきましょう。

CKEditor の設定

設定できるプロパティは CKEditor Documentation の “config” タブに記載されています。
設定方法は2通り(多分)です。都合のいい方法でどうぞ。

設定ファイルを編集する

“config.js” というファイルを直接編集します。
CKEditor のリソースを編集しないといけないので、リンクではなくダウンロードして使用しましょう。

config.js は下記のようになっています。

function 内で、config のプロパティを設定します。
Full Package では上記の通り何も設定されていないんですが、Standard や Basic ではいろいろと設定されています。

ちなみに、私が Full Package を使うのは文字色が Full しか入っていないからです。使いたい機能が揃っていれば Standard や Basic の方が小さくていいんですけどね。

JavaScript で上書きする

CKEditor のリソースを編集しなくても JavaScript で設定を上書きすることもできます。

CKEDITOR.replace に 要素の id と上書きする設定を渡します。
config.js の設定(コメントになってるけど)を入れてみました。

以降の設定は config.js を編集する方法で記述しています。

ツールボタンの設定

いるボタンだけを表示

“config.toolbar” を設定します。

ボタンの名前を、グループ単位で配列にまとめて記述します。
グループとグループの間に “/” を入れると改行します。ボタンとボタンの間に “-” を入れると区切り線が表示されます。

CKEditorToolBar1

同じグループにした TextColor と FontSize が離れてしまいました。リスト形式のボタンは同じグループにしても表示上は別グループになってしまうようです。

いらないボタンを削除

“config.removeButtons” を設定します。

カンマで区切って複数設定できます。
空白を入れてはいけないようです。カンマの後に空白を入れたくなるけどくっつけて入力します。

CKEditorToolBar2

いるボタンで表示したボタン達が消えました。

では予定通り貧相に

CKEditorToolBar3

ってな具合で、予定通りに貧相な仕上がりになりました!

おまけで、ボタンの名前と収納パッケージ

文字色は “TextColor” なんですが CSS っぽく “Color” としててダメだったり、Standard Package を使っててダメだったり、いらぬ苦労をしてしまったのでパッケージに収納されているボタンの名前を記載します。

CKEditor 4.5.8 にて調査しました。
Full Package > Standard Package > Basic Package となります。

CKEditorToolButton1
Name Package
Source Standard
NewPage Full
DocProps Full
Preview Full
Print Full
Templates Full
CKEditorToolButton2
Name Package
Cut Basic
Copy Basic
Paste Basic
PasteText Standard
PasteFromWord Standard
Undo Basic
Redo Basic
CKEditorToolButton3
Name Package
Find Full
Replace Full
SelectAll Full
Scayt Standard
CKEditorToolButton4
Name Package
Form Full
Checkbox Full
Radio Full
TextField Full
Textarea Full
Select Full
Button Full
ImageButton Full
HiddenField Full
CKEditorToolButton5
Name Package
Bold Basic
Italic Basic
Underline Basic
Strike Basic
Subscript Basic
Superscript Basic
RemoveFormat Standard
CKEditorToolButton6
Name Package
NumberedList Basic
BulletedList Basic
Outdent Basic
Indent Basic
Blockquote Standard
CreateDiv Full
JustifyLeft Full
JustifyCenter Full
JustifyRight Full
JustifyBlock Full
BidiLtr Full
BidiRtl Full
Language Full
CKEditorToolButton7
Name Package
Link Basic
Unlink Basic
Anchor Basic
CKEditorToolButton8
Name Package
Image Standard
Flash Full
Table Standard
HorizontalRule Standard
SpecialChar Standard
Smiley Full
PageBreak Full
Iframe Full
CKEditorToolButton9
Name Package
Styles Standard
Format Standard
Font Full
FontSize Full
CKEditorToolButton10
Name Package
TextColor Full
BGColor Full
CKEditorToolButton11
Name Package
Maximize Standard
ShowBlocks Full
CKEditorToolButton12
Name Package
About Basic
まーや
About まーや (34 Articles)
画像変換サービスPictureFitterを担当しています。 ネコ大好きのアンドロイダーです。
Contact: Twitter

1 Comment on [HTML] リッチなWYSIWYGエディタ「CKEditor」で貧相なWYSIWYGエディタを表示する

  1. なたでー // 2016/08/04 at 16:08 // 返信

    まったく同じようなことをやろうとしてて詰まってたんですが、ここにたどり着いて攻略することができました。助かりました。

なたでー にコメントする コメントをキャンセル

Your email address will not be published.

*



Top