npm install qz-park-editor
使用案例：
// 引入main.js
import editor from 'qz-park-editor'
Vue.use(editor)
// demo.vue
<qz-park-editor
ref="editor"
v-model="content"
:isClear="isClear"
:uploadImgShowBase64Flg="uploadImgShowBase64Flg"
:readOnly="readOnly"
:showFullScreen="showFullScreen"
:placeholder="placeholder"
:showMenuTooltips="showMenuTooltips"
:menuTooltipPositionTop="menuTooltipPositionTop"
:maxHeight="maxHeight"
:autoFocus="autoFocus"
:uploadImgMaxSize="uploadImgMaxSize"
:uploadImgAccept="uploadImgAccept"
:uploadImgMaxLength="uploadImgMaxLength"
:showLinkImg="showLinkImg"
:elMessage="elMessage"
:uploadImgCustomConfig="uploadImgCustomConfig"
:colors="colors"
:menus="menus"
@urlHandel="urlHandel"></qz-park-editor>
// 配置项及说明
data(){
return{
content: '',// v-model绑定的内容
// 配置项
isClear: true,//清除上一操作留下的缓存
uploadImgShowBase64Flg: false,//是否启用base64图片上传（不可和自定义上传冲突）
showFullScreen: true,//是否展示全屏按钮
readOnly: false,//是否只读模式
placeholder: '请输入内容',//空内容提示文字
showMenuTooltips:true, // 是否展示工具栏提示
menuTooltipPositionTop:true,// 工具栏提示上方/下方显示
maxHeight:400,//最大高度
autoFocus:false,//自动聚焦
uploadImgMaxSize:5,// 图片大小限制 5M
uploadImgAccept:['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'], // 图片类型限制
uploadImgMaxLength: 1, // 同时最大上传图片数量限制
showLinkImg:true, // 是否打开网络图片上传
elMessage:true,//开启element样式提示 false则使用window.alert
uploadImgCustomConfig:{
uploadImgServer:'http://*******:****/xdl/addMobileAttach.do',
uploadImgParams:{
token:'123'
},//自定义上传formData参数 参数会被添加到formData中
uploadImgParamsWithUrl:true,// 是否formData参数拼接到 url 中
withCredentials:true,//跨域上传中如果需要传递 cookie 需设置 withCredentials 为 true
uploadImgHeaders:{
token:'456'
}, // 自定义上传header
uploadImgTimeout:10*1000,// 自定义上传超时时间
uploadFileName:'file',// 附件上传的key值
},
colors:[ // 编辑器的字体颜色和背景色
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf'
],
menus:[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'indent', // 缩进
'lineHeight', // 行高
'foreColor', // 文字颜色
'backColor', // 背景颜色
// 'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
// 'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
// 'code', // 插入代码
'undo', // 撤销
'redo', // 恢复
'clean', // 清除样式
'splitLine' // 分割线
]
}
},
methods:{
// 当使用自定义上传的时候需要指定接口返回后的逻辑 result：接口返回的数据
// 处理获得上传图片url后，调用callback(url)将url返回给组件，已便插入富文本
urlHandel(result, callback){
callback(result.result[0].Fileurl);
},
// 提供一些可以调用的方法 以便于更好的操控富文本的状态、行为
test(){
// 清空文本
this.$refs.editor.clearTxt()
// 全屏
this.$refs.editor.fullscreenFun()
// 退出全屏
this.$refs.editor.unFullscreenFun()
// 禁用
this.$refs.editor.disableEditor()
// 启用
this.$refs.editor.enableEditor()
}
}