富文本编辑器

vue-quill-editor 插入图片的方式是将图片转为base64再放入内容中，这样就会产生一个问题，如果图片比较大的话，富文本的内容就会很大，这样，就会有两个问题：
（1）内容存在数据库中一方面会占用大量的数据库存储空间；
（2）当图片太大的时候，富文本的内容会超过数据库的存储上限，从而会产生内容被截断从而显示不全的问题（即使是text类型，也有存储上限65535）。

当然也有解决方案：将图片上传到自己的服务器或第三方服务，然后将获得的图片url插入到文本中。
（1）将任务交给服务端，服务端截取base64图片并转化为文件，将其路径或者url替换原来的图片数据；
（2）对控件本身下手，首先将图片上传，然后插入到富文本中。

基于这几款富文本编辑器的特点，我选择了一款轻量级的 wangeditor 在项目中使用。

wangeditor 使用

安装wangeditor

npm install wangeditor
安装成功：
 
 可以看到，当前安装的是wangeditor 4.7.7版本。 
<template>
    <div ref="editor"> </div>
    <el-button @click="getContent" type="success">查看内容</el-button>
    <div v-html="editorContent" />
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
  data () {
    return {
      editorContent: '',
      editor: null
  methods: {
    getContent: function () {
      // alert(this.editorContent)
      var json = this.editor.txt.getJSON()  // 获取 JSON 格式的内容
      var jsonStr = JSON.stringify(json)
      console.log(json)
      console.log(jsonStr)
      console.log('this.editorContent', this.editorContent)
  mounted () {
    this.editor = new E(this.$refs.editor)
    this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config
    this.editor.customConfig.onchange = (html) => {
      // console.log(html,'----------------',a)
      this.editorContent = html
    // this.editor.customConfig.uploadImgShowBase64 = true // 使用base64保存图片  上下两者不可同用
    this.editor.customConfig.uploadImgServer = 'xxxxxxxx'  // 上传图片到服务器
    // 隐藏“网络图片”tab
    this.editor.customConfig.showLinkImg = false
    this.editor.create()
</script>
<style scoped>
</style>
如下图：
 
 输入文字时，浏览器打印的结果：
  
可以看到，内容输出的是html格式，以及内容的样式标签和属性。
                                    富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。
                                    需要知道富文本编辑器是所见即所得的文本编辑器，简单来说就是文本上面写的行内样式，那我们该怎样保存这些行内样式呢，在这里我是写成了组件的形式。return中写上如下代码，需要注意的时上传图片后，后端必须返回url图片的链接，否则编辑器中不会显示图片。研究一番发现弱国想要怎加或者修改编辑器的功能首先要获取这个功能的key。到这里其实基本功能已经实现了，那我们怎么保存，编辑器中的内容呢。这个时候编辑器的功能已经实现了 如下图。这个时候就可以看到每个功能的key了。就可以实现你想要的功能了，如下图。
                                    项目场景：
提示：这里简述项目相关背景：
听搭档推荐一个还不错的编辑器wangeditor，记录一下。我有几个页面要用到wangeditor，其中包括在el-dialog组件上用到。
直接在页面中显示
我们绑定一个编辑器为div1，一个按钮为btn1
<template>
   <div id="div1" style="margin: 4% 4% 3% 2%;">
          <p>欢迎使用 wangEditor 富文本编辑器&lt
                                    一、@wangEditor5的基本使用及配置
二、@wangEditor5上传图片
三、Module parse failed: Unexpected token (12828:18)You may need an appropriate loader to handle this file type.报错解决。
四、@wangEditor5有序列表无需列表样式消失。......
安转 ：npm i wangeditor --save
在需要的文件下引入：import Editor from “wangeditor”
实现文字的样式和图片的上传并显示在文本编辑器中
<template>
	<div id="editor"></div>
	//挂载点
</template>
<script>
	export default {
		data(){
			return {
                                    1、npm install @wangeditor/core @wangeditor/editor @wangeditor/editor-for-vue
2、封装组件 MyEditor.vue, （这里是通过props content 将展示内容传入）
<template>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->