TinyMCEでclassを設定する②

class 指定が簡単にできそうなので、いろいろ試してみました。

まず、「div で好きな書式が出来るかな？」と思ってやってみましたが、
結果は、

挿入、表示は出来るが、編集が出来ない

という結果になりました。
どういうことかと言うと、TinyMCE では div をブロック要素として認識してくれないので、ブロックからキー操作で
抜けられないし、うまく削除も出来ません。
よくよく調べると、どうも div を使う事は TinyMCE では推奨していないようです。
無理やりカスタマイズしてやっている方もいらっしゃるようですが、ここはおとなしく諦めましょう。

こうして使ってみますと、TinyMCE の思想というか考え方が解ってきます。

全ての段組を含むページ全体を作ることまでは考えていない

タグのブロック要素を入れ子にしない

ということのようです。
css を理解していくと、タグに「ブロック要素」と「インライン要素」があり、それぞれ役割が違うことが解ります。
最近は、css を使って、無理やりこれらの役割を入れ替えたりすることが出来るので、区別が曖昧になって混乱します。
特に、div タグは、span との使い分けをしない人が多いようです。

◆ PRE タグを class を使って見栄えを変える

一つ、「囲い枠」を追加して見ることにします。
div タグは使えませんので、pre タグを使います。

注釈ボックスです
重要な内容を強調する時に使用します

block-inline を指定したので、別のブロックを挿入しないとつながってちゃいます。
このあたりは、もう少し考えたいところです。

注釈ボックスで気を付ける点について書きます

注釈ボックスで 重要でないコメントです。

いちおうソースを載せます。JavaScript は、

style_formats: [
    { title: '注釈(赤)', block: 'pre', classes: 'my_box_pink' },
    { title: '注釈(黄)', block: 'pre', classes: 'my_box_yellow' },
    { title: '注釈(青)', block: 'pre', classes: 'my_box_blue' }
],

CSSは、

.my_box_pink {
  padding: 0.5em;
  background: #FEDFE1;
  display: inline-block;
  border-radius: 8px;
  border: solid #7E5D61;
  margin: 0 0 0 30px;
}

.my_box_blue {
  padding: 0.5em;
  background: #f4faff;
  display: inline-block;
  border-radius: 8px;
  border: solid #b4cadf;
  margin: 0 0 0 30px ;
}

.my_box_yellow {
  padding: 0.5em;
  background: #ffffd0;
  display: inline-block;
  border-radius: 8px;
  border: solid #dddd80;
  margin: 0 0 0 30px;
}

« 前頁

次頁 »