TinyMCEをHTML入力画面に組み込む方法

※Web開発

2024.09.24

TinyMCEは、Webページにリッチテキストエディタ機能を追加するための強力なJavaScriptライブラリです。HTML入力画面に組み込むことで、ユーザーはより簡単に、そして視覚的に魅力的なコンテンツを作成することができます。

1. TinyMCEのダウンロードと設置

TinyMCE公式サイトから、ご自身のプロジェクトに合ったバージョンをダウンロードします。
ダウンロードしたファイルを、あなたのプロジェクトの静的ファイル（通常はjsフォルダとcssフォルダ）に配置します。

2. HTMLへの組み込み

HTML

<!DOCTYPE html>
<html>
<head>
    <title>TinyMCEを使ったHTML入力画面</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: '#mytextarea'
        });
    </script>
</head>
<bod   y>
    <textarea id="mytexta   rea"></textarea>
</body>
</html>

コードは注意してご使用ください。

CDNを利用する場合: 上記のように、CDNから直接スクリプトを読み込むことができます。
ローカルに設置する場合: ダウンロードしたtinymce.min.jsファイルを<script>タグで指定します。
selectorオプション: tinymce.init()関数で、エディタにする要素のIDを指定します。

3. カスタマイズ（例）

TinyMCEは、非常に多くのカスタマイズオプションを提供しています。例えば、

ツールバーのカスタマイズ: JavaScripttinymce.init({ selector: '#mytextarea', toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist' }); コードは注意してご使用ください。
言語の設定: JavaScripttinymce.init({ selector: '#mytextarea', language: 'ja' // 日本語の場合 }); コードは注意してご使用ください。
その他: フォントサイズ、行間、画像の挿入、リンクの挿入、表の挿入、など、多岐にわたるカスタマイズが可能です。

4. 注意点

APIキー: 商用利用の場合は、TinyMCEの公式サイトでAPIキーを取得する必要があります。
互換性: TinyMCEは、最新のブラウザで最もよく動作します。古いブラウザでは、一部の機能が利用できない場合があります。
セキュリティ: TinyMCEは、クロスサイトスクリプティング (XSS) などのセキュリティリスクを軽減するための対策が施されていますが、適切な入力バリデーションを行う必要があります。