WYSIWYGエディタの導入
の編集
https://yassu.jp/pukiwiki/index.php?WYSIWYG%A5%A8%A5%C7%A5%A3%A5%BF%A4%CE%C6%B3%C6%FE
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
[[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/ このままだと英語なので、日本語化します。~ 以下から 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/]]というものを使えば実現できそうです。
タイムスタンプを変更しない
[[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/ このままだと英語なので、日本語化します。~ 以下から 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/]]というものを使えば実現できそうです。
テキスト整形のルールを表示する