WEB制作 - 2018-09-05 05:58:00

TinyMCEで独自のスタイルをボックス要素に与える方法

ブログを書いていると、他の文章とは区別したり、メリハリをつけたいと思ったので、
TinyMCEをいじって、ヴィジュアルエディタで簡単にできるようにした。

TinyMCEの追加設定

tinymce.init({
style_formats: [
  {title: 'Area01', block: 'p', classes:'area01'},
  {title: 'Area Tag01', block: 'p', classes:'area_tag01'},
]
});

TinyMCEの設定に上記を追記すると、エディタの「書式」でカンタンに選べるようになる!
今回は2つのクラスを作ってみた。上の「見出し」と「ソースコード」の部分が今回作ったスタイル。

あとは、スタイルシートに「.area01」「.area_tag01」のスタイルを書けばOK。
何気に面倒だと思って敬遠してたけど、作って使ってみたら、これはいい!
記事の見た目も良くなるし、サクッと作れて気分がいい!

ちなみにこのブログの現時点でのTinyMCEの設定はコレ!

<script>
tinymce.init({
selector: "#tinymce",
language:"ja",
editor_encoding: "raw",
content_css:"css/tinymce.css",
plugins:"link code table image imagetools jbimages textcolor preview media hr lists anchor autolink pagebreak",
menubar:false,
style_formats: [
  {title: 'Area01', block: 'p', classes:'area01'},
  {title: 'Area Tag01', block: 'p', classes:'area_tag01'},
],
toolbar:["formatselect styleselect undo redo | fontsizeselect forecolor bold italic | alignleft aligncenter alignright alignjustify |  hr link openlink numlist bullist | anchor",
"image jbimages | media | blockquote pre | table tablecellprops tablemergecells tablesplitcells tablerowprops | code | preview pagebreak"],
valid_elements : "*[*]",
extended_valid_elements : "*[*]",
verify_html:false
});
</script>

TOP
最新記事

操作説明 2018-12-14 23:12:00

あー。やっと終わった。とある商品10万点から、とあるネットショップにどれが登録されてないかを調べる作業!その前の作業でデータを比較して該当す ...

read more ...

操作説明 2018-12-14 12:02:00

商品データなどを登録、編集したい時などに、100行以上あるようなデータに一括で同じ値を入力したい時がある。うちの場合は、商品データが10万点 ...

read more ...

WEB制作 2018-12-05 23:41:00

印刷物として作ったファイルをPDFにして、サイトでダウンロードしてもらうとか、PCが苦手な人向けにダウンロードして、FAXや郵送してもらえる ...

read more ...

WEB制作 2018-12-05 22:37:00

たまーにShift_JISで書かれたウェブサイトを更新する時があって、Sublime Text で文字化けするんで、Dreamweaverで ...

read more ...

WEB制作 2018-12-03 10:43:00

高糖度のミニトマトを作っているアグリッシュのスマホサイトで、divにかけてある白い透過が反映されない問題。PCでは反映されているし、デベロッ ...

read more ...