CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法
ラジオボタンを選択することでCKEditor5(ウィジウィグエディタ)とテキストエリアの切り替えを行いたい。また、WordPressのエディタのようにページ遷移無しで、尚且つ入力内容はそのままで切り替えたい。調べたところdestroy()メソッドで対応できそう。以下にソースコードとサンプルをメモ。
公式リファレンス
https://ckeditor.com/docs/ckeditor5/latest/index.html
サンプル
https://taitan916.info/sample/CKEditor/switching/
ラジオボタンを選択することでCKEditor⇔テキストエリアを切り替えられる。
ソースコード
<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;
}
textarea{
width: 100%;
}
</style>
</head>
<body>
<form action="/" method="post">
<div>
<label>
<input type="radio" value="on" name="switching" checked>CKEditor
</label>
<label>
<input type="radio" value="off" name="switching">テキストエリア
</label>
</div>
<textarea name="editor" id="editor"></textarea><br>
<input type="submit" value="送信">
</form>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/33.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script>
<script>
$(function(){
var ckeditor = ClassicEditor.create(document.querySelector('#editor'), {
language: 'ja'
}).then(e => {
ckeditor = e;
});
$('input[name="switching"]').on('change', function(){
if( $(this).val() == 'on' ){
ClassicEditor.create(document.querySelector('#editor'), {
language: 'ja'
}).then(e => {
ckeditor = e;
});
}else{
ckeditor.destroy();
}
});
});
</script>
</body>
</html>
所感
過去にメモした画像アップロード機能と合わせると実運用できそう。今後WYSIWYGエディタを組み込む案件があればCKEditor5を使っていきたいところ。
参考サイト
関連記事
-
-
CKEditor(WYSIWYGエディタ)の設置方法と日本語化
今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
サイトにHTMLエディタ(WYSIWYG)を導入する方法
シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...
-
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...
-
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...