vue前端富文本使用，以及base64图片前端显示

直接在你所需的项目里进行命令安装：

npm install wangeditor --save

script标签里引入

import E from 'wangeditor'

然后下面引入各种配置和加载

export default {
  data() {
    return {
      phoneEditor: ''
    }
  },
  mounted() {
    // wangeditor
    this.phoneEditor = new E('#websiteEditorElem')
  
    // 上传图片到服务器，base64形式
    this.phoneEditor.customConfig.uploadImgShowBase64 = true
    // 隐藏网络图片
    this.phoneEditor.customConfig.showLinkImg = false
    // 创建一个富文本编辑器
    this.phoneEditor.create()
    // 富文本内容
    this.phoneEditor.txt.html()
  }
 }

然后使用

<!-- 富文本编辑框 -->
  <div id="websiteEditorElem" class="text" style="background: #ffffff;"></div>

这个是我自己改的样式，让他符合正常富文本的使用

#websiteEditorElem {
  width: 50%;
  margin: auto;
  z-index: 0;
}
.w-e-text p, .w-e-text h1,
.w-e-text h2, .w-e-text h3,
.w-e-text h4, .w-e-text h5,
.w-e-text table, .w-e-text pre {
    text-align: left;

}
.hide .el-upload--picture-card {
  display: none;
}

以上便是富文本的快捷使用。

其实base64的图片能直接显示在前端的，不需要什么方法。
直接上代码：
这是引入element组件的

<el-image style="width: 300px; height: 300px;" :src="this.firstPic" alt=""></el-image>

这是普通html的

<img width="100%" :src="this.firstPic" alt=""/>

使用上面方法就能让base64形式的图片直接显示。