忘れないように記録しとこ

カバの樹

WordPressでお馴染みのリッチテキストエディタ「TinyMCE」を導入する手順

2020年3月6日

完全版を表示する

はじめに

ブラウザで操作できるリッチテキストエディタは、星の数ほど存在します。

しかし、かつてはWordPressに正式採用されて（今はGutenberg）、今でも古株のWordpress使いはこちらを使っているのではないでしょうか？

そんな実績のあるリッチテキストエディタが他にあるでしょうか？いや無い！（決めつけ

今回は、最強のリッチテキストエディタの「TinyMCE」の導入手順をご紹介します。

 

TinyMCEとは

TinyMCEは、最先端のWYSIWYG HTML エディタです。

まるでOffice wordを使用するかのようにWEBページを作成することが可能です。

クラウドにファイルや画像をアップロードして管理するための機能も簡単に使用することが可能です。

 

 

料金プランは？

TinyMCEは、無料で使用することが可能です！

もちろん無料で使うには条件があります。

以下のロゴと帰属の記載が条件になります。

 

ロゴと帰属の要件

  • 「POWERED BY TINY」と記載するか、エディターが読み込まれるたびにすぐに見える場所にTinyロゴを配置します。
  • 「Tiny」という言葉またはTinyロゴには、https://www.tiny.cloudへのハイパーリンクが必要です。
  • 製品属性の場所は次のどちらかです。
    • TinyMCEエディターのステータスバーの右隅にあります。
    • TinyMCEエディターに隣接する、目立たない別の場所。

 

導入手順

まずTinyMCEの公式ページにアクセスします。

https://www.tiny.cloud/

 

ログイン情報を入力

トップに以下の画像のようなフォームがあります。

 

 

ここで、「メールアドレス」と「パスワード」を入力します。

 

アカウント情報を入力

 

入力項目は以下を参考にしてください。

First Name 名前
Last Name 名字
What best describes your role? あなたの役割を最もよく表しているものは何ですか？
What are you looking to use Tiny for? Tinyの使用目的は何ですか？
When would you like to complete your project? プロジェクトをいつ完了しますか？

 

使用するフレームワークを選択

 

TinyMCEは、いろんなフレームワークを使用することができます。

今回は、「Javascript」を選択してください。

 

それぞのフレームワーク毎の設定方法が表示されます。

 

表示されたソースコードを気にせず、「Next: Continue to your domains」をクリックしてください。

 

ドメインを設定する

TinyMCEは、使用できるドメインを設定することでライブラリの要求管理を行います。

ログインアカウントで設定したメールアドレス宛に確認メールが送信されます。

 

 

「Confirm your email address」をクリックしてください。

 

クリックして、しばらく待つとドメイン設定の画面が再び開きます。
ホワイトリストに登録したいドメインを設定します。

 

 

APIキーを取得する

これでようやくAPIキーを取得することができます。

 

TinyMCEを導入する

以下のソースコードの[your apikey]にAPIキーを入力してください。

ソースコード

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/[your apikey]/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea>
    Welcome to your TinyMCE premium trial!
  </textarea>
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'a11ychecker advcode casechange formatpainter linkchecker lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
      toolbar: 'a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table',
      toolbar_drawer: 'floating',
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name'
    });
  </script>
</body>
</html>

これでTinyMCEが使えるようになりました。

 

>>専用ページで確認する

 

さいごに

TinyMCEの導入手順でした。

次回はVue.jsライブラリ版のTinyMCE導入手順を記事にしたいと思います。

 

Vue.jsでTinyMCEを使う

https://www.kabanoki.net/6211/

 

  • B!