読者です 読者をやめる 読者になる 読者になる

S_a_k_Uの日記みたいなDB

~サクゥーと呼ばないで~

TinyMCEを使ってみた

HTML JavaScript 技術メモ

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

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

  1. TinyMCEのサイトからDownload TinyMCE Community(4.3.4)をダウンロード
  2. 解凍してフォルダにコピー
  3. TinyMCE - Languages for TinyMCE 4から日本語化パック(ja.js)をダウンロード
  4. ダウンロードした日本語化パック(ja.js)をlangフォルダにコピー
  5. フォルダに以下の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>