[Vue]集成百度UEditor
2020-04-08 本文已影响0人
卓灬不凡
- 安装依赖
npm i vue-ueditor-wrap
- 修改Main.js文件
// 引入 'vue-ueditor-wrap'
import VueUeditorWrap from 'vue-ueditor-wrap'
// 富文本组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap);
-
下载ueditor并将其复制到Static目录下
1.png
- 在对应Vue页面使用：实例化v-model绑定数据
// myConfig 编辑器配置
// content 编辑器内容
<vue-ueditor-wrap :config="myConfig" v-model="content"></vue-ueditor-wrap>
// myConfig 配置如下：
myConfig: {
// 如果需要上传功能,找后端小伙伴要服务器接口地址
serverUrl: 'http://xxx.com/jsp/ueditor/1',
// 你的UEditor资源存放的路径,相对于打包后的index.html
// UEDITOR_HOME_URL: '/static/UEditor/',
// 编辑器自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 280,
// 初始容器宽度
initialFrameWidth: "100%",
// 关闭自动保存
enableAutoSave: false,
// 层级
zIndex: 1500,
// 菜单配置
toolbars: [[
// 'fullscreen', // 全屏
// 'source', '|', // 源代码
'undo', // 撤销
'redo', '|', // 重做
'bold', // 加粗
'italic', // 斜体
'underline', // 下划线
'fontborder', // 字符边框
'strikethrough', // 删除线
'superscript', // 上标
'subscript', // 下标
'removeformat', // 清除格式
'formatmatch', // 格式刷
'autotypeset', // 自动排版
'blockquote', // 引用
'pasteplain', '|', // 纯文本粘贴模式
'forecolor', // 字体颜色
'backcolor', // 背景色
'insertorderedlist', // 有序列表
'insertunorderedlist', // 无序列表
'selectall', // 全选
'cleardoc', '|', // 清空文档
'rowspacingtop', // 段前距
'rowspacingbottom', // 段后距
'lineheight', '|', // 行间距
'customstyle', // 自定义标题
'paragraph', // 段落格式
'fontfamily', // 字体
'fontsize', '|', // 字号
'directionalityltr', // 从左向右输入
'directionalityrtl', // 从右向左输入
'indent', '|', // 首行缩进
'justifyleft', // 居左对齐
'justifycenter', // 居中对齐
'justifyright', // 居右对齐
'justifyjustify', '|', // 两端对齐
'touppercase', // 字母大写
'tolowercase', '|', // 字母小写
// 'link', // 超链接
// 'unlink', // 取消链接
// 'anchor', '|', // 锚点
// 'imagenone', // 默认
// 'imageleft', // 左浮动
// 'imageright', // 右浮动
// 'imagecenter', '|', // 居中
'simpleupload', // 单图上传
'emotion', // 表情
'map', // Baidu地图
// 'insertcode', // 代码语言
// 'pagebreak', // 分页
// 'template', // 模板
'background', '|', // 背景
'horizontal', // 分隔线
'date', // 日期
'time', // 时间
'spechars', // 特殊字符
'wordimage', '|', // 图片转存
// 'print', // 打印
'preview', // 预览
// 'searchreplace', // 查询替换
// 'drafts' // 从草稿箱加载
]]
}
- Java 百度编辑器上传图片接口
@RequestMapping("/ueditor/{type}")
public Object getConfigInfo(HttpServletRequest request, @PathVariable("type") Integer type) throws Exception {
// 百度编辑器第一次会默认调用接口初始化
String callback = request.getParameter("callback");
String noCache = request.getParameter("noCache");
if (callback != null || noCache != null) {
String b = "{\n" +
" \"imageActionName\":\"uploadimage\",\n" +
" \"imageFieldName\":\"upfile\",\n" +
" \"imageMaxSize\":2048000,\n" +
" \"imageAllowFiles\":[\n" +
" \".png\"," +
" \".jpg\"," +
" \".jpeg\"," +
" \".gif\"," +
" \".bmp\"" +
" ],\n" +
" \"imageCompressEnable\":true,\n" +
" \"imageCompressBorder\":1600,\n" +
" \"imageInsertAlign\":\"none\",\n" +
" \"imageUrlPrefix\":\"\",\n" +
" \"imagePathFormat\":\"/test/article/img/{yyyy}{mm}{dd}/{time}{rand:6}\"\n" +
"}";
if(callback != null){
return callback + "(" + b + ")";
}
return b;
} else {
// 其余情况 - 上传图片时调用
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile imgFile = multipartRequest.getFile("upfile");
// 这里写自己上传图片的方法
ResultResponse resultResponse = (ResultResponse) this.uploadService.uploadImg(imgFile, type + "");
// 将图片组装返回给百度编辑器 - 格式统一
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("state", "SUCCESS");
Map<String, String> imgMap = (Map<String, String>) resultResponse.getData();
resultMap.put("url", imgMap.get("imgUrl"));
return resultMap;
}
}
- 其余情况
1.图片自适应百度编辑器
打开 UEditor -》themes -》iframe.css 文件添加
/*可以在这里添加你自己的css*/
img {
max-width: 100%; /*图片自适应宽度*/
}
body {
overflow-y: scroll !important;
}
.view {
word-break: break-all;
}
.vote_area {
display: block;
}
.vote_iframe {
background-color: transparent;
border: 0 none;
height: 100%;
}
2.点击图片取消图片拉伸
打开 UEditor -》ueditor.all.min.js 文件，找到 UE.plugins.fiximgclick 进行注释，如下：
// UE.plugins.fiximgclick = function() {
// function a() {
// this.editor = null,
// this.resizer = null,
// this.cover = null,
// this.doc = document,
// this.prePos = {
// x: 0,
// y: 0
// },
// this.startPos = {
// x: 0,
// y: 0
// }
// }
// var b = !1;
// return function() {
// var c = [[0, 0, -1, -1], [0, 0, 0, -1], [0, 0, 1, -1], [0, 0, -1, 0], [0, 0, 1, 0], [0, 0, -1, 1], [0, 0, 0, 1], [0, 0, 1, 1]];
// a.prototype = {
// init: function(a) {
// var b = this;
// b.editor = a,
// b.startPos = this.prePos = {
// x: 0,
// y: 0
// },
// b.dragId = -1;
// var c = [],
// d = b.cover = document.createElement("div"),
// e = b.resizer = document.createElement("div");
// for (d.id = b.editor.ui.id + "_imagescale_cover", d.style.cssText = "position:absolute;display:none;z-index:" + b.editor.options.zIndex + ";filter:alpha(opacity=0); opacity:0;background:#CCC;", domUtils.on(d, "mousedown click",
// function() {
// b.hide()
// }), i = 0; i < 8; i++) c.push('<span class="edui-editor-imagescale-hand' + i + '"></span>');
// e.id = b.editor.ui.id + "_imagescale",
// e.className = "edui-editor-imagescale",
// e.innerHTML = c.join(""),
// e.style.cssText += ";display:none;border:1px solid #3b77ff;z-index:" + b.editor.options.zIndex + ";",
// b.editor.ui.getDom().appendChild(d),
// b.editor.ui.getDom().appendChild(e),
// b.initStyle(),
// b.initEvents()
// },
// initStyle: function() {
// utils.cssRule("imagescale", ".edui-editor-imagescale{display:none;position:absolute;border:1px solid #38B2CE;cursor:hand;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}.edui-editor-imagescale span{position:absolute;width:6px;height:6px;overflow:hidden;font-size:0px;display:block;background-color:#3C9DD0;}.edui-editor-imagescale .edui-editor-imagescale-hand0{cursor:nw-resize;top:0;margin-top:-4px;left:0;margin-left:-4px;}.edui-editor-imagescale .edui-editor-imagescale-hand1{cursor:n-resize;top:0;margin-top:-4px;left:50%;margin-left:-4px;}.edui-editor-imagescale .edui-editor-imagescale-hand2{cursor:ne-resize;top:0;margin-top:-4px;left:100%;margin-left:-3px;}.edui-editor-imagescale .edui-editor-imagescale-hand3{cursor:w-resize;top:50%;margin-top:-4px;left:0;margin-left:-4px;}.edui-editor-imagescale .edui-editor-imagescale-hand4{cursor:e-resize;top:50%;margin-top:-4px;left:100%;margin-left:-3px;}.edui-editor-imagescale .edui-editor-imagescale-hand5{cursor:sw-resize;top:100%;margin-top:-3px;left:0;margin-left:-4px;}.edui-editor-imagescale .edui-editor-imagescale-hand6{cursor:s-resize;top:100%;margin-top:-3px;left:50%;margin-left:-4px;}.edui-editor-imagescale .edui-editor-imagescale-hand7{cursor:se-resize;top:100%;margin-top:-3px;left:100%;margin-left:-3px;}")
// },
// initEvents: function() {
// var a = this;
// a.startPos.x = a.startPos.y = 0,
// a.isDraging = !1
// },
// _eventHandler: function(a) {
// var c = this;
// switch (a.type) {
// case "mousedown":
// var d, d = a.target || a.srcElement;
// d.className.indexOf("edui-editor-imagescale-hand") != -1 && c.dragId == -1 && (c.dragId = d.className.slice( - 1), c.startPos.x = c.prePos.x = a.clientX, c.startPos.y = c.prePos.y = a.clientY, domUtils.on(c.doc, "mousemove", c.proxy(c._eventHandler, c)));
// break;
// case "mousemove":
// c.dragId != -1 && (c.updateContainerStyle(c.dragId, {
// x: a.clientX - c.prePos.x,
// y: a.clientY - c.prePos.y
// }), c.prePos.x = a.clientX, c.prePos.y = a.clientY, b = !0, c.updateTargetElement());
// break;
// case "mouseup":
// c.dragId != -1 && (c.updateContainerStyle(c.dragId, {
// x: a.clientX - c.prePos.x,
// y: a.clientY - c.prePos.y
// }), c.updateTargetElement(), c.target.parentNode && c.attachTo(c.target), c.dragId = -1),
// domUtils.un(c.doc, "mousemove", c.proxy(c._eventHandler, c)),
// b && (b = !1, c.editor.fireEvent("contentchange"))
// }
// },
// updateTargetElement: function() {
// var a = this;
// domUtils.setStyles(a.target, {
// width: a.resizer.style.width,
// height: a.resizer.style.height
// }),
// a.target.width = parseInt(a.resizer.style.width),
// a.target.height = parseInt(a.resizer.style.height),
// a.attachTo(a.target)
// },
// updateContainerStyle: function(a, b) {
// var d, e = this,
// f = e.resizer;
// 0 != c[a][0] && (d = parseInt(f.style.left) + b.x, f.style.left = e._validScaledProp("left", d) + "px"),
// 0 != c[a][1] && (d = parseInt(f.style.top) + b.y, f.style.top = e._validScaledProp("top", d) + "px"),
// 0 != c[a][2] && (d = f.clientWidth + c[a][2] * b.x, f.style.width = e._validScaledProp("width", d) + "px"),
// 0 != c[a][3] && (d = f.clientHeight + c[a][3] * b.y, f.style.height = e._validScaledProp("height", d) + "px")
// },
// _validScaledProp: function(a, b) {
// var c = this.resizer,
// d = document;
// switch (b = isNaN(b) ? 0 : b, a) {
// case "left":
// return b < 0 ? 0 : b + c.clientWidth > d.clientWidth ? d.clientWidth - c.clientWidth: b;
// case "top":
// return b < 0 ? 0 : b + c.clientHeight > d.clientHeight ? d.clientHeight - c.clientHeight: b;
// case "width":
// return b <= 0 ? 1 : b + c.offsetLeft > d.clientWidth ? d.clientWidth - c.offsetLeft: b;
// case "height":
// return b <= 0 ? 1 : b + c.offsetTop > d.clientHeight ? d.clientHeight - c.offsetTop: b
// }
// },
// hideCover: function() {
// this.cover.style.display = "none"
// },
// showCover: function() {
// var a = this,
// b = domUtils.getXY(a.editor.ui.getDom()),
// c = domUtils.getXY(a.editor.iframe);
// domUtils.setStyles(a.cover, {
// width: a.editor.iframe.offsetWidth + "px",
// height: a.editor.iframe.offsetHeight + "px",
// top: c.y - b.y + "px",
// left: c.x - b.x + "px",
// position: "absolute",
// display: ""
// })
// },
// show: function(a) {
// var b = this;
// b.resizer.style.display = "block",
// a && b.attachTo(a),
// domUtils.on(this.resizer, "mousedown", b.proxy(b._eventHandler, b)),
// domUtils.on(b.doc, "mouseup", b.proxy(b._eventHandler, b)),
// b.showCover(),
// b.editor.fireEvent("afterscaleshow", b),
// b.editor.fireEvent("saveScene")
// },
// hide: function() {
// var a = this;
// a.hideCover(),
// a.resizer.style.display = "none",
// domUtils.un(a.resizer, "mousedown", a.proxy(a._eventHandler, a)),
// domUtils.un(a.doc, "mouseup", a.proxy(a._eventHandler, a)),
// a.editor.fireEvent("afterscalehide", a)
// },
// proxy: function(a, b) {
// return function(c) {
// return a.apply(b || this, arguments)
// }
// },
// attachTo: function(a) {
// var b = this,
// c = b.target = a,
// d = this.resizer,
// e = domUtils.getXY(c),
// f = domUtils.getXY(b.editor.iframe),
// g = domUtils.getXY(d.parentNode);
// domUtils.setStyles(d, {
// width: c.width + "px",
// height: c.height + "px",
// left: f.x + e.x - b.editor.document.body.scrollLeft - g.x - parseInt(d.style.borderLeftWidth) + "px",
// top: f.y + e.y - b.editor.document.body.scrollTop - g.y - parseInt(d.style.borderTopWidth) + "px"
// })
// }
// }
// } (),
// function() {
// var b, c = this;
// c.setOpt("imageScaleEnabled", !0),
// !browser.ie && c.options.imageScaleEnabled && c.addListener("click",
// function(d, e) {
// var f = c.selection.getRange(),
// g = f.getClosedNode();
// if (g && "IMG" == g.tagName && "false" != c.body.contentEditable) {
// if (g.className.indexOf("edui-faked-music") != -1 || g.getAttribute("anchorname") || domUtils.hasClass(g, "loadingclass") || domUtils.hasClass(g, "loaderrorclass")) return;
// if (!b) {
// b = new a,
// b.init(c),
// c.ui.getDom().appendChild(b.resizer);
// var h, i = function(a) {
// b.hide(),
// b.target && c.selection.getRange().selectNode(b.target).select()
// },
// j = function(a) {
// var b = a.target || a.srcElement; ! b || void 0 !== b.className && b.className.indexOf("edui-editor-imagescale") != -1 || i(a)
// };
// c.addListener("afterscaleshow",
// function(a) {
// c.addListener("beforekeydown", i),
// c.addListener("beforemousedown", j),
// domUtils.on(document, "keydown", i),
// domUtils.on(document, "mousedown", j),
// c.selection.getNative().removeAllRanges()
// }),
// c.addListener("afterscalehide",
// function(a) {
// c.removeListener("beforekeydown", i),
// c.removeListener("beforemousedown", j),
// domUtils.un(document, "keydown", i),
// domUtils.un(document, "mousedown", j);
// var d = b.target;
// d.parentNode && c.selection.getRange().selectNode(d).select()
// }),
// domUtils.on(b.resizer, "mousedown",
// function(a) {
// c.selection.getNative().removeAllRanges();
// var d = a.target || a.srcElement;
// d && d.className.indexOf("edui-editor-imagescale-hand") == -1 && (h = setTimeout(function() {
// b.hide(),
// b.target && c.selection.getRange().selectNode(d).select()
// },
// 200))
// }),
// domUtils.on(b.resizer, "mouseup",
// function(a) {
// var b = a.target || a.srcElement;
// b && b.className.indexOf("edui-editor-imagescale-hand") == -1 && clearTimeout(h)
// })
// }
// b.show(g)
// } else b && "none" != b.resizer.style.display && b.hide()
// }),
// browser.webkit && c.addListener("click",
// function(a, b) {
// if ("IMG" == b.target.tagName && "false" != c.body.contentEditable) {
// var d = new dom.Range(c.document);
// d.selectNode(b.target).select()
// }
// })
// }
// } (),
