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 就是用来存放永远不变的文件。
标签:ueditor,文本编辑,vue,name,val,文件,label From: https://www.cnblogs.com/liyunxi/p/16715140.html