Vue2 富文本编辑器wangEditor使用

最新推荐文章于 2024-05-28 09:53:37 发布

继续努力张小胖

最新推荐文章于 2024-05-28 09:53:37 发布

阅读量399

点赞数 3

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45815335/article/details/136535573

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.单页面使用

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col>
        <div ref="editor" class="text" />
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
        <div v-html="editorContent" />
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
export default {
  name: 'Editor',
  data() {
    return {
      editor: null,
      editorContent:
        `
        <ul>
          <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.wangeditor.com/doc/">wangEditor</a></li>
        </ul>
        `
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  created(){
  },
  mounted() {
    this.createEditor(this.editorContent)
  },
  methods:{
    createEditor(val){
      var imagesUploadApi = this.imagesUploadApi //图片上传地址
      var baseApi = this.baseApi //ip+端口
      if(this.editor == null){
        this.editor = new E(this.$refs.editor)
        // 自定义菜单配置
        this.editor.config.zIndex = 5
        // 文件上传
        this.editor.config.customUploadImg = function(files, insert) {
          // files 是 input 中选中的文件列表
          // insert 是获取图片 url 后，插入到编辑器的方法
          files.forEach(image => {
            upload(imagesUploadApi, image).then(res => {
              const data = res.data
              const url = baseApi + '/file/' + data.type + '/' + data.realName
              insert(url)
            })
          })
        }
        this.editor.config.onchange = (html) => {
          this.editorContent = html
          this.$emit('childByValue', html)
        }
        this.editor.create()
      }
      this.editor.txt.html(val)
    },
  }
}
</script>

2.作为子组件，实现从父组件获取内容，回传内容到父组件

1.父组件

<template>
  <div class="app-container">
    {{ bodyInfo }}
		<Editor :bodyInfo="bodyInfo" @childByValue="getValue"/>    
  </div>
</template>

<script>
import Editor from '@/views/components/Editor'

export default {
  name: 'fuzujian',
  components: { Editor },
  data() {
    return {
      bodyInfo: ''
    }
  },
  methods: {
    getValue(v){
      this.bodyInfo = v
    }
  }
}
</script>

2.子组件

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col>
        <div ref="editor" class="text" />
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
        <div v-html="editorContent" />
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
export default {
  name: 'Editor',
  props: {
    bodyInfo: String
  },
  data() {
    return {
      editor: null,
      editorContent:
        `
        <ul>
          <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.wangeditor.com/doc/">wangEditor</a></li>
        </ul>
        `
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  watch:{
    bodyInfo:{
      handler(val){
        if(val == null){
          this.createEditor('')
        }else{
          this.createEditor(val)
        }
      }
    }
  },
  created(){
  },
  mounted() {
    this.createEditor(this.bodyInfo)
  },
  methods:{
    createEditor(val){
      var imagesUploadApi = this.imagesUploadApi
      var baseApi = this.baseApi
      if(this.editor == null){
        this.editor = new E(this.$refs.editor)
        // 自定义菜单配置
        this.editor.config.zIndex = 5
        // 文件上传
        this.editor.config.customUploadImg = function(files, insert) {
          // files 是 input 中选中的文件列表
          // insert 是获取图片 url 后，插入到编辑器的方法
          files.forEach(image => {
            upload(imagesUploadApi, image).then(res => {
              const data = res.data
              const url = baseApi + '/file/' + data.type + '/' + data.realName
              insert(url)
            })
          })
        }
        this.editor.config.onchange = (html) => {
          this.editorContent = html
          this.$emit('childByValue', html)
        }
        this.editor.create()
      }
      this.editor.txt.html(val)
    },
  }
}
</script>

<style scoped>
  .text {
    text-align:left;
  }
 ::v-deep .w-e-text-container {
    height: 420px !important;
  }
</style>