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を使っていきたいところ。
参考サイト
関連記事
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...
-
CKEditor(WYSIWYGエディタ)の設置方法と日本語化
今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
サイトにHTMLエディタ(WYSIWYG)を導入する方法
シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...