wangEditor 2.0版本简单封装为vue组件

Posted wendyandjken

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wangEditor 2.0版本简单封装为vue组件相关的知识,希望对你有一定的参考价值。

<template>
  <div>
    <div id="editor">
    </div>
  </div>
</template>

<script>
//1.https://www.kancloud.cn/wangfupeng/wangeditor2
//npm install wangeditor
import   ‘./dist/js/lib/jquery-1.10.2.min.js‘
import   ‘./dist/js/wangEditor.js‘
import   "./dist/css/wangEditor.min.css";



export default {
  name: ‘wangEditor‘,
  data(){
    return {
      editor: null
    }
  },
  props: {
    editorDefault: {
      type: String,
      default: ‘<p><br/></p>‘
    },
  },
  mounted() {
    this.editor = new wangEditor(‘editor‘);
    this.editor.config = {
      ...this.editor.config,     //
      pasteFilter: false,        //关闭样式过滤
      uploadImgUrl: ‘/rest/picture/multiUpload‘,    //上传图片地址
      uploadHeaders : {      //数据流名称
        ‘name‘ : ‘file‘
      },
    }
 
    this.editor.config.uploadImgFns.onload =  (resultText, xhr) =>{
        // resultText 服务器端返回的text
        // xhr 是 xmlHttpRequest 对象,IE8、9中不支持
        
        // 上传图片时,已经将图片的名字存在 editor.uploadImgOriginalName
        // var originalName = this.editor.uploadImgOriginalName || ‘‘;  
        
        // 如果 resultText 是图片的url地址,可以这样插入图片:
       
        const url = JSON.parse(resultText).data[0]
        // this.editor.command(null, ‘inserthtml‘, ‘<img src="‘ + url + ‘" style="max-width:100%;"/>‘);
        // 如果不想要 img 的 max-width 样式,也可以这样插入:
        this.editor.command(null, ‘InsertImage‘, url);
    };
    
    // 自定义timeout事件
    this.editor.config.uploadImgFns.ontimeout = function (xhr) {
        // xhr 是 xmlHttpRequest 对象,IE8、9中不支持
        alert(‘上传超时‘);
    };
    
    // 自定义error事件
    this.editor.config.uploadImgFns.onerror = function (xhr) {
        // xhr 是 xmlHttpRequest 对象,IE8、9中不支持
        alert(‘上传错误‘+xhr);
    };



    this.editor.create()
    this.$emit(‘ready‘)
    this.editor.$txt.html(this.editorDefault)
  },
  created(){
  },
  methods: {
    setContent(val) {    //设置内容
      this.editor.$txt.html(val)
    },
    clearContent() {    //清空内容
      // this.editor.txt.clear()
      this.editor.$txt.html(this.editorDefault)
    },
    getContent() {      //获取内容
      var content = this.editor.$txt.html()
      if (content.replace("<p><br></p>","").trim() !="" ) {
        return this.editor.$txt.html()
      }else{
        return ""
      }
    }
  }
  
}
</script>

<style lang="less" >
  .wangEditor-txt {    //防止外部样式覆盖默认样式
    height: 400px ;
      h1 {font-size: 2em; margin: .67em 0 }

      h2 {font-size: 1.5em; margin: .75em 0 }

      h3 {font-size: 1.17em; margin: .83em 0 }

      h4, p,blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }

      h5 {font-size: .83em; margin: 1.5em 0 }

      h6 {font-size: .75em; margin: 1.67em 0 }

      h1, h2,h3, h4, h5, h6, b,strong { font-weight: bolder }
      b {
        font-weight: 700;
      }
      i, cite,em,var, address { font-style: italic }
  }

  
</style>
<style lang="less" scoped>

</style>

以上为组件index.vue文件

 

 

组件目录

技术分享图片

 

 

使用

技术分享图片

技术分享图片

技术分享图片

 

 清除

技术分享图片

设置

技术分享图片

 获取

技术分享图片

 



以上是关于wangEditor 2.0版本简单封装为vue组件的主要内容,如果未能解决你的问题,请参考以下文章

Vue3 富文本组件封装wangeditor

Vue3 富文本组件封装wangeditor

wangeditor5在vue3中的全使用过程(图片上传附件上传工具栏配置编辑器配置)

vue项目使用wangEditor使用代码高亮,背景无效的简单粗暴解决方法

PC/移动端的富文本编辑器wangEditor的使用

vue+富文本编辑器wangEditor4的使用