vue中使用富文本编辑器

vue中使用富文本编辑器（wangEditor）

wangEditor官网地址：https://www.wangeditor.com/

使用示例

<template><div class="app-container"><div class="box"><div class="editor-tool"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig"mode="default"/><Editorstyle="height: 300px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig"mode="default"@onCreated="handleCreated"/></div><div class="btn"><el-button type="primary" @click="isOpen = true">编辑器内容</el-button></div><Demo v-model:myValue="isOpen"  v-model:content="valueHtml"/></div></div>
</template><script lang="ts" setup>
import { onBeforeUnmount, ref, shallowRef} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { uploadImage } from "@/api/cabinet/index.js";
import { getToken } from '@/utils/auth'
import Demo from '@/components/Demo.vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
const editorRef = shallowRef()
const valueHtml = ref(null) //富文本里面内容，传给后端
const toolbarConfig = {} //工具栏配置
const editorConfig = { //内容区域配置placeholder: '请输入内容',MENU_CONF: {}
}
const isOpen = ref(false) //弹窗是否打开
const url = 'http://192.168.31.74:9080/opc-cloud-dev'
const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！
}
type InsertFnType = (url: string, alt: string, href: string) => void
editorConfig.MENU_CONF["uploadImage"] = { //文件上传// server: "/dev-api/file/picUp/upFile",// headers: {//   Authorization: `Bearer ${getToken()}`,// },async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法-自定义文件上传，用来自己写逻辑调后端接口// file 即选中的文件// 自己实现上传，并得到图片 url alt href// 最后插入图片const formData = new FormData()formData.append('file', file)uploadImage(formData).then((response) => {insertFn(url+response.data.url, 'xxxx', url+response.data.url)});}
};
</script><style lang="scss" scoped>
.app-container{height: calc(100vh - 50px);background: #EFF3F3;padding: 24px;.box {width: 100%;height: 100%;background-color: #fff;padding: 20px;.editor-tool{z-index: 999;width: 100%;height: auto;border: 1px solid #ccc;margin-bottom: 30px;}.btn {width: 100%;display: flex;justify-content: center;}}
}
</style>

<template><el-dialogv-model="isShow"title="Tips"width="1300px"><span>{{ isShow }}</span><div class="view" v-html="dialogContent"></div><el-button @click="handleQuery">确定</el-button>
</el-dialog>
</template><script lang="ts" setup>
import { ref, defineProps, computed, defineEmits, inject } from 'vue'
interface Props {myValue: booleancontent: any
}
const props = withDefaults(defineProps<Props>(), {myValue: true,content: null
})
const emits = defineEmits(['update:myValue'])
const isShow = computed({get: () => props.myValue,set: (value: any) => {emits('update:myValue', value)}
})
const dialogContent = computed({get: () => props.content,set: (value: any) => {}
})  
const handleQuery = async () => {console.log('编辑器内容', dialogContent.value);}
</script><style lang="scss" scoped></style>