CKEditor(WYSIWYGエディタ)の設置方法と日本語化
今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんまり見た目が好きじゃなかった。設置が楽で見た目も今風っぽいのが何か無いか探したところCKEditorが良かった。以下に設置方法と日本語化のメモ。
公式サイト
バージョン4
https://ckeditor.com/docs/ckeditor4/latest/
バージョン5
https://ckeditor.com/docs/ckeditor5/latest/
サンプル
バージョン4
https://taitan916.info/sample/CKEditor/
バージョン5
https://taitan916.info/sample/CKEditor/index2.php
ソースコード(バージョン4)
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CKEditor</title> </head> <body> <?php if( $_POST ){ ?> <div>送信結果:</div> <pre><?php var_dump($_POST['editor']);?></pre> <?php } ?> <form action="./" method="post"> <textarea name="editor" class="ckeditor"></textarea><br> <input type="submit" value="送信"> </form> <script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script> <script> CKEDITOR.replace('editor'); </script> </body> </html>
バージョン4は特に設定しなくても日本語化されていた。
ソースコード(バージョン5)
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CKEditor</title> <style> .ck-editor__editable_inline { min-height: 200px; } </style> </head> <body> <?php if( $_POST ){ ?> <div>送信結果:</div> <pre><?php var_dump($_POST['editor']);?></pre> <?php } ?> <form action="./index2.php" method="post"> <textarea name="editor" id="editor"></textarea><br> <input type="submit" value="送信"> </form> <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/ckeditor.js"></script> <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script> <script> ClassicEditor.create( document.querySelector( '#editor' ), { language: 'ja' }).then( editor => { console.log( editor ); }).catch( error => { console.error( error ); }); </script> </body> </html>
バージョン5は「<script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script>」を呼び出すのと、「language: 'ja'」で言語指定が必要。
所感
どちらのバージョンもCDNで使えて便利。バージョン5の方が見た目は良さげ。今後WYSIWYGエディタを導入する際は選択肢の一つとして覚えておく。
関連記事
-
-
javascriptでブラウザ判別&ページ遷移
var userAgent = window.navigator.userAge ...
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...
-
-
leaflet.jsとOSMで現在地の取得
leaflet.jsとOpenStreetMapで現在位置を取得しマップ上にマー ...
-
-
prototypeとjqueryの競合
ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...
-
-
javascriptの注意点
javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...
-
-
javascriptでのエラーログ
PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...
-
-
highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる
やりたかった事は、 ・棒グラフと折れ線グラフを入れたい ・Y軸はそれぞれ違う値に ...
-
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...
-
-
alert後にページ遷移
JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...