前言
本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖
上图片
环境
“axios”: “^0.21.1”,
“element-ui”: “^2.4.5”,
“less”: “^3.9.0”,
“less-loader”: “^5.0.0”,
“vue-baidu-map”: “^0.21.22”,
“vue”: “^2.6.11”
涉及项目相关,只列举该自定义组件涉及相关包
自定义组件
1.上传
1.1代码
<template>
<el-upload
class="upload-demo"
:action="serverUrl"
:http-request="UploadImage"
:on-preview="handlePreview"
:on-remove="handleRemove"
drag
multiple
list-type="picture"
accept="image/jpg,image/png,image/jpeg,image/ico,image/webp,image/bmp"
:auto-upload="true">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<!-- 下面提示就自己定义了-->
<div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/ico/bmp/webp文件,且不超过500kb</div>
</el-upload>
</template>
<!--js-->
<script>
//导入axios
import axios from "axios";
export default {
name: "upfileimage",
//调用组件传入参数
props: {
serverUrl: {
type: String,
default() {
//给定默认值
return '/picture'
}
},
},
//定义变量
data() {
return {};
},
//定义函数
methods: {
//自定义el-upload 上传方法
UploadImage(param) {
//得到上传文件数据
const formData = new FormData()
formData.append('file', param.file)
// 用axios上传
axios({
method: "POST",
url: this.serverUrl,
headers: {'Content-Type': 'multipart/form-data'},
data: formData,
})
.then((response) => {
param.onSuccess(); // 上传成功的图片会显示绿色的对勾
this.uploadFileSuccess(response, param.file.name)
})
.catch((error) => {
console.log(error);// 上传失败的图片会消失
this.$message.error(param.file.name + "上传失败!请再试一次")
param.onError()
});
},
//删除文件时操作
handleRemove(file, fileList) {
console.log(file, fileList);
},
//点击图片时动作
handlePreview(file) {
this.$alert('<div style="width: 100%;height: 100%"><p>图片名:</p><p style="color: green">' + file.name + '</p><p>图片链接</p><p style="color: green;word-wrap:break-word">' + file.url + '</p></div>',
'图片详情', {dangerouslyUseHTMLString: true})
},
//上传后服务器返回数据解析
uploadFileSuccess(response, file) {
const obj = response.data
if (obj.code == 200) {
this.$message.success(file + "上传成功!")
this.$emit('pictureurl', obj.reason.data.url)
} else {
this.$message.error(file + "上传失败!请联系管理员")
}
},
}
}
</script>
<!--样式-->
<style lang="less" scoped>
/deep/ .el-upload {
width: 100%;
height: 100%;
}
/deep/ .el-upload-dragger {
width: 100%;
}
</style>
1.2组件调用说明
1.调用例子
<div class="upfileimage"> <upfileimage :serverUrl="url" @pictureurl="uppictureurl"> </upfileimage>
2.参数说明
参数名 类型 默认值 是否必填 serverUrl String ‘/picture’ 否 3.事件说明
事件名 说明 参数 pictureurl 组件上传成功后处理服务器下发数据得到url后传出 url[type:String]
2.百度ueditor
2.1 代码
<template>
<div class="rootclass" ref="getheight">
<!-- 设置百度ueditor自定义按键功能实现媒介按键-->
<div style="display: none!important;">
<el-button id="uploadpictures" @click="uploadpicturesopen" style="display: none!important;">上传图片</el-button>
<el-button id="onlinepictures" @click="onlinepicturesopen" style="display: none!important;">在线图片</el-button>
<el-button id="picturemanagement" @click="picturemanagementopen" style="display: none!important;">在线图片</el-button>
</div>
<!-- 导入图片上传组件 弹窗样式-->
<el-dialog
title="图片上传"
:visible.sync="uploadpictures"
destroy-on-close
center>
<div class="upfileimage">
<upfileimage
:serverUrl="url"
@pictureurl="uppictureurl"
></upfileimage>
</div>
</el-dialog>
<!-- 在线图片 弹窗样式-->
<el-dialog
title="在线图片"
v-if="onlinepicturesshow"
:visible.sync="onlinepictures"
@closed="onlinepicturesclosed"
center>
<div class="picturemanagement">
<!-- 懒加载方式导入图片-->
<ul class="infinite-list" v-infinite-scroll="load">
<li v-for="(key,i) in count" class="infinite-list-item">
<div style="width: 30%;height: 100%;float: left;">
<img
:src="key.url"
style="width: 100%;height: 100%">
</div>
<div style="width: 50%;height: 100%;float: left;">
<ul class="ullift">
<li>
<p><span style="color:#409EFF;">图片名称:</span>{{ key.name }}</p>
</li>
<li>
<p><span style="color:#409EFF;">图片地址:</span> <a :href=key.url
style="text-decoration:none;color: black;"
target="view_window">点击此处查看</a></p>
</li>
</ul>
<ul class="ulright">
<li>
<p><span style="color:#409EFF;">是否启用:</span>{{ key.isenable }}</p>
</li>
<li>
<p><span style="color:#409EFF;">创建时间:</span>{{ key.createtime }}</p>
</li>
</ul>
</div>
<div style="width: 20%;height: 100%;float: left;">
<el-button style="margin-top: 25% !important;" @click="Insertpicture(key)">插入图片</el-button>
</div>
</li>
</ul>
</div>
</el-dialog>
<!-- 管理图片 弹窗样式-->
<el-dialog
title="管理图片"
v-if="picturemanagementshow"
:visible.sync="picturemanagement"
@closed="picturemanagementlosed"
destroy-on-close
center>
<div class="picturemanagement">
<!-- 懒加载方式导入图片-->
<ul class="infinite-list" v-infinite-scroll="load">
<li v-for="(key,i) in count" class="infinite-list-item">
<div style="width: 30%;height: 100%;float: left;">
<img
:src="key.url"
style="width: 100%;height: 100%">
</div>
<div style="width: 50%;height: 100%;float: left;">
<ul class="ullift">
<li>
<p><span style="color:#409EFF;">图片名称:</span>{{ key.name }}</p>
</li>
<li>
<p>
<span style="color:#409EFF;">图片地址:</span>
<a :href=key.url style="text-decoration:none;color: black;" target="view_window">点击此处查看</a>
</p>
</li>
</ul>
<ul class="ulright">
<li>
<p><span style="color:#409EFF;">是否启用:</span>{{ key.isenable }}</p>
</li>
<li>
<p><span style="color:#409EFF;">创建时间:</span>{{ key.createtime }}</p>
</li>
</ul>
</div>
<div style="width: 20%;height: 100%;float: left;">
<el-button @click="picturemanagementdelete(key)" disabled>删除</el-button>
<el-button @click="picturemanagementmodify(key,true)">启用</el-button>
<el-button @click="picturemanagementmodify(key,false)">关闭</el-button>
</div>
</li>
</ul>
</div>
</el-dialog>
<vue-ueditor-wrap v-if="ueditorisenable" v-model="msg" :config="editorConfig" @ready="ready"
@before-init="addCustomUI">
</vue-ueditor-wrap>
</div>
</template>
<script>
//引入百度ueditor插件
import VueUeditorWrap from 'vue-ueditor-wrap'
//引入自定义上传图片插件
import upfileimage from "@/components/upfileimage";
import axios from "axios";
//引入axios插件
export default {
name: "baiduueditor",
//注册插件
components: {
VueUeditorWrap,
upfileimage
},
//百度ueditor配置数据以及图片上传地址
props: {
//百度ueditor配置
editorConfig: {
type: Object,
default() {
return {
// 初始容器高度
initialFrameHeight: 500,
// 初始容器宽度
initialFrameWidth: '100%',
// 访问 UEditor 静态资源的根路径,可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
UEDITOR_HOME_URL: '/static/UEditor/',
// 是否自动长高
autoHeightEnabled: false,
//是否保持toolbar不动
autoFloatEnabled: false,
// 隐藏元素路径
elementPathEnabled: false,
//自定义菜单
toolbars: [[
// 'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
// 'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
// 'source', //源代码
'blockquote', //引用
// 'pasteplain', //纯文本粘贴模式
// 'selectall', //全选
// 'print', //打印
// 'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'inserttable', //插入表格
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
//'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
//'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
//'gmap', //Google地图
// 'insertvideo', //视频
'indent', //首行缩进
'lineheight', //行间距
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
// 'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
// 'attachment', //附件
'imagecenter', //居中
// 'wordimage', //图片转存
'edittip ', //编辑提示
// 'customstyle', //自定义标题
'autotypeset', //自动排版
// 'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
// 'scrawl', //涂鸦
// 'music', //音乐
'drafts', // 从草稿箱加载
// 'charts', // 图表
'cleardoc', //清空文档
'help', //帮助
]],
editorInstance: null,
}
}
},
//图片上传,访问,修改访问地址
serverurls: {
type: String,
default() {
return ''
}
},
},
//内部数据
data() {
return {
url: this.serverurls,
//百度ueditor加载使能
ueditorisenable: false,
//在线图片插件是否加载
onlinepicturesshow: true,
//图片管理插件是否加载
picturemanagementshow: true,
//参数 给服务器辨别是管理插件获取图片还是在线插件获取图片
managemark: false,
//懒加载列表
count: [],
// 懒加载上限
maxcount: 1,
//上传图片插件是否显示
uploadpictures: false,
//在线图片插件是否显示
onlinepictures: false,
// 管理图片插件是否显示
picturemanagement: false,
//百度ueditor编辑值
msg: null,
}
},
methods: {
//打开上传图片dialog
uploadpicturesopen() {
this.uploadpictures = true
},
//打开在线图片dialog
onlinepicturesopen() {
this.onlinepicturesshow = true
this.onlinepictures = true
},
打开管理图片dialog
picturemanagementopen() {
this.picturemanagementshow = true
this.picturemanagement = true
this.managemark = true
},
//关闭在线图片dialog
onlinepicturesclosed() {
//清空数据
this.count = []
this.maxcount = 1
//销毁组件
this.onlinepicturesshow = false
},
//关闭在线图片dialog
picturemanagementlosed() {
//清空数据
this.count = []
this.maxcount = 1
this.picturemanagementshow = false
this.managemark = false
},
//加载图片
load() {
if (this.maxcount >= this.count.length) {
axios({
method: "Get",
url: this.serverurls,
headers: {
"Content-type": "application/json;charset=UTF-8",
},
params: {
length: this.count.length,
mark: this.managemark,
}
})
.then((response) => {
var obj = response.data
if (obj.code == 200) {
this.maxcount = obj.reason.data.maxcount
this.count = this.count.concat(obj.reason.data.datalist)
} else {
this.$message.error('网络出问题了,请联系管理员')
}
})
.catch((error) => {
// console.log(error);
// alert("错误")
this.$message.error('网络出问题了,请稍后再试')
});
}
},
//在线图片插入图片
Insertpicture(key) {
this.editorInstance.setContent('<p><img height="50" width="50" style="width: 50px;height: 50px" src=' + key.url + '/></p>', true);
},
picturemanagementdelete(key) {
},
picturemanagementmodify(key, mark) {
if (key.isenable == mark) {
this.$message.error(mark ? "状态是启用状态,无法修改" : "状态是禁用状态,无法修改")
} else {
axios({
method: "Put",
url: this.serverurls,
headers: {
"Content-type": "application/json;charset=UTF-8",
},
data: {
id: key.id,
isenable: mark
}
})
.then((response) => {
var obj = response.data
if (obj.code == 200) {
key.isenable = obj.reason.data.state
this.$message.success(obj.reason.data.msg)
} else {
this.$message.error('网络出问题了,请联系管理员')
}
})
.catch((error) => {
// console.log(error);
// alert("错误")
this.$message.error('网络出问题了,请稍后再试')
});
}
},
//百度ueditor初始化完成
ready(editorInstance) {
this.editorInstance = editorInstance
this.$emit('ready', editorInstance)
},
addCustomUI(editorId, editorConfig) {
// 1.自定义上传图片按钮
window.UE.registerUI('uploadpictures' + editorId, function (editor, uiName) {
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: () => {
}
})
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '上传图片',
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
cssRules: "background-image: url('./static/upload.png') !important;background-size: cover;",
// 点击时执行的命令
onclick: function () {
// 这里可以不用执行命令,做你自己的操作也可
// fileimage
document.querySelector("#uploadpictures").click()
}
})
// 当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState(uiName)
if (state === -1) {
btn.setDisabled(true)
btn.setChecked(false)
} else {
btn.setDisabled(false)
btn.setChecked(state)
}
})
// 因为你是添加 button,所以需要返回这个 button
return btn
}, 0 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
// 2. 自定义表格居中按钮
window.UE.registerUI('onlinepictures' + editorId, function (editor, uiName) {
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function () {
}
})
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '在线图片',
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
cssRules: "background-image: url('/static/onlinepictures.png') !important;background-size: cover;",
// 点击时执行的命令
onclick: function () {
document.querySelector("#onlinepictures").click()
}
})
// 当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState(uiName)
if (state === -1) {
btn.setDisabled(true)
btn.setChecked(false)
} else {
btn.setDisabled(false)
btn.setChecked(state)
}
})
// 因为你是添加 button,所以需要返回这个 button
return btn
}, 1 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
window.UE.registerUI('picturemanagement' + editorId, function (editor, uiName) {
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function () {
}
})
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '管理图片',
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
cssRules: "background-image: url('/static/picturemanagement.png') !important;background-size: cover;",
// 点击时执行的命令
onclick: function () {
// 这里可以不用执行命令,做你自己的操作也可
document.querySelector("#picturemanagement").click()
}
})
// 当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState(uiName)
if (state === -1) {
btn.setDisabled(true)
btn.setChecked(false)
} else {
btn.setDisabled(false)
btn.setChecked(state)
}
})
// 因为你是添加 button,所以需要返回这个 button
return btn
}, 2 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
},
uppictureurl(url) {
this.editorInstance.setContent('<p><img height="50" width="50" style="width: 50px;height: 50px" src=' + url + '/></p>', true);
},
addtets() {
// this.editorInstance.setContent('<img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>', true);
this.centerDialogVisible = true
this.$message("click")
},
},
//页面加载完成后
mounted() {
this.$nextTick(() => { // 页面渲染完成后的回调
this.ueditorisenable = true
// 给百度ueditor赋值高度
this.editorConfig.initialFrameHeight = this.$refs.getheight.offsetHeight - 80;
})
// console.log('%c注意:本Demo提供的serverUrl是为了方便小伙伴们体验图片文件等上传功能。\n请勿在生产环境使用此serverUrl!!!', 'background:#f33;color:#fff')
},
//监视器
watch: {
//监视器,监听msg值变化 回传内容
msg(val, newval) {
// console.log(val)
// console.log(newval)
this.$emit('contenu', val, newval)
}
}
}
</script>
<style lang="less" scoped>
.rootclass {
width: 100%;
height: 100%;
}
.upfileimage {
margin: 0 auto;
}
.picturemanagement {
height: 50vh;
margin: 0 auto;
overflow: hidden;
.infinite-list {
padding: 0 !important;
height: 100%;
width: 100%;
overflow: auto;
li {
width: 98%;
height: 30%;
list-style-type: none;
border: 1px solid #3276b1;
div .el-button {
width: 98%;
margin: 0 !important;
margin-top: 5px !important;
}
}
}
.infinite-list::-webkit-scrollbar {
display: none;
}
}
.ullift {
width: 50%;
height: 100%;
float: left;
padding-left: 0 !important;
li {
height: 49% !important;
margin: 0 !important;
overflow: auto;
p {
word-wrap: break-word;
}
}
li::-webkit-scrollbar {
display: none;
}
}
.ulright {
width: 50%;
height: 100%;
float: right;
padding-left: 0 !important;
li {
height: 49% !important;
margin: 0 !important;
overflow: auto;
p {
word-wrap: break-word;
}
}
li::-webkit-scrollbar {
display: none;
}
}
</style>
2.2组件调用说明
1.调用例子
<div style="height: 100%;width: 100%"> <bai-du-ueditor :serverurls="serverUrl" @contenu="contenu" @ready="ready"> </bai-du-ueditor> </div>
2.参数说明
参数名 类型 默认值 是否必填 说明 serverurls String ‘’ 否 上传,管理等功能服务器地址 3.事件说明
事件名 说明 参数 contenu 百度ueditor内容变化后得到的内容 val[type:String],newval[type:String] ready 百度ueditor初始化后得到的ueditor对象 editorInstance[type:Object]
参考,引用组件
vue-ueditor-wrap
vue2文档地址及model
vue3文档地址及model
UEditor 配置
UEditor官网配置说明
附:
1.这是一个不会配置百度ueditor后端的程序渣偷懒的产物,此博客用于记录和学习本次开发使用中想到的方法2.本帖所有内容均属于原创,转载请注明出处
啰嗦两句,如果要取消百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面屏蔽23,24,25行代码,如果不想去改或者找不到,就直接下载我的资源吧,去我的资源里面找找
如此下图