富文本编译器 UEditor 在vue 中的使用

 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 就是用来存放永远不变的文件。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值