WYSIWYGエディタの導入の変更点

追加された行はこの色です。
削除された行はこの色です。
WYSIWYGエディタの導入へ行く。
WYSIWYGエディタの導入の差分を削除

[[PHPめも]]

この記事は書きかけです。

PHPとは直接関係しませんが、テキストエリアにWYSIWYGエディタを実装したい時に使えそうなものを探してみました。

よく利用されているのは [[CKEditor:http://ckeditor.com/]] WordPressなどに利用されているのは [[TinyMCE:https://www.tinymce.com/]] ということで2択になりそうです。

*CKEditorの使い方 [#v99cd088]

以前は FCKeditor という名前でした。

ファイルマネージャーは [[CKFinder:https://cksource.com/ckfinder/buy]] がありますが、これは有料のため、[[KCFinder:https://kcfinder.sunhater.com/]] を代替えで使うことができます。

*TinyMCEの使い方 [#kbff3611]

TinyMCE Community のZIPファイルをダウンロードし、解凍した js フォルダ以下を設置します。~
https://www.tinymce.com/download/~
このままだと英語なので、日本語化します。
https://www.tinymce.com/download/

このままだと英語なので、日本語化します。~
以下から Japanese をダウンロードし、解凍した ja.js ファイルを langs フォルダに設置します。~
http://archive.tinymce.com/i18n/

設置したHTMLソースは以下のようになります。

 <!DOCTYPE html>
 <html>
 <head>
 <script src="js/tinymce/tinymce.min.js"></script>
 <script>
 tinymce.init({
     selector:'#textarea',
     width: 600,
     height: 300,
     plugins: [
       'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
       'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
       'save table contextmenu directionality emoticons template paste textcolor'
     ],
     language: 'ja'
 });
 </script>
 </head>
 <body>
  <textarea id="textarea">Easy (and free!) You should check out our premium features.</textarea>
 </body>
 </html>

**文字色の変更 [#j3e64817]

 tinymce.init({
   selector: "textarea",
   plugins: "textcolor",
   toolbar: "forecolor backcolor"
 });

**ファイルマネージャーの使用 [#c6987c52]

[[RESPONSIVE filemanager:http://www.responsivefilemanager.com/]]というものを使えば実現できそうです。

WYSIWYGエディタの導入 の変更点

WYSIWYGエディタの導入の変更点