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

前言

vue后台管理编辑器

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

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

一.介绍

使用的插件介绍

wangEditor

浏览器兼容性

• 兼容主流 PC 浏览器&＃xff0c;IE11&＃43;
• 不支持移动端和 ipad

插件教学文档

教学文档

上图看效果

二.使用

使用npm安装

npm install wangeditor --save

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

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

  import EditorBar from "&＃64;/components/editoritem/editoritem"; 

声明组件

components: { EditorBar} 

使用组件&＃xff0c;catchData监听富文本的输入 editorContent为富文本中的内容

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

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

推荐阅读&＃xff1a;

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

前端面试题&＃xff08;三&＃xff09;&＃xff08;CSS篇&＃xff09;建议收藏&＃xff0c;持续更新中...