勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法

  JavaScript

ラジオボタンを選択することで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を使っていきたいところ。

 

参考サイト

https://dev.to/pcmagas/ckeditor-destroy-does-not-exist-how-to-fix-it-on-multiple-ckeditor-instance-intialization-3pe6

 - JavaScript

  関連記事

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

CKEditor(WYSIWYGエディタ)の設置方法と日本語化

今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...