vue3的setup語法糖簡單封裝ckediter的過程
更新時間：2023年10月07日 14:54:51 作者：代碼搬運工0001
Vue3官方提供了 script setup 語法糖,只需在script標簽中添加setup,組件只需引入不用注冊,屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡單封裝ckediter的過程,感興趣的朋友一起看看吧
要在Vue中使用CKEditor，首先需要安裝CKEditor?？梢酝ㄟ^以下方式安裝CKEditor：
1.在命令行中運行以下命令：
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
2.在man.ts中導入CKEditor并注冊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;
};
// 對外暴露get，set方法
defineExpose({
getData,
setData,
});
</script>這樣就可以在Vue中使用CKEditor并進行配置，以及獲取和設(shè)置編輯器的內(nèi)容。
到此這篇關(guān)于vue3的setup語法糖簡單封裝ckediter的文章就介紹到這了,更多相關(guān)vue3 setup語法糖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+elementUI實現(xiàn)點擊左右箭頭切換按鈕功能
這篇文章主要介紹了vue+elementUI實現(xiàn)點擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動,感興趣的朋友可以參考下實現(xiàn)代碼2024-05-05
vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能示例
這篇文章主要介紹了vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能,涉及基于vue的事件響應、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
下面小編就為大家分享一篇vue.js 獲取select中的value實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue axios封裝以及API統(tǒng)一管理 ,需要的朋友可以參考下2019-04-04
Vue + Scss 動態(tài)切換主題顏色實現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動態(tài)切換主題顏色實現(xiàn)換膚的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue移動端如何解決click事件延遲，封裝tap等事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)抖音時間轉(zhuǎn)盤，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue3.2最新語法使用socket.io實現(xiàn)即時通訊詳解
這篇文章主要為大家介紹了vue3.2最新語法使用socket.io實現(xiàn)即時通訊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
解決Vue 瀏覽器后退無法觸發(fā)beforeRouteLeave的問題
這篇文章主要介紹了解決Vue 瀏覽器后退無法觸發(fā)beforeRouteLeave的問題,需要的朋友可以參考下2017-12-12