前々回の「Ultimate TinyMCEが終了」で書いたように、代わりのエディタプラグインはないものかと、あれこれ探したけど、ピン!(-_☆) とくるのがなくて、結局、CkEditorにした。

2年ぶりぐらい?に触ってみたけど、不安定な気が。。。まぁ、いっかw

で、ついでにビジュアルエディタにテーマファイルのCSS当ててみました。

通常は、

  1. ビジュアルエディタ用のCSS作成
  2. function.phpへのコード追加

のステップが必要ですが、CKeditorはプラグイン設定で指定できます。

CKEditorの[詳細設定]を開き

Capture_2014_12_04_14_46_42_671一番上の Editor CSS で、

Use theme css を選べば、テーマファイルのstyle.cssが適用されます。
※ただし、style.cssの記述内容によっては、エディタでそのまま表示されません。
Capture_2014_12_04_14_34_33_212 Define css を選べば、自分で作成したCSSを適用できます(上記ステップの2番が省略できます)
下にある CSS path で適用するcssの場所を指定します。

ckoptioncssテーマファイルのcssから、hr、p、h1~h6、ol、li、ul、th、tr、td、blockquote あたりのエディタで使うものだけ抜き出したエディタ用cssを作った方が、あっさり出来て簡単かも。
この時、テーマファイルのcssでは #main h1 とか、#content h1 とかになってる場合が多いと思うので、単に h1 {*****}と編集してエディタ用cssを作成してください。

元のCSS

エディタ用CSS

てな具合で。

で、ポン!と指定してやると、これが

 ここはh3

 これはh4

 でもって参照

エディタでは、こういう風に表示されます。(色が違うのは説明省略w)

Capture_2014_12_04_14_10_00_712フォーマットのセレクタも変わります。

Capture_2014_12_04_14_11_24_818

ついでに、SyntaxHighlighter CKEditor Button というプラグインもありました。
注:Auto SyntaxHighlighterも入れないとダメ

インストするとボタンが出現します。

SyntaxHighlighterポチッとな♪(。・・)σ【code】

Capture_2014_12_04_15_21_05_660で、適当に入れてみると

Capture_2014_12_04_14_02_07_1こうなる↓(プラグインは停止したので、キャプ画で)

Capture_2014_12_04_15_30_55_971・・・( ̄  ̄;) うーん コレはイマイチw

以前から使ってる SyntaxHighlighter Evolved のままで行こう^^

まぁ、使う人もほとんどいないと思うので、蛇足と言うことで。。。

 

***** 追記 *****

冒頭で「不安定な気が。。。」と書いたのは、

[下書き保存] または [更新] をクリックするとプレビューされ、クルクル時計が回ったままになる

というものです。この症状が出たときは、保存、上書きされていません。

恐らくプレビューした後、起こる現象?だと思う。

リロードすればクルクルは止まり、正常に保存できる状態になる。。。

注:リロードすれば、保存されてない内容は消えるので、コピペするなどしてからリロードするようにね。

サポートフォーラム見たら、ver4.4.5で解決したいとか書いてるけど。。。インストしたの4.4.5やし(ーー;)

プレビューは使うなってかw

ちょっと面倒だねぇ( ̄~ ̄;) ウーン