vue3的setup語法糖簡單封裝ckediter的過程
更新時(shí)間：2023年10月07日 14:54:51 作者：代碼搬運(yùn)工0001
Vue3官方提供了 script setup 語法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊,屬性和方法也不用返回,今天通過本文給大家分享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并注冊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并進(jìn)行配置，以及獲取和設(shè)置編輯器的內(nèi)容。
到此這篇關(guān)于vue3的setup語法糖簡單封裝ckediter的文章就介紹到這了,更多相關(guān)vue3 setup語法糖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue與React的區(qū)別和優(yōu)勢對比，幫助大家更好的選擇適合自己的前端框架，迷茫的同學(xué)可以進(jìn)來參考下2020-12-12
vue里提供了keep-alive組件用來緩存狀態(tài),這篇文章主要給大家介紹了關(guān)于vue中keepAlive組件的作用和使用方法的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要為大家介紹了前端axios取消請求總結(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue中實(shí)現(xiàn)全屏以及對退出全屏的監(jiān)聽
本文主要介紹了vue中實(shí)現(xiàn)全屏以及對退出全屏的監(jiān)聽，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下2017-08-08
Vue.js?是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架,本文主要為大家整理了一些常用的?Vue?方法及其詳細(xì)說明和代碼示例,有需要的小伙伴可以參考一下2023-11-11
vue3+elementplus前端生成圖片驗(yàn)證碼完整代碼舉例
在開發(fā)過程中有時(shí)候需要使用圖片驗(yàn)證碼進(jìn)行增加安全強(qiáng)度,在點(diǎn)擊圖片時(shí)更新新的圖片驗(yàn)證碼,記錄此功能,以便后期使用,這篇文章主要給大家介紹了關(guān)于vue3+elementplus前端生成圖片驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-03-03
Vue為何棄用Ajax，選擇Axios？ajax與axios的區(qū)別？
ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，axios實(shí)現(xiàn)了對ajax的封裝；axios有的ajax都有，ajax有的axios不一定有?？偨Y(jié)一句話就是axios是ajax，ajax不止axios。2023-01-01
基于vue和react的spa進(jìn)行按需加載的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進(jìn)行按需加載,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了前端Vue2、Vue3和不同版本nuxt的插槽使用的相關(guān)資料,Vue2和Vue3中,插槽機(jī)制允許在組件模板中定義占位符,并在使用組件時(shí)插入自定義內(nèi)容,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02