Vue3.x 整合WangEditor富文本编辑器示例
作者：互联网
之前搞的Vue2.x富文本用的是quill+vue-quill-editor，代码直通：Vue-cli3整合Quill富文本编辑器https://blog.csdn.net/wdy_2099/article/details/102715642
但是在Vue3中问题比较多，现改用wangEditor。
一、项目结构
就是普通的脚手架示例，如下图
二、代码：
package.json中引入如下依赖：
"dependencies": {
"element-plus": "^1.0.2-beta.33",
"core-js": "^3.6.5",
"vue": "^3.2.20",
"wangeditor": "^4.6.10"
},
package.json内容如下：
{
"name": "vue3wangEditor",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"element-plus": "^1.0.2-beta.33",
"core-js": "^3.6.5",
"vue": "^3.2.20",
"wangeditor": "^4.6.10"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0-beta.6",
"@vue/cli-plugin-eslint": "~5.0.0-beta.6",
"@vue/cli-service": "~5.0.0-beta.6",
"@vue/compiler-sfc": "^3.0.0-beta.1",
"eslint": "^7.20.0",
"eslint-plugin-vue": "^7.6.0",
"vue-cli-plugin-vue-next": "~0.1.4"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
main.js中引入element-plus所用到的组件,这里只用到了ElButton
备注：需要引入样式和字体文件的
方法：在根目录下新建theme文件夹，下面放font字体和样式的css，最后在main.js引入（import ‘…/theme/index.css’）即可。
theme里的文件内容如下图：太多了，截取部分。
main.js文件内容如下：
import { createApp } from 'vue'
import App from './App.vue'
import { ElButton } from 'element-plus'
import '../theme/index.css'
const app = createApp(App)
app.use(ElButton)
app.mount('#app')
index.html定义app Id, 引入main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
修改helloword.vue文件，引入WangEditor
<template>
<div class="hello">
<div>
<el-button type="success" @click="submitForm()">提交表单获取富文本内容</el-button>
</div>
<br>
富文本引入：
<div ref='editor'></div>
</div>
</template>
<script>
import { onMounted,ref } from 'vue'
import WangEditor from 'wangeditor'
export default {
name: 'HelloWorld',
setup() {
const editor = ref(null)
let instance
onMounted(() => {
instance = new WangEditor(editor.value)
instance.config.showLinkImg = false
instance.config.showLinkImgAlt = false
instance.config.showLinkImgHref = false
instance.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
instance.config.uploadFileName = 'file'
instance.config.uploadImgHeaders = {
token: ''// 上传接口所需token
}
// 图片返回格式不同，这里需要根据后端提供的接口进行调整
instance.config.uploadImgHooks = {
// 图片上传并返回了结果，想要自己把图片插入到编辑器中
// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
customInsert: function(insertImgFn, result) {
console.log('result', result)
// result 即服务端返回的接口
// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
if (result.data && result.data.length) {
result.data.forEach(item => insertImgFn(item))
}
}
}
// 你自己上传图片的接口地址
instance.config.uploadImgServer = ''
Object.assign(instance.config, {
onchange() {
console.log('发生变化，富文本内容为：', instance.txt.html())
},
})
instance.create()
})
/**
* 提交表单，获取富文本内容
*/
const submitForm = () => {
let richTextContent = instance.txt.html();
console.log("#富文本内容##", richTextContent)
}
return {
editor,
submitForm,
}
},
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
</style>
三、运行
yarn serve
浏览器输入http://localhost:8080/查看效果：
END
标签：文本编辑,vue,cli,示例,WangEditor,instance,result,import,config 来源： https://blog.csdn.net/wdy_2099/article/details/120902107