wangEditor3富文本编辑器的使用

最近有需求，需要在项目中做一个pc与移动端都适配的富文本编辑器，网上查到用wangEditor编辑器的比较多，于是打算练习一下

官网地址：http://www.wangeditor.com/

bootcdn上有一个10版本的不过在网上没看到有人使用过10版本的先使用3的最新版本吧

简单例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="editor">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
  </div>
  <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script>
  <script type="text/javascript">
      var E = window.wangEditor
      var editor = new E('#editor')
      // 或者 var editor = new E( document.getElementById('editor') )
      editor.create()
  </script>
</body>
</html>

具体详细配合可以参考文档

在vue封装成组件

<template>
  <div>
    <div ref="editor" style="text-align:left"></div>
  </div>
</template>
 
<script>
import E from "wangeditor";
 
export default {
  name: "editor",
  data() {
    return {
      editor:""
    };
  },
  props: {
    content: { required: true }
  },
  mounted(){
    this.editor = new E(this.$refs.editor);
    
    this.editor.customConfig.onchange = html => {
 
      this.$emit('catchData',html);
 
    };
    // 配置服务器端地址
    this.editor.customConfig.uploadImgServer = "/Upload.php";
    //自定义一个图片参数名
    this.editor.customConfig.uploadFileName = "filename";
    // 将图片大小限制为 3M
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
 
    this.editor.create();
  },
  watch: {
     content: function(val) {
      this.editor.txt.html(val);
    }
  }
};
</script>
 
<style scoped>
</style>

这样就ok了。原理很简单就是把变量声明成全局变量，然后监听加载

最后一个问题，这个编译器放在手机端上看的时候会炸窝，解决方法有两种。

第一种，在全局样式中添加

.w-e-toolbar {
flex-wrap: wrap;
}

第二种修改js源文件 wangEditor.js中的4661行，加上 flex-wrap: wrap;就好了。

//使用组件
<WangEditor :catchData="catchData" v-bind:content="content"></WangEditor>
//接收参数
 methods: {
    catchData(value){
      this.content=value      //在这里接受子组件传过来的参数，赋值给data里的参数
    },
}

上述方法虽然封装成组件了，但是使用起来并不方便，因为它不是双向绑定的，是通过自定义事件从子组件向父组件传值的。而且每个编辑器的内容必须对应写一个自定义方法，不够灵活，

可以将容器换成texteara然后用双向绑定来，传值或者获取值，这样会非常灵活，还有一个原因我不使用的原因是，这个编辑器没有上标，下标的功能。

而公司需要这两个功能，所以最后放弃了这个富文本编辑器的使用，并没有自己亲自去封装。

。

wangEditor3富文本编辑器的使用

猜你喜欢