公式ドキュメントよりも詳しいTinyMCEの使い方（基本編）

oxy

6年 ago

サンプルとデモページで実際の動作を通して学ぶTinyMCEの設定方法

以前の投稿「PukiWikiをビジュアルエディタ（TinyMCE）で編集できるプラグインを作成」で、TinyMCEについて学びました。その際の知見をフィードバックできればと思い、まとめを作りました。

「はじめてTinyMCEを使う」「TinyMCEをとことんまでカスタマイズしたい」といった方々にお役に立てたら幸いです。

TinyMCEとは

TinyMCEとはリッチエディタの一種です。
リッチエディタとはざっくり言えば実際の見た目と同じ画面で編集できるエディタのことです。モニター画面と印刷結果を一致させるために使われたWYSIWYG（ウィジウィグ）が有名です。html用途ではTinyMCEの他にCLEditorもよく知られています。

TinyMCEはHTML用のリッチエディタで、HTMLタグを打つこと無く装飾されたWebページを作ることができます。
ライセンスがLGPLのためオープンソースのCMSと相性が良く、JavaScriptベースで特別なライブラリが必要ありません。このような理由からWordPressやEVERNOTE、Linked inといった大手でも採用されるなど、多くの実績があります。
WordPressでいうと、編集画面にあるビジュアルエディタがTinyMCEです。

TinyMCEは公式ドキュメントが充実しています。
Examples & Demosのページを見てもらえば分かりますが、様々な使用例も掲載されています。
しかし機能を箇条書きにしたドキュメントなので、初めて利用する方にとってわかりやすいとは言えません。
そこで、このページでは公式ドキュメントを踏襲しつつ、チュートリアル風に、導入方法からボタンを追加するといった高度なカスタマイズまで順を追って解説します。

TinyMCEのダウンロード

まずはTinyMCEのダウンロードページから最新版（2018年2月現在はtinymce_4.7.6.zip）をダウンロードしてください。

最も簡単なTinyMCEの導入方法

テスト用に「test.html」を作成し、ダウンロードページに記載されているサンプルを拝借して動作テストを行います。

<!DOCTYPE html>
<html>
<head>
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
  <textarea>Next, start a free trial!</textarea>
</body>
</html>

変更したのはjavaScriptへのリンクだけです。
クラウドのものから「js/tinymce/tinymce.min.js」へ変更。
合わせて、先程ダウンロードした「tinymce_4.7.6.zip」を解凍し「js」フォルダを「test.html」と同じ階層に保存します。

あとはブラウザで開くだけです。

デモ01ページ

簡単に仕組みを解説すると、tinymce.initのselectorでtextareaを指定。selectorでは「textarea.hoge」といった具合にCSSセレクタで指定することができます。
textareaの部分に記述されているテキストは、サンプルにある通り、デフォルトの入力値になります。

エディタの各部名称は以下のとおりです。

解説を進めるにあたり理解が欠かせないため、覚えておいてください。

TinyMCEを日本語に対応させる方法

このままでは英語なので、日本語化します。
公式のLanguage Packagesページで日本語用ファイルをダウンロードします。

解答したlangsフォルダの「ja.js」を「js/tinymce/」にある「langsフォルダ」へ移動します。
つづいてtinymce.initにlanguage: “ja”という項目を追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>tinymce.init({
	selector: "textarea",
	language: "ja" // 言語 = 日本語
  });</script>
</head>
<body>
  <textarea>Next, start a free trial!</textarea>
</body>
</html>

これで以下の通り日本語化できます。

日本語化したデモ02ページ

エディタの外観を変更する方法

外観を変更する方法は公式のEditor Appearanceページで解説されています。
チュートリアルが用意されていないためこのページを通してTinyMCEのカスタマイズについて学んでいきます。

brandingというオプションを例に公式ドキュメントの見方を解説します。
この項目はエディタの下部に表示されている「Powered by TinyMCE」というクレジットを削除するオプションです。

解説にある「Type」はtinymce.initで指定する項目です。
「Default Value」はそのまま初期値。
「Possible Values」は入力可能な値です。
「Example」でサンプルも表示されているのでわかりやすいですね。
では上のサンプルを元に、テストしてみます。

tinymce.init({
  selector: "textarea",
  language: "ja", // 言語 = 日本語
  branding: false // クレジットの削除
});

javaScriptに慣れている方は問題ないと思いますが、理論値（true, false）はクォーテーションで囲まないようにしてください。
また、複数項目がある場合でも最後の項目にカンマ（,）は必要ありません。

クレジットを削除したデモ03ページ

「Powered by TinyMCE」というクレジットが消えています。
公式ドキュメントによると、特にクレジットは無くてもかまわないとのことです。

custom_ui_selector

続いてcustom_ui_selectorを編集してみます。
解説をざっくり翻訳します。いわく「このオプションは編集者がエディタの一部として扱う要素を指定できる。ここで指定した要素はblurイベントが発生しない。」とのこと。
この説明とサンプルを見てすぐに動作を想像できる人はほとんどいないと思います。
わざわざこの項目を紹介したのは公式ドキュメントの癖と学び方を理解していただくためです。

まず「blurイベント」という言葉が謎だと思います。そこでドキュメント内で「blurイベント」について検索を行います。
検索窓に「blur」と入力すると候補が表示されるためイベントの項目をクリックします。

するとブラーのイベントについての解説が表示されます。

以下の項目を追加するとblurイベントが実行されるとのこと。

tinymce.init({
    selector: "textarea",
    language: "ja", // 言語 = 日本語
    branding: false, // クレジットの削除
    init_instance_callback: function (editor) {
      editor.on('blur', function (e) {
        console.log('Editor was blurred!');
      });
    }
});

実際にテストしてみます。

blurイベントのテストデモ04ページ

Chromeで右クリックから「検証」を選び「Console」タブを開きます。
続いて一度エディタをクリックした後にエディタ以外の要素をクリックしてください。
するとコンソールログに以下のように出力されます。

これがblurイベントです。
このイベントを利用すればエディタをクリックした際にテキストの要素を全選択したり、特定のウィンドウを表示したりと便利なイベントですね。
このイベントの対となる、Focusイベントも存在します。

では本題のcustom_ui_selectorについてです。

custom_ui_selectorを指定した要素をクリックした際はblurイベントが実行されません。実際にテストしてみます。

<!DOCTYPE html>
<html>
<head>
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>tinymce.init({
    selector: "textarea",
    language: "ja", // 言語 = 日本語
    branding: false, // クレジットの削除
    custom_ui_selector: '.my-custom-button',
    init_instance_callback: function (editor) {
      editor.on('blur', function (e) {
        console.log('Editor was blurred!');
      });
    }
  });
  </script>
</head>
<body>
  <textarea>Next, start a free trial!</textarea>
  <button class="my-custom-button">Button</button>
</body>
</html>

custom_ui_selectorのテストデモ05ページ

上と同じようにConsoleタブで見てみます。エディタをクリックした後、Buttonをクリックしてみてください。
blurイベントが実行されていないことを確認していただけると思います。

Button以外をクリックしてみてください。今度はブラーイベントが実行されます。
用途としては複数の入力項目からなる投稿画面で編集領域から外れた場合だけ実行したいイベントを登録するといった用途でしょうか。

TinyMCEのドキュメントは名前順に箇条書きになっているだけなので、説明を読んだだけでは理解できないものが多く存在します。サンプルやデモもそのままでは動作しないものが散見されます。そのためこの解説でしたように、わからない事があったらドキュメント内を検索してみてください。

では他にどのようなオプションがあるのか、ざっくり解説していきます。

elementpath

エディター下部に表示されるステータスバーのパス表示を制御。
（入力した要素にフォーカスした際に表示される<p>などの表示）

tinymce.init({
  selector: "textarea",
  language: "ja", // 言語 = 日本語
  elementpath: false
});

elementpathのテストデモ06ページ

event_root

inlineモード時にイベントルートとして使用される要素のCSSセレクタを指定できる。
event_rootを解説するにあたりinlineモードの理解が欠かせないので解説します。inlineモードとはエディタに文章を入力するタイプではなく、通常の文章を編集するモードです。

以下のように使用します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>
    tinymce.init({
      selector: "div.editable",
      inline: true,
	});
  </script>
</head>
<body>

<div class="editable">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい</p>
</div>

</body>
</html>

inlineモードのテストデモ07ページ

デモページの文章をクリックしてみてください。ツールバーが表示され、通常の段落が編集可能になります。

上の例ではselectorで指定していたdiv.editableという要素が全て編集可能になります。ここで本題のevent_rootの使い方です。
以下のように指定します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>tinymce.init({
    selector: "div.editable",
    inline: true,
	event_root: '.root'
	});
  </script>
</head>
<body>

<div class="root">
<div class="editable">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい</p>
</div>
</div>

<div class="editable">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい</p>
</div>

</body>
</html>

event_rootのテストデモ08ページ

2つの段落がありますが、どちらもeditableというクラスが指定してあります。ただし、上の段落にはrootというクラスを指定しています。
event_rootで.rootとしているため、上の段落のみ編集することができます。

fixed_toolbar_container

inlineモード時にツールバーを表示する場所を指定します。

<!DOCTYPE html>
<html>
<head>
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>tinymce.init({
    selector: "div.editable",
    inline: true,
	fixed_toolbar_container: '.mytoolbar'
	});
  </script>
</head>
<body>

<div class="editable">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい</p>
</div>

<div class="mytoolbar" style="background-color: #CCC;">Toolbar</div>

</body>
</html>

fixed_toolbar_containerのテストデモ09ページ

文字の部分をクリックすると「Toolbar」と書かれたdiv要素の部分にツールバーが表示されます。

height

エディタを開いた状態のデフォルトの高さを指定します。（ピクセル）
指定した高さは編集可能領域の高さで、メニューやステータスバーなどの高さは含まれていません。

tinymce.init({
  selector: "textarea",
  height : 300
});

heightのテストデモ10ページ

inline

上記の例に出てきました。解説が前後していますが、エディタの中身を編集するというタイプではなく、指定した通常のテキストを編集することができます。

tinymce.init({
  selector: "textarea",
  inline: true
});

上のデモ09ページをご覧ください

insert_button_items

ツールバーにインサートタイプのボタンを追加する項目です。インサートタイプはプラスマークをクリックするとプルダウンメニューが開くタイプのボタンです。
この項目に指定できるのはEditor Control Identifiersページにある、Menu controlsの項目のみです。

唐突にEditor Control Identifiersという言葉が出てきました。しかもこの項目のサンプルはそのまま記述しただけでは動作しません。一旦エディターコントロール識別子の解説をします。

識別子の項目は以下のようになっています。

「Control」はそのまま項目名です。
「Core/Plugin」に「core」という項目があります。これはTinyMCEの本体にはじめから備わっている機能です。この項目はinsert_button_itemsに記述すればすぐに使えます。
問題は下の方にスクロールすると現れるlinkやimageといった青いリンク文字で書かれた項目です。これらの要素はそのまま利用することができません。「plugins」という項目で指定する必要があります。

tinymce.init({
  selector: "textarea",
  toolbar: 'insert',
  plugins: "image link table",
  insert_button_items: 'image link | inserttable'
});

pluginsとinsert_button_itemsはともにスペース区切りで複数の項目を指定します。insert_button_itemsのパイプは区切り線です。ちなみにinserttableはtableプラグインの一部なので、pluginsではtableを指定しています。

insert_button_itemsのテストデモ11ページ

他にもexternal_pluginsというオプションを利用すれば外部（別サーバ）のプラグインを指定することもできます。
こちらは{}で囲んで、プラグイン名とURLを記述する形式です。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  external_plugins: {
    'testing': 'http://www.testing.com/plugin.min.js',
    'maths': 'http://www.maths.com/plugin.min.js'
  }
});

insert_toolbar

inliteというテーマ利用時に使用するツールバーを変更することができます。

テーマという新しい概念が出ました。テーマはTinyMCEで用意している様々な用途に合わせたデザインのセットです。inliteテーマはinlineモード時に利用する、簡易的なツールバーです。

試しに以下の設定でインライトテーマのツールバーを表示してみます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="js/tinymce/tinymce.min.js"></script>
  <script>
    tinymce.init({
      selector: 'div.tinymce',
      theme: 'inlite',
      inline: true
    });
  </script>
</head>
<body>
	<div class="tinymce">
	  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい</p>
	</div>
</body>
</html>

inliteのテストデモ12ページ

文章を選択すると以下のようなツールがでます。

続いて改行すると別のツールが出ます。

この改行して出るツールがinsert_toolbarで設定する項目です。
画像にあるように、デフォルトは画像を挿入と、テーブルを挿入するツールバーです。今回はこれにリンクを追加するquicklinkを追加してみます。

tinymce.init({
  selector: "div.tinymce",
  theme: "inlite",
  inline: true,
  insert_toolbar: 'quickimage quicktable quicklink'
});

insert_toolbarのテストデモ13ページ

改行するとクイックリンクが追加されています。

max_height

ユーザーが引き伸ばすことのできる最大サイズの制限。max_widthという横バージョンも存在します。
多くの場合、大きなお世話ですね。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_height: 500
});

max_heightのテストデモ14ページ

エディタの右下をドラッグして下に広げても500px以上は伸びません。

最初の「file:」がメニューに表示する項目。「title」がメニューのラベル。「items」がクリック時に表示されるメニューです。
itemsに複数の項目を登録するにはスペース区切りで、区切り線を入れてグループ化するにはパイプ「｜」を間にはさみます。

公式にある以下のサンプルにはしれっとtableなどを指定していますが、これらはプラグイン要素なので、pluginsで追加しない限り反映されません。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: {title: 'File', items: 'newdocument'},
    edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
    insert: {title: 'Insert', items: 'link media | template hr'},
    view: {title: 'View', items: 'visualaid'},
    format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
    table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
    tools: {title: 'Tools', items: 'spellchecker code'}
  }
});

反映させるには以下のようにする必要があります。
ちなみにtitleに特定の文字を入力すると日本語化が無効になるので注意してください。（対策としては、日本語化ファイルに対応する項目を追加するか、そもそも日本語で登録する）

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  language: "ja", // 言語 = 日本語
  plugins: "table spellchecker code",
  menu: {
    file: {title: 'File', items: 'newdocument'},
    edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
    insert: {title: 'Insert', items: 'link media | template hr'},
    view: {title: 'View', items: 'visualaid'},
    format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
    table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
    tools: {title: 'Tools', items: 'spellchecker code'}
  }
});

menuのテストデモ15ページ

メニューの項目に「表」などが追加されていることを確認してください。

サンプルにはスペルチェックを可能にするspellcheckerという項目がありますが、これは特別な設定が必要です。導入の手順がPHP Spellchecker componentという項目にまとめられています。
PHPのライブラリをインストールしたり、言語に合わせた単語一覧をダウンロードしたりと手間がかかります。ちなにみ日本語は対応していません。（上のデモでは動作しません）

menubar

上で解説したmenuの項目とその表示順を指定できます。
スペース区切りで指定します。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  language: "ja", // 言語 = 日本語
  plugins: "table tools help",
  menubar: 'file edit insert view format table help'
});

デフォルトは「file, edit, view, format」です。
繰り返しになりますがtableなどはpluginsで指定しないと表示されません。

menubarのテストデモ16ページ

menubarは追加する項目だけでなく「menubar: false」とすることで無効にすることも可能です。

menubar無効のテストデモ17ページ

min_height,　min_width

max_heightの最小値版。エディタの右下をドラッグして縮小できる最小値を指定。max_widthは横幅。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_height: 100,
  min_width: 400
});

mobile

モバイル（スマホ等）で読み込んだ際に有効になる設定です。mobileという項目に入れ子状にテーマやプラグイン、ツールバーを指定します。
モバイルの状態で利用できるツールなどは「TinyMCE Mobileのページ」をご覧ください。

公式のサンプルは以下の通り（公式のままだとカンマが抜けていて動作しないので注意）

tinymce.init({
  selector: 'textarea',
  language: "ja", // 言語 = 日本語
  plugins: [ 'code', 'lists' ],
  mobile: {
    theme: 'mobile',
    plugins: [ 'autosave', 'lists', 'autolink' ],
    toolbar: [ 'undo', 'bold', 'italic', 'styleselect' ]
  }
});

mobileのテストデモ18ページ

スマホでアクセスすると以下のようなモバイル用のインターフェイスになります。

preview_styles

プレビューをした際に、装飾の何を有効にするかを指定することができるとのこと。
ただし実際にテストしたところ動作しません。ちなみにサンプルの通り書いてもプレビューすら動きません。

以下のようにすればメニューバーと、ツールバーにプレビューという項目が表示されます。（ただしpreview_styles: falseとしても装飾されて出力されてしまいます）

tinymce.init({
  selector: 'textarea',
  language: "ja", // 言語 = 日本語
  plugins: "preview",
  menubar: "view",
  toolbar: 'undo redo | styleselect | bold italic | link image preview',
  mode: 'textareas',
  preview_styles: false
});

そもそも、わざわざプレビューという機能を付けるのに、装飾を無効にするという状況になることがないのではないでしょうか。

preview_stylesのテストデモ19ページ

removed_menuitems

メニューバーのアイテムを削除する時に利用します。menubarの項目を制御する際に利用します。
以下の例では「元に戻す、やり直す（undo, redo）」を削除します。

tinymce.init({
  selector: 'textarea',
  language: "ja", // 言語 = 日本語
  menubar: 'file edit view format',
  removed_menuitems: 'undo, redo'
});

removed_menuitemsのテストデモ20ページ

resize

ウィンドウ右下にあるサイズ変更用のハンドルを無効にしたり、縦にだけ伸びるようにしたりといった変更が可能です。

Disabling the resize

trueがデフォルトで、縦にだけサイズ変更できます。
falseが無効でサイズ変更が不可になります。
bothは縦横どちらにも変更が可能になります。

以下はbothの例

tinymce.init({
  selector: 'textarea',
  language: "ja", // 言語 = 日本語
  resize: 'both'
});

resize bothのテストデモ21ページ

selection_toolbar

inlineモード時に表示されるツールバーの表示を変更します。
削除すると言った用途ではなく、追加する際に使うもののようです。以下、リンクを追加した場合。（公式のサンプルだと通常のinlineモードと何も変わらない）

tinymce.init({
  selector: 'div.tinymce',
  language: "ja", // 言語 = 日本語
  plugins: "link",
  inline: true,
  selection_toolbar: 'link'
});

selection_toolbarのテストデモ22ページ

skin_url

オリジナルのスキンを使用している場合、スキンファイルへのパスを指定します。
スキンモバイルやinlineといったテーマとは違い、見た目を変えるためのものです。デフォルトはlightgrayというスキンが適応されています。

オリジナルのスキンはTinyMCE – Skin Creatoというサイトで作成することができます。好きな色合いを設定したらダウンロードして、パスを指定するだけで利用できます。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin_url: 'custom'
});

skin_urlのテストデモ23ページ

skin

スキン名を指定します。
オリジナルスキンの詳しい作り方はCreate a Skin for TinyMCEをご覧ください。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin: "charcoal"
});

statusbar

エディタ下にあるステータスバーを非表示にすることができます。
無効にするとサイズを変更したり、パスを表示する機能も無効になります。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  statusbar: false
});

statusbarのテストデモ24ページ

theme, theme_url

themeはテーマを指定することができます。デフォルトのテーマはmodernです。今まで見てきた通り、mobileやinline等を設定できます。
theme_urlはテーマファイルの場所を指定します。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  theme: 'modern',
  theme_url: '/mytheme/mytheme.js'
});

toolbar

ツールバーに表示する項目を選択することができます。
複数記述する場合はスペース区切りで、グループ化するにはパイプ（|）を利用します。

tinymce.init({
  selector: 'textarea',
  language: "ja", // 言語 = 日本語
  plugins: "link image",
  toolbar: 'undo redo | styleselect | bold italic | link image'
});

何度も解説していますが、Toolbar controlsでcoreにない項目はpluginsで指定する必要があります。

falseでツールバーを無効にすることもできます。

toolbar無効のテストデモ25ページ

ツールバーを複数行で表示するには[]で囲んで、二行で記述します。

tinymce.init({
  selector: 'textarea',
  language: "ja", // 言語 = 日本語
  plugins: "link image",
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright'
  ]
});

上のツールバーを複数行記述するタイプの別バージョンもあります。ナンバーを付けて複数行で記述します。

tinymce.init({
  selector: 'textarea',
  language: "ja", // 言語 = 日本語
  plugins: "link image",
  toolbar1: 'undo redo | styleselect | bold italic | link image',
  toolbar2: 'alignleft aligncenter alignright'
});

toolbar(n)のテストデモ26ページ

width

エディターの横の幅を設定します。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  width : 300
});

widthのテストデモ27ページ

以上、TinyMCEの外観に関するカスタマイズの方法でした。
メニューバーやツールバーのカスタマイズといった基本的なものから、テーマや、スキン、プラグインといったTinyMCE独自の実装についても理解していただけたと思います。
目的に合わせて自由にカスタマイズしてみてください。

「次のページ」ではオリジナルボタンの追加や、カスタムウィンドウの追加など、高度なカスタマイズについて解説します。