Vue3's setup syntax sugar simple encapsulation of ckediter

To use CKEditor in Vue, you need to install CKEditor first. CKEditor can be installed in the following ways:

1. Run the following command on the command line:

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

2. Import CKEditor in and register the CKEditor Vue component:

import CKEditor from '@ckeditor/ckeditor5-vue';
const app = createApp(App);
(CKEditor);
('#app', true);

3. Create Vue rich text component:

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

4. Define CKEditor configuration and editor data in the data attribute of the Vue component:

&lt;script lang="ts" setup&gt;
import { ref, reactive, computed, onMounted } from 'vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
const editor = ClassicEditor;
const editorConfig = reactive({
  language: 'zh-cn',
//Configuration toolbar  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'bulletedList',
      'numberedList',
      '|',
      'outdent',
      'indent',
      '|',
      'blockQuote',
    ],
  },
});
const data = ref();
const getData = () =&gt; {
  return ;
};
const setData = (message: any) =&gt; {
   = message;
};
// Expose get and set method to the outside worlddefineExpose({
  getData,
  setData,
});
&lt;/script&gt;

This allows you to use CKEditor in Vue and configure it, as well as get and set the contents of the editor.

This is the article about the simple encapsulation of ckediter of vue3 setup syntax sugar. For more related content of vue3 setup syntax sugar, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!