WYSIWYGエディタ「TinyMCE」を組み込む方法

WYSIWYGエディタ「TinyMCE」を組み込む方法

WYSIWYG(ウィジウィグ)エディタは、MS Wordのように文字のサイズを変更したりすることができるフォームのことをいいます。
ここでは、HTMLにWYSIWYG(ウィジウィグ)エディタの「TinyMCE」を組み込む方法を紹介します。

TinyMCEをダウンロード

公式サイトからダウンロードすることが可能です。
https://www.tiny.cloud/get-tiny/downloads/

本体と日本語パックをダウンロードします。

設置方法

ダウンロードした本体ライブラリのZIPファイルと日本語パックを解凍する。

jsフォルダ内のtinymceフォルダのみを使用する。

langsフォルダに日本語パックを保存する。

指定のディレクトリにtinymceフォルダを保存する。

使用方法

ダウンロードしてきたtinymiceのjsファイルをheadに記述します。
JQueryも記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./tinymce/tinymce.min.js"></script>
TinyMCEの初期設定を記述します。
これにより、TinyMCEのWYSIWYGエディタが表示されます。
<script>
tinymce.init({
  selector: '#comment', //textareaのID名
  theme: 'silver',
  height: 500,
  language: 'ja',
});
</script>

ソースサンプル

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./tinymce/tinymce.min.js"></script>
<title>WYSIWYG</title>
</head>
<body>
<form>
<textarea id="comment" name="comment"></textarea>
</form>
<script>
tinymce.init({
  selector: '#comment',
  theme: 'silver',
  height: 500,
  language: 'ja',
});
</script>
</body>
</html>

その他の設定

PタグではなくてBRタグにする

tinymce.init({
  selector: '#comment',
  theme: 'silver',
  height: 500,
  language: 'ja',
  force_br_newlines : true, // BRにする
  force_p_newlines : false, // pタグでなくす
  forced_root_block : '',    // pタグでなくす
  paste_as_text: true,      // pタグでなくす
});

相対パスに変換されないようにする

tinymce.init({
  selector: '#comment',
  theme: 'silver',
  height: 500,
  language: 'ja',
  relative_urls:false,      // 相対パスに変換されるのを防ぐ
  convert_urls:false,       // urlコンバートを防ぐ
});

変更した値の取得

tinymce.init({
  selector: '#comment',
  theme: 'silver',
  height: 500,
  language: 'ja',
  init_instance_callback: function (editor) {
    editor.on('change', function (e) {
    // 変更した値の取得
    console.log(editor.getContent());
    });
  }
});

テキストエリアの取得

<textarea id="comment" name="comment"></textarea>
<input type="button" value="値の取得" onclick="getTextarea();">
<script>
function getTextarea(){
  tinyMCE.activeEditor.getContent();
  tinyMCE.activeEditor.getContent({format : 'raw'});
  var comment = tinyMCE.get('comment').getContent();
  console.log(comment);
}
</script>