wangEditor3富文本编辑器的使用

北慕城南 提交于 2020-02-09 12:47:41

最近有需求,需要在项目中做一个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然后用双向绑定来,传值或者获取值,这样会非常灵活,还有一个原因我不使用的原因是,这个编辑器没有上标,下标的功能。

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!