1.首先去安装
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue@next # 或者 npm install @wangeditor/editor-for-vue@next --save
html部分
<template> <div style="border: 1px solid #ccc"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" /> </div> </template>
script部分
<script> import '@wangeditor/editor/dist/css/style.css' // 引入 css import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' export default { components: { Editor, Toolbar }, setup() { // 编辑器实例，必须用 shallowRef const editorRef = shallowRef() // 内容 HTML const valueHtml = ref('<p>hello</p>') // 模拟 ajax 异步获取内容 onMounted(() => { setTimeout(() => { valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>' }, 1500) }) const toolbarConfig = {} const editorConfig = { placeholder: '请输入内容...' } // 组件销毁时，也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return editor.destroy() }) const handleCreated = (editor) => { editorRef.value = editor // 记录 editor 实例，重要！ } return { editorRef, valueHtml, mode: 'default', // 或 'simple' toolbarConfig, editorConfig, handleCreated }; } } </script>
目前操作，编辑器就生成了，如下图：
2.自定义上传图片的配置
上传本地图片到后端，后端返回图片地址，在插入编辑器中
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: { uploadImage: { //上传图片配置 server: '/pcapi/index/upload', //上传接口地址 fieldName: 'file', //上传文件名 methods: 'post', metaWithUrl: true, // 参数拼接到 url 上 // 单个文件上传成功之后 onSuccess(file, res) { console.log(`${file.name} 上传成功`, res); }, // 自定义插入图片 customInsert(res, insertFn) { console.log(res); insertFn('htt://接口前缀' + res.url); }, }, }, };
