Vue 引入Ueditor修改样式仿照Word文档

前言

项目中有涉及到对文本生成和文本内容编辑的需求，选择了百度的Ueditor。项目使用Vue框架。便于利用双向数据绑定特性，完成文本的生成。

效果图

Vue 引入Ueditor

1. 下载Ueditor
   附上：大佬github下载地址.
   将下载文件解压缩放在项目的static文件夹下并重命名为Ueditor。此处的地址对应第五步Ueditor配置属性中的[UEDITOR_HOME_URL]属性
2. 安装Ueditor

   npm install vue-ueditor-wrap --save
   

3. 项目中引入Ueditor组件

   import VueUeditorWrap from 'vue-ueditor-wrap'
   

4. 推荐在需要的Vue文件中注册组件。用到地方不会很多，没必要全局注册

   components:{
        
   	VueUeditorWrap
   }
   

5. 模板中添加组件，并进行数据绑定

   <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
   // data中定义msg属性
   data(){
        
   	return {
        
   		msg: '<h2>Vue + UEditor + v-model双向绑定</h2>'
   	} 
   }
   

6. Ueditor属性配置
   如果不设置属性将代码段:config="myConfig" 删除即可。进行设置可以看一下操作。
   最重要的来了！！！！myConfig中的autoHeightEnabled一定要设置为false。自己没注意这个属性，为了实现内容过多时自动出现滚动条效果折腾了好久。有了这个再去修改iframe.css文件，就可以实现美美看着舒服的效果了

   // Ueditor 配置项
     myConfig: {
        
       /* 编辑器自动被内容撑高!!!!这个一定要设置为false。
       	自己没注意这个属性，为了实现内容过多时自动出现滚动条效果折腾了好久。
       	有了这个再去修改iframe.css文件，就可以实现美美看着舒服的效果了*/
       autoHeightEnabled: false,
       // 初始容器高度
       initialFrameHeight: 800,
       // 初始容器宽度
       initialFrameWidth: '100%',
       // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！
       //	临时用的大佬的地址，后期改成自己的就好了）
       serverUrl: 'http://35.201.165.105:8000/controller.php',
       // UEditor 资源文件的存放路径 对第一步设置的路径
       UEDITOR_HOME_URL: '/static/Ueditor/',
       // 设置想要的字体，默认