【VUE】后台管理中使用富文本编辑器

前言

---

vue后台管理编辑器

以下代码均可直接复制，只需要更改一些引入的路径

教学文档以及官方文档都有进行备注

一.介绍

---

使用的插件介绍

wangEditor

浏览器兼容性

• 兼容主流 PC 浏览器，IE11+
• 不支持移动端和 ipad

插件教学文档

教学文档

上图看效果

二.使用

---

使用npm安装

npm install wangeditor --save

components下创建 editoritem.vue，将编辑器封装成组件，方便调用管理

在用到的页面中调用富文本编辑器 editoritem.vue

  import EditorBar from "@/components/editoritem/editoritem"; 

声明组件

components: { EditorBar} 

使用组件，catchData监听富文本的输入 editorContent为富文本中的内容

  

使用该组件的页面内定义传入的catchData方法和 editorContent

methods: {
      // 监听富文本的输入
      catchData(e) {
        console.log("e=====?>", e);
      },
      //富文本中的内容
      editorContent(e) {
        console.log("e=====?>", e);
      }
    }
 

推荐阅读：

【uni-app】使用写字板，实现手写签名----封装组件版

前端面试题（三）（CSS篇）建议收藏，持续更新中...