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

2021-10-22 22:02:20 阅读：227 来源： 互联网

标签：文本编辑 vue cli 示例 WangEditor instance result import config

之前搞的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

一、项目结构

二、代码：

三、运行

END