1. プラグインの選択:

vue3にはオプションのリッチテキストプラグインが多数ありますが、今回の業務要件は単純な文字の太字や改行などで、画像ファイルなどの機能は必要ないので、とりあえず必要なのはシンプルリッチですテキストエディタ。

いろいろ調べた結果、オープンソースで無料で商用利用が可能なCKEditor5を最終的に選びました。以前tinymceを試しましたが、同社は apikey を申請する予定がないため、アラートプロンプトボックスの問題は解決できません...詳細については記事の最後を参照してください。

リッチテキストエディターの概要は次のとおりです。

vue3 で利用できる 7 つのリッチテキストエディター

2.導入プロセス:

公式 Web サイトのアドレス: Vue.js 3+ コンポーネント - CKEditor 5 ドキュメント

1. ダウンロード

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

ダウンロード後、ダウンロードしたバージョン番号が一致しているかどうかを確認します。

パッケージ.json

 "@ckeditor/ckeditor5-build-classic": "^37.0.1",
 "@ckeditor/ckeditor5-vue": "^4.0.1",

2. グローバル導入

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import router from './router'

//其他引入
import CKEditor from '@ckeditor/ckeditor5-vue';
app.use(router).use(CKEditor).mount('#app')

公式サイトには他のインポート方法もありますので、ここでは私がよく知っている紹介を選択しましたが、公式サイトに記載されている最も直接的な方法を参照してください。

いつか試してみます。

3. ページの使用方法

次のステップでは、ページを使用するため、編集ポップアップウィンドウにリッチテキストエディターを表示する必要があります。

公式サイトに掲載されている例は以下の通り。

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

公式サイトの例ではvue3の糖衣構文を使用しているので少し異なりますが、概ね公式サイトの例と同じです。

私のコードは次のとおりです:

<template>
    <div id="app">
        <ckeditor v-model="app_message" :editor="editor" :config="editorConfig"></ckeditor>
    </div>

</tempalte>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editor = ClassicEditor

const editorConfig = reactive({})
let app_message = ref('<p>eeee</p>3333333<br/>sssssss')

</script>