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エディタを導入する際は選択肢の一つとして覚えておく。
関連記事
-
-
jQueryで要素を移動する方法のまとめ
jQueryで要素を移動する際、insertBefore / insertAft ...
-
-
JavaScriptで年齢計算
JavaScriptで年齢計算。 ■ソース function ageCalcul ...
-
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...
-
-
chardin.jsを利用して注釈を入れる
簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...
-
-
JavaScriptで連想配列を数値でソート
数字の大きい順でソートしたかったんだけど、 色々調べてhash.sort云々やっ ...
-
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
-
alert後にページ遷移
JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...
-
-
無料でジオコーディング(住所→経度緯度)を行う
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
JavaScriptで多次元連想配列
JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...
-
-
JavaScriptのvarとletとconst
JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...