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>