TinyMCEでclass属性を設定する

いろいろ見てくると、tinyMCE で書いた文章を、そのままサイトに適用させるのは、
少々無理があるということが判ってきました。
MUI のような css フレームワークとの整合性を完全に取るのは難しいです。

◆ TinyMCEで class 属性を設定する

それでも、TinyMCE で独自の class 属性 を使う事で、表示を多少カスタマイズし易くすることは出来ます。
tinymce.init() 内の content_css と style_formats を使います。
style_formatsで、独自の class属性 を指定する書式を定義します。
その class属性 が設定されたコンテンツの書式を設定する為の css を content_css で設定します。
これによって、プレビューの時にも同じ css を読み込む事でサイトと tinyMCE の編集内での表示を
出来る限り、同じに見せる事ができます。

ただし、MUI のように JavaScript で制御されるようなフレームワークでは、css ファイルを
読ませただけではうまく動かない場合もあります。
このあたりを明快に解説しているサイトがあまり無いのが残念です。

ここでは、h3 要素を少々飾りを付けて見ましょう。

おしゃれなタイトル

おしゃれなタイトル

編集画面内でもちゃんと表示されているのが判ります。

設定した tinymce.init() の中身です。

    content_css: ['my-styles.css'],
    style_formats: [
            { title: 'タイトル２', block: 'h2', classes: 'my_title' },
            { title: 'タイトル３', block: 'h3', classes: 'my_title' },
            { title: 'タイトル４', block: 'h4', classes: 'my_title' },
            { title: 'タイトル５', block: 'h5', classes: 'my_title' }
        ],

my-style.css は

.my_title {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

« 前頁

次頁 »