vue使用wangeditor

vue使用wangeditor

1.在终端安装wangeditor

npm i wangeditor --save

2.创建一个index.vue页面 在div上绑定一个ID 我这里ID绑定的websiteEditorElem

<template>  
  <div>
      <div id="websiteEditorElem" style="height:300px;background: #ffffff;"></div>
  </div>
</template>  

3. 引入wangeditor

import E from 'wangeditor'

4.在生命周期mounted里配置wangeditor需要的配置

  mounted () {
    // 绑定div上的IDwebsiteEditorElem
    this.phoneEditor = new E('#websiteEditorElem')
    // 获取输入的内容
    this.phoneEditor.config.onchange = (html) =>{
      // 打印输入的内容
      console.log(html);   
    }
    // 上传图片到服务器，base64形式
    this.phoneEditor.config.uploadImgShowBase64 = true
    // 隐藏网络图片
    this.phoneEditor.config.showLinkImg = false
    // 创建一个富文本编辑器
    this.phoneEditor.create()
    // 富文本内容
    this.phoneEditor.txt.html()
  }

5.index.vue完整代码

<template>  
  <div>
      <div id="websiteEditorElem" style="height:300px;background: #ffffff;"></div>
  </div>
</template>  
<script>
import E from 'wangeditor'
export default {
  name: 'text',
  data () {
    return {
      phoneEditor: '',
    }
  },
  methods: {
  },

  mounted () {
    // 绑定div上的IDwebsiteEditorElem
    this.phoneEditor = new E('#websiteEditorElem')
    // 获取输入的内容
    this.phoneEditor.config.onchange = (html) =>{
      // 打印输入的内容
      console.log(html);   
    }
    // 上传图片到服务器，base64形式
    this.phoneEditor.config.uploadImgShowBase64 = true
    // 隐藏网络图片
    this.phoneEditor.config.showLinkImg = false
    // 创建一个富文本编辑器
    this.phoneEditor.create()
    // 富文本内容
    this.phoneEditor.txt.html()
  }
}
</script>

最终效果图如下