Web制作 - 2018-09-05

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>

操作解説 2021-06-17

ここ半年、HomebrewでPHPを更新しようとして、「brew search php@7」としても、 Error: No formula ...


プログラミング 2021-02-17

Laravel8のroutes/web.phpに以下を指定したら、 Target class [App\Http\Controll ...


操作解説 2021-02-07

MacのFinderで隠しファイルを表示するときは、 command + shift + . コマンド、シフト、ドットの同時押しで隠しフ ...


プログラミング 2021-02-04

自分のブログに使っているWYSIWYGで、youtube動画の埋め込みを行うとPタグの入れ子として出力される。これにyoutube動画をレス ...


Web制作 2021-02-02

MacにはPHPがインストールされているので、ターミナルで以下のコマンドを入力。デスクトップに「space」というフォルダのindex.ph ...


ALL
アフィリエイト
Day Records
プログラミング
操作解説
雑記
Web制作
読書レビュー
SNS
忘備録
SEO
アクセス解析