vue3的setup语法糖简单封装ckediter的过程

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

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

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

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
const editor = ClassicEditor;
const editorConfig = reactive({
  language: 'zh-cn',
// 配置工具栏
  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'bulletedList',
      'numberedList',
      '|',
      'outdent',
      'indent',
      '|',
      'blockQuote',
    ],
  },
});
const data = ref();
const getData = () => {
  return data.value;
};
const setData = (message: any) => {
  data.value = message;
};
// 对外暴露get，set方法
defineExpose({
  getData,
  setData,
});
</script>