vue项目使用富文本封装

最新推荐文章于 2024-09-19 11:29:36 发布

阿强在搬砖

最新推荐文章于 2024-09-19 11:29:36 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45333985/article/details/107956132

版权

本文介绍如何在Vue项目中封装并使用wangEditor富文本框，包括通过npm安装、创建公用组件及在父组件中的应用。提供了一个简单示例，适合后台管理系统开发。

摘要由CSDN通过智能技术生成

我又来了，今天给大家分享一个富文本框的封装，写后台管理也离不开富文本框，我就做了封装，供大家参考，

我用的富文本框是 wangedito 版本是3.1的，好了，话不多说，上代码

1，vue中安装wangEditor

使用的npm安装 npm install wangeditor --save

2，创建公用组件

在components中创建richText组件

组件内容为

<template lang="html">  
  <div class="editor">  
    <div ref="toolbar" class="toolbar"></div>  
    <div ref="editor" class="text"></div>  
  </div>  
</template>  
  
<script>  
  import E from 'wangeditor'  
  import 'wangeditor/release/wangEditor.min.css'  
  export default {  
    name: 'editoritem',  
    data() {  
      return {  
        editor: null,  
        info_: null , 
      }  
    },  
    model: {   //v-model本质上是一个语法糖 这一步在父组件中可使用v-model
      prop: 'value',  
      event: 'change'  
    },  
    props: {  
      value: {  
        type: String,  
        default: ''  
      }, 
      disabled:{
        type: Boolean,  
        default: false  
      }
     
    },  
    watch: {  
      value: function(value) {  
      
        if(!value){      //这是为了解决输入时光标乱跳 并回显
          this.editor.txt.html(this.value);
        }
      },
      //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值  
    },  
    mounted() {  
      this.seteditor()  
      this.editor.txt.html(this.value)  
    },  
    methods: {  
      seteditor() {  
        this.editor = new E(this.$refs.toolbar, this.$refs.editor)  
        this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片  
        this.editor.customConfig.uploadImgServer = ''// 填写配置服务器端地址  
        this.editor.customConfig.uploadImgHeaders = { }// 自定义 header  
        this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名  
        this.editor.customConfig.uploadImgParams = {  
            // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode  
            // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode  
            file_type: 'img'  
        }  
        this.editor.cust