Vue3 中富文本的使用

1.安装依赖包

npm install @wangeditor/editor-for-vue@next --save

2. 在需要引用的页面加入如下代码即可使用

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
        <Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml" @onCreated="handleCreated" />
    </div>
    <button @click="getHtml">获取Html</button>
</template>
<script setup lang="ts">
import { ref, shallowRef } from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
//编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
const valueHtml = ref('')
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例,重要!
}
//编辑器结束
//获取编辑器html内容
const getHtml = ()=>{
   console.log(valueHtml.value);
}
</script>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值