ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」

単なる入力機能だけではなく、入力した文字を選択して太字にしたり色を変えたりリンクを付けたりなどの機能があるエディタのことをWYSIWYGエディタと呼びます。これは「What You See Is What You Get（見た通りのものが得られる）」の略で、エディタ上で見た通りに文章を編集できます。

WYSIWYGエディタを実装するときは、すでに有名な「TinyMCE」を使うと非常に簡単に実装できます。

TinyMCE

TinyMCE

The Most Advanced WYSIWYG HTML Editor | TinyMCE

https://www.tiny.cloud/tinymce/

Download TinyMCE for free, the most advanced WYSIWYG HTML editor designed to simplify website content creation.

TinyMCEはJavaScriptで簡単にリッチテキストエディタを実装できるJavaScriptライブラリです。

• 機能が豊富でカスタマイズも柔軟に可能
  • ツールバーの追加
  • ボタンの入れ替えや削除
  • 独自のボタンを追加
• WordPressにも採用されている

公式サイトから「Download TinyMCE SDK Now」をクリックしてダウンロードして、中に入っているJavaScriptファイルを読み込めば使えます。
（一緒に入っている「plugins」「langs」「themes」などのフォルダも必要です）

基本的な使い方

TinyMCEはtextareaに対してJavaScriptを適用して使います。

<textarea id="tinymce"></textarea>

「tinymce.init」で設定の初期化ができて、「selector」でtextareaのidやclassを指定します。

tinymce.init({
  selector: '#tinymce',
});

これでWYSIWYGエディタが表示されます。

日本語化

TinyMCE

Language Packages | Trusted Rich Text Editor | TinyMCE

https://www.tiny.cloud/get-tiny/language-packages/

TinyMCE Language Packages

公式サイトの「Language Packages」ページから日本語のフォルダをダウンロードして「ja.js」を「js/tinymce/」にある「langs」へ移動します。

あとはtinymce.initで「language」に「ja」を指定します。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
});

これで日本語化されました。

初期入力内容を設定

<textarea>の中にHTMLを入力すれば、初期入力内容として表示されます。

<textarea id="tinymce">
  <p>ここに入力したHTMLは<strong>初期入力内容</strong>として表示されます。</p>
</textarea>

最低限のエディタのカスタマイズ

エディタの横幅や高さの設定

「width」や「height」に数値を指定すると、エディタの横幅や高さを指定できます。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  width: 680,
  height: 420
});

他にも、エディタの右下をドラッグして拡大縮小するときに、最小のサイズを指定する「min_width」「min_height」や最大のサイズを指定する「max_width」「max_height」もあります。

ツールバーの変更

「toolbar」ではツールバーに表示するツールを指定します。
「|」で区切りアイコンを表示できて、半角スペースで区切りながら表示したいツールを左から順に書いていきます。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  toolbar: 'undo redo | bold italic link | image table',
  plugins: "image link table",
});

www.tiny.cloud

Toolbar Buttons Available for TinyMCE | TinyMCE Documentation

https://www.tiny.cloud/docs/tinymce/6/available-toolbar-buttons/

Complete list of toolbar buttons available for the toolbar and quick toolbars.

ツールの種類と名前は、公式サイトの「Toolbar Buttons」で確認できます。
また、一部のツールは「plugins」に指定してプラグインファイルを読み込む必要があります。

クレジットの非表示

「branding」を「false」にすると、下に表示される「Powered by TinyMCE」というクレジットが非表示になります。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  branding: false
});

CSSの読み込み

「content_css」にパスを指定すると、CSSの読み込みができます。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  content_css: '/assets/css/editor.css'
});

これで指定したCSSファイル内に、見出しなどのスタイルを指定しておくとそれが適用されます。