TinyMCEを使ってみた - S_a_k_Uの日記みたいなDB

TinyMCEってのでHTMLエディタを試してみた。
読み方（たいにーえむしーいー）から知らなかったｗ

手順としては、以下の手順でHTMLエディタで編集した内容のHTMLがPOSTで送信されるところまで確認した。

TinyMCEのサイトからDownload TinyMCE Community(4.3.4)をダウンロード
解凍してフォルダにコピー
TinyMCE - Languages for TinyMCE 4から日本語化パック(ja.js)をダウンロード
ダウンロードした日本語化パック(ja.js)をlangフォルダにコピー
フォルダに以下のHTMLファイルを作成して動作確認

<!DOCTYPE html>
<html>
<head>
<script src="./tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
  selector: 'textarea#htmlTextInput',
  height: 200,
  language: 'ja',
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons',
  image_advtab: true,
  templates: [
  ],
  content_css: [
  ]
 });  </script>
</head>
<body>
<form method="post" action="http://localhost/">
<textarea id="htmlTextInput" name="htmlTextInput">
</textarea>
<input type="button" value="下にHTMLソースを表示" onclick="v.value=tinyMCE.get('htmlTextInput').getContent();" />
<input type="button" value="クリア" onclick="v.value='';" />
<input type="submit" value="POST" onclick="alert('開発ツールでPOSTのパラメータを確認できます。\n(http://localhost/へのリクエストでエラーになります。)');" />
<br>
【HTML】<br />
<textarea id="htmlTextView" name="htmlTextView"  rows="7" style="width:100%" style="background-color: #bde9ba;"></textarea>
<script type="text/javascript">
var v = document.getElementById('htmlTextView');
</script>
</form>
</body>
<html>