TinyMCEとは

TinyMCEとはWebページ上で使用できるWYSIWYGエディターである。

無料で使用できるが、CDNから取得して使用する場合は、ドメインの登録が必要。

Next, use our Get Started docs to setup Tiny!

使用方法

Webページへの配置

CDNからロード

API Keyの取得

CDNからロードして使用する場合は事前にAPI Keyの取得が必要である。

API Keyを取得後30日間はプレミアムプラグインが使用できるが、30日を過ぎると警告が表示され、使用できなくなる。

プレミアムプラグイン以外は引き続き使用可能。

こちらからメールアドレスとパスワードを入力する。
メールによるアクティベーションは不要なので、ダミーのアドレスで良い。
名前の入力を行う。ダミーで良い。
電話番号はオプションなので、入力不要である。
使用するドメインを記載する。
API Keyが表示されるのでコピーする。

Webページに記載する

tinymce.min.jsの読み込みと、指定の要素をエディター化するスクリプトの実行が必要。

サンプル

<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=5ium2u7nqp0aa9555m6982ks2gybakgafd9bstsyx9zmznvp"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, use our Get Started docs to setup Tiny!</textarea>
</body>
</html>

参考：https://www.tiny.cloud/get-tiny/

サーバへ配置

ダウンロードぺページから”Self-hosted Releases”と、日本語化したいなら”Language Packs”もダウンロードする。

対象HTML要素の指定

いずれの要素をTinyMCEとして使用するかは次のように指定できる。

要素の種類で指定
tinymce.init({ selector:'textarea' });
IDで指定
tinymce.init({ selector:'#tinymceEditor' });
クラスで指定
tinymce.init({ selector:'.tinymceClass' });

設定

TinyMCEはinit関数の呼び出し時にオプションを指定することで、様々な設定が可能である。

参考：https://www.tiny.cloud/docs/configure/integration-and-setup/

https://www.tiny.cloud/docs/configure/editor-appearance/

ツールバーボタン

使用する機能をボタンとしてツールバーに配置することができる。

書式
toolbar:”(<機能> or |) […]”
バーティカルバー”|”はボタン間に区切りを表示させる

使用できる機能：https://www.tiny.cloud/docs-3x/reference/buttons/

formatselect

書式設定を行う。

具体的には以下の要素から選択することになる。

p
address
pre
h1
h2
h3
h4
h5
h6

上記はデフォルトであり、選択できる要素を設定することが可能。

https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@theme_advanced_blockformats/

bold

太字

italic

イタリック調（斜体）

strikethrough

取り消し線

forecolor

文字色

backcolor

文字の背景色

link

リンク生成

image

画像配置

alignleft

左寄せ

aligncenter

中央寄せ

alignright

右寄せ

alignjustify

全幅表示

numlist

数字リスト

bullist

リスト

outdent

字下げ解除

indent

字下げ

removeformat

書式設定解除

code

HTMLコードの表示

メニューバー

メニューバーが不要であれば無効にできる

menubar: false,

イベント

特定のイベントを捕捉してコールバック関数を呼び出すことができる。

使用できるイベントはこちら。※イベント名は大文字小文字が無視される

イベントの登録はsetupオプションに関数を定義し、その内部でイベント後にとコールバック関数を登録する。下記で言えばeditor.on部分がそれぞれ定義する箇所である。

サンプル

tinymce.init({
	selector: 'textarea',
	setup: function (editor) {
		editor.on('init', function (e) {
			console.log('Editor was initialized.');
		});
	}
});

イベント一覧

イベント名は大文字小文字が無視される

NodeChange

エディター内で何らかの変更がされた時

Change

Undoが可能なレベルで何らかの変更がされた時

API

HTMLを取得する

tinymce.activeEditor.getBody("#testmce").innerHTML

Tips

定番の設定

tinymce.init({
	selector:'#testmce',
	plugins:'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern code',
	toolbar:'formatselect | bold italic strikethrough forecolor backcolor | link image table | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat code',
	menubar: false,
	branding: false
});