TinyMCEの小ネタ

WordPressに標準搭載されているTinyMCEですが、JSのWYSIWYGなので他のシステムで実装したり、自分で作ったシステムの入力欄で使用する事もあります。

ただまあ、アップ対象のファイルも多いから面倒だな〜と思っていたら、公式でCDN配信を行っていたので、ちょこっと設定変更するのを調べてみました。

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init({
    selector: '#description',
});
</script>

基本はこんな感じで問題無いんですけど、テーマやらちょこっとだけWYSIWYG中のフォントサイズを変更したいときに不便だな〜と思ったので、こんな感じで変更出来ましたということで。

フォントサイズの変更(というかWYSIWYGで表示されている部分へCSSを適用)

<script>
tinymce.init({
    selector: '#description',
    content_style : "body#tinymce {font-size: 14px;}"
});
</script>

こな感じでいけます。
いや、実際に表示するフロント側に併せてCSSも細かく作り込んであるのであれば、

<script>
tinymce.init({
    selector: '#description',
    content_css : "//mydomain/mycontent.css"
});
</script>

こんなんでいけるかなと。

個人的にはCKEditor使うことが多かったけど、お手軽に使いたいのは、これでいいかなと。
因みに自分でこの間使った、お客さん向け最低限だけスタイルいじれる設定はこんな感じで。

<script>
tinymce.init({
    selector: '#description',
    menubar: false,
    toolbar: 'code | bold italic | alignleft aligncenter alignright | outdent indent | link | removeformat',
    plugins: 'code, link, paste',
    "removeformat_selector":"h1, h2, h3, h4, h5, h6, span, div, p, b, strong, em, i",
    paste_as_text: true,
    content_style : "body#tinymce {font-size: 14px}"
});
</script>

paste_as_textのおかげで、HTMLページやWordファイルなんかから、直接コピペされてもテキストで張り付くので、余分なスタイルが削除してくれて嬉しい!

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL