More than 1 year has passed since last update.

CKEditor4で作成したテキストエリアに入力した値を、Vue3でリアルタイムレンダリングする

Posted at 2024-03-17

<!DOCTYPE html>

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2/dist/vue.global.js"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
</head>

<body>
    <div id="app">

                <textarea name="editor1" id="editor"></textarea>
                <br>
                <!-- <div>{{ textareaInput }}</div> これだとHTMLタグもそのまま出力されてしまう（<h1>これは見出しです</h1>みたいに）-->
                <div v-html="textareaInput"></div>
    </div>
    <script>

    const app = Vue.createApp({
      data() {
        return {
          textareaInput: '' // CKEditorの入力値を保持するデータプロパティ
        }
      },
      mounted() {
        // CKEditorの初期化
        CKEDITOR.replace('editor', {
          // CKEditorの設定を追加
          // ここに必要な設定を追加
          // 例: toolbar, language, width, heightなど
        }).on('change', () => {
          // textareaの値が変更された時に、Vue.jsのデータを更新
          this.textareaInput = CKEDITOR.instances.editor.getData();
        });
      }
    });

    app.mount('#app');
                </script>

</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up