Vue3 +elementUI + wangEditor 富文本编辑器
哎呀，一个富文本编辑器折腾了我好久啊，刚开始找的就是wangEditor ，但是上传图片的调接口，我就寻思找个简单的，后来换了quill 可以不调接口上传图片，但是v-model绑定不了，而且一直报错，后来换了tinymce,按照网上的教程装完了，wuhu，直接不显示，后来我妥协了，我换回来了wangEditor + 自定义上传图片的方法，有空我一定把另外俩搞出来
首先wangEditor 官网 地址：https://www.wangeditor.com/
我用的vue3哈，vue,elementUi 啥都装完了，我就根据官网来了
首先安装插件
npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue@next --save
然后在componets里面新建 wangEditor.vue,直接复制就行了
<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>
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('')
// 工具栏配置 const toolbarConfig = {excludeKeys: [
'fullScreen',//不显示全屏
'group-video', // 不显示上传视频
]}
//菜单配置
const editorConfig = {
placeholder: '请输入内容...', MENU_CONF:{
// 配置默认字号
// 配置上传图片
uploadImage:{
// 上传图片请求接口路径
server: "/api//v1/upload/file",
// 后端接收的文件名称
fieldName: "multipartFile",
maxFileSize: 10 * 1024 * 1024, // 上传图片10M
// 上传的图片类型
allowedFileTypes: ["image/*"],
// 小于该值就插入 base64 格式（而不上传），默认为 0
base64LimitSize: 10 * 1024, // 10MB
// 自定义上传图片返回格式【后端返回的格式】
customInsert(res, insertFn) {
if(res.code != 200 ){
ElMessage.error("上传文件失败，"+res.message)
return
}
// 从 res 中找到 url alt href ，然后插入图片 ,根据后端实际返回的字段来 insertFn(res.data.url, res.data.alt,res.data.url)
},
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: true,
// 单个文件上传成功之后
onSuccess(file, res) {
if(res.code == 200){
ElMessage.success(`${file.name} 上传成功`)
return
}else {
ElMessage.warning(`${file.name} 上传出了点异常`)
return
}
// console.log(`${file.name} 上传成功`, res)
//ElMessage.success(`${file.name} 上传成功`, res)
},
// 单个文件上传失败
onFailed(file, res) {
console.log(res)
ElMessage.error(`${file.name} 上传失败`)
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) {
console.log(err, res)
ElMessage.error(`${file.name} 上传出错`)
},
}
}
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
// 查看所有工具栏key，先查看可以根据实际情况进项增删
console.log(editor.getAllMenuKeys())
}
return {
editorRef,
valueHtml,
mode: 'default', // 或 'simple'
toolbarConfig,
editorConfig,
handleCreated
};
}
}
</script> 这个就是富文本的组件了，用的时候在页面引用一下index.vue
<template> <div id="page"> <wangEditor /> </div> </template> <script> import wangEditor from '../../componets/wangEditor.vue' export default { components: {wangEditor}, setup() { return { } }, } </script>
最后的富文本就长这样了，我编辑了一下上传的图片
