场景说明：

后端输入一篇文章，在前端显示，这时就有个排版问题了。单纯的文本输入框无法满足要求。
所以需要采用后端整合文本编辑器，前端(vue)采用v-html标签直接渲染
小编的示例是整合vue

---

0、富文本编辑器的插件和组件

链接：https://pan.baidu.com/s/1OK770qsv1Ozv-4FWLjCtdg 
提取码：5ggs 
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V4的分享

1、效果如图：

后台图片：

前端渲染图片：

或者

---

2、下载富文本编辑器 插件Tinymce：

01:先下载插件，官网入口（默认英文版）
02:补充下汉化（入口）

汉化下载这个：


去掉不要的文件夹，完整插件如图：

3、在工程引入

说明：小编的demo是整合vue脚手架哦

1. 在public文件夹引入插件，如图：

2. 封装组件

注明：小编会把（插件和组件代码）放在百度网盘，需要自取

3. 在需要使用的地方引用该组件

示例：

 //引入
 import Tinymce from '@/components/Tinymce'
 //注册
 components: {Tinymce},
 //使用---> v-model是数据绑定
 <tinymce v-model="dataList.content" :height="300" style="min-width: 600px" :size="componentSize"/>

如图：


整合完成

4、前端渲染

<div v-html="Content" style="font-size: 14px;letter-spacing: 1px;line-height:18px"></div>

5、细节（bug）说明：

小编采用的element ui
可能会出现如下问题：
1、文本域初始化一次，第二次发现无法输入
解决办法： 每次打开添加、修改…等组件，重新渲染一次
例如：采用v-if创建组件

//dialogShow是自己定义的
//父页面点击添加按钮，创建出一个dialog组件，dialogShow变为true，显示组件
//所以我们在dialog组件中使用v-if解决这个问题 v-if="dialogShow"
//原理:百度下 v-if和b-show的区别
//代码如下：
<template>
<el-dialog 
	:visible.sync="dialogShow" 
	 v-if="dialogShow" 
	:before-close="handleClose"
	append-to-body width="60%"
	top="5vh">
</el-dialog>
//这个是table的内容
</template>

2、修改功能：文本编辑器影响到原本的显示数据
解决办法： 父组件向子组件传递数据的时候，不要传递整个对象，使用一个一个变量传输

类如：

 	  //更新页面
      openUpdateWin(data) {
        const refs = this.$refs.updateWin;
        //推荐一个一个赋值
        refs.dataList.id = data.id;
        refs.dataList.title = data.title;
        refs.dialogShow = true;
        //不推荐
        //refs.dataList = data;
      },