首页 > 编程学习 > 富文本编辑器ueditor

富文本编辑器ueditor

发布时间:2022/9/21 12:04:34
 UEditor 文档   http://fex.baidu.com/ueditor/#api-common

1、安裝插件
          npm i vue-ueditor-wrap 
         
2、下載静态文件(去官网) https://github.com/fex-team/ueditor 
             vue-cli 3.0 将静态文件放在 public 文件下
             vue-cli 2.0 将静态文件放在 static 文件下

3、在组件中
         import VueUeditorWrap from 'vue-ueditor-wrap' // 富文本编译器
         
         <vue-ueditor-wrap v-model="form.content" :config="myConfig" />   // 使用
         
          可双向绑定数据    v-model="form.content"    
          myConfig: {    //  配置项
		        toolbars: [
		          [                            //   自行选择需要的功能
		            'undo', // 撤销
		            'bold', // 加粗
		            'indent', // 首行缩进
		            'italic', // 斜体 
		          ],
		          'fontfamily': [
					          { label: '', name: 'songti', val: '宋体,SimSun' },
					          { label: '仿宋', name: 'fangsong', val: '仿宋,FangSong' },
					          { label: '仿宋_GB2312', name: 'fangsong', val: '仿宋_GB2312,FangSong' },
					          { label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai' },
					          { label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei' },
					          { label: '', name: 'heiti', val: '黑体, SimHei' },
					          { label: '', name: 'lishu', val: '隶书, SimLi' },
					          { label: '', name: 'andaleMono', val: 'andale mono' },
					          { label: '', name: 'arial', val: 'arial, helvetica,sans-serif' },
					          { label: '', name: 'arialBlack', val: 'arial black,avant garde' },
					          { label: '', name: 'comicSansMs', val: 'comic sans ms' },
					          { label: '', name: 'impact', val: 'impact,chicago' },
					          { label: '', name: 'timesNewRoman', val: 'times new roman' }
				 ], 		
		        autoHeightEnabled: false,// 编辑器不自动被内容撑高
		        initialFrameHeight: 240, // 初始容器高度
		        initialFrameWidth: '100%', // 初始容器宽度
		        // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
		        serverUrl: '',
		        // UEditor 资源文件的存放路径,使用的是 vue-cli 生成的项目,通常不需要设置该选项,
		        vue-cli3.0 将静态文件夹放在 public 文件夹下路径为  /UEditor/
		        vun-cli2.0 将静态文件夹放在static文件夹下 /static/UEditor/
		        UEDITOR_HOME_URL: '/UEditor/'   
		     }    
4、就可以显示了

 扩展:
         public 文件夹下的文件并不会被 Webpack 处理,它们会直接被复制到最终的打包目录下。
         必须使用绝对路径引用这些文件, public 就是用来存放永远不变的文件。

 

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号