代码拉取完成,页面将自动刷新
同步操作将从 smallwei/avue-plugin-ueditor 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
1.安装
npm install avue-plugin-ueditor --save
2.导入
import AvueUeditor from 'avue-plugin-ueditor'
Vue.use(AvueUeditor);
3.使用(双击图片可改变大小)
...
column:[
...
{
label:'test',
prop:'test',
component: "ueditor",
options:{
//普通图片上传
action: "https://avuejs.com/upload",
props: {
res: "data",
url:'url'
},
//七牛云oss配置
qiniu: {
AK: "",
SK: "",
scope: "test",
url: "http://pm7cc17lu.bkt.clouddn.com/",
deadline: 1
},
//阿里云oss配置
ali: {
region: "oss-cn-beijing",
endpoint: "oss-cn-beijing.aliyuncs.com",
accessKeyId: "",
accessKeySecret: "",
bucket: "avue"
}
}
}
...
]
或者直接
<avue-ueditor v-model="text" ></avue-ueditor>
4.图片上传配置————(支持oss,支持ctrl+v粘贴图片)
具体用法参考https://avuex.avue.top/#/doc/form-upload
upload: {
//普通图片上传
action: "https://avuejs.com/upload",
props: {
res: "data",
url:'url'
},
//七牛云oss配置
qiniu: {
AK: "",
SK: "",
scope: "test",
url: "http://pm7cc17lu.bkt.clouddn.com/",
deadline: 1
},
//阿里云oss配置
ali: {
region: "oss-cn-beijing",
endpoint: "oss-cn-beijing.aliyuncs.com",
accessKeyId: "",
accessKeySecret: "",
bucket: "avue"
}
}
5.自定义工具菜单栏(参考vue-quill-editor的api)
upload:{
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'], // 加粗、倾斜、下划线、删除线
[{ 'header': 1 }, { 'header': 2 }], // 标题一、标题二
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
[{ 'color': [] }, { 'background': [] }], // 字体颜色、背景颜色
[{ 'align': [] }, 'image']
]
}
},
}
...
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。