亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3的setup語法糖簡單封裝ckediter的過程

 更新時(shí)間：2023年10月07日 14:54:51   作者：代碼搬運(yùn)工0001  
Vue3官方提供了 script setup 語法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊(cè),屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡單封裝ckediter的過程,感興趣的朋友一起看看吧

要在Vue中使用CKEditor，首先需要安裝CKEditor?？梢酝ㄟ^以下方式安裝CKEditor：

1.在命令行中運(yùn)行以下命令：

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

2.在man.ts中導(dǎo)入CKEditor并注冊(cè)CKEditor Vue組件：

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

3.創(chuàng)建Vue富文本組件：

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

4.在Vue組件的data屬性中定義CKEditor配置和編輯器數(shù)據(jù)：

<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;
};
// 對(duì)外暴露get，set方法
defineExpose({
  getData,
  setData,
});
</script>

這樣就可以在Vue中使用CKEditor并進(jìn)行配置，以及獲取和設(shè)置編輯器的內(nèi)容。

到此這篇關(guān)于vue3的setup語法糖簡單封裝ckediter的文章就介紹到這了,更多相關(guān)vue3 setup語法糖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論