Vue3.x 整合WangEditor富文本编辑器示例

之前搞的Vue2.x富文本用的是quill+vue-quill-editor,代码直通:Vue-cli3整合Quill富文本编辑器https://blog.csdn.net/wdy_2099/article/details/102715642

但是在Vue3中问题比较多,现改用wangEditor。

一、项目结构

就是普通的脚手架示例,如下图
Vue3.x 整合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里的文件内容如下图:太多了,截取部分。
Vue3.x 整合WangEditor富文本编辑器示例
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

Vue3.x 整合WangEditor富文本编辑器示例
浏览器输入http://localhost:8080/查看效果:
Vue3.x 整合WangEditor富文本编辑器示例

END

上一篇:You have 77 PMD violations maven error


下一篇:乘法口诀、水仙花和冒泡