main.js
import "../static/uEditor/ueditor.config.js";
import "../static/uEditor/ueditor.all.min.js";
import "../static/uEditor/lang/zh-cn/zh-cn.js";
import "../static/uEditor/ueditor.parse.min.js";
import "../static/uEditor/xiumi-ue-dialog-v5.js";
import "../static/uEditor/xiumi-ue-v5.css";
.edui-button.edui-for-xiumi-connect .edui-button-wrap .edui-button-body .edui-icon {
background-image: url("http://xiumi.us/connect/ue/xiumi-connect-icon.png") !important;
background-size: contain;
}
UE.registerUI('dialog', function (editor, uiName) {
var btn = new UE.ui.Button({
name : 'xiumi-connect',
title : '秀米',
onclick: function () {
var dialog = new UE.ui.Dialog({
iframeUrl: '/static/uEditor/xiumi-ue-dialog-v5.html?cache='+Math.random(),
editor : editor,
name : 'xiumi-connect',
title : "秀米图文消息助手",
cssRules : "width: " + (window.innerWidth - 60) + "px;" + "height: " + (window.innerHeight - 60) + "px;",
});
dialog.render();
dialog.open();
}
});
return btn;
});
folder.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XIUMI connect</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
#xiumi {
position: absolute;
width: 100%;
height: 100%;
border: none;
box-sizing: border-box;
}
</style>
</head>
<body>
<iframe id="xiumi" src="http://xiumi.us/studio/v5#/paper">
</iframe>
<script type="text/javascript" src="dialogs/internal.js"></script>
<script>
var xiumi = document.getElementById('xiumi');
var xiumi_url = "http://xiumi.us";
xiumi.onload = function () {
console.log("postMessage");
xiumi.contentWindow.postMessage('ready', xiumi_url);
};
document.addEventListener("mousewheel", function (event) {
event.preventDefault();
event.stopPropagation();
});
window.addEventListener('message', function (event) {
if (event.origin == xiumi_url) {
editor.execCommand('insertHtml', event.data);
editor.fireEvent("catchRemoteImage");
dialog.close();
}
}, false);
</script>
</body>
</html>
(function () {
var parent = window.parent;
//dialog对象
dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )];
//当前打开dialog的编辑器实例
editor = dialog.editor;
UE = parent.UE;
domUtils = UE.dom.domUtils;
utils = UE.utils;
browser = UE.browser;
ajax = UE.ajax;
$G = function ( id ) {
return document.getElementById( id )
};
//focus元素
$focus = function ( node ) {
setTimeout( function () {
if ( browser.ie ) {
var r = node.createTextRange();
r.collapse( false );
r.select();
} else {
node.focus()
}
}, 0 )
};
utils.loadFile(document,{
href:editor.options.themePath + editor.options.theme + "/dialogbase.css?cache="+Math.random(),
tag:"link",
type:"text/css",
rel:"stylesheet"
});
lang = editor.getLang(dialog.className.split( "-" )[2]);
if(lang){
domUtils.on(window,'load',function () {
var langImgPath = editor.options.langPath + editor.options.lang + "/images/";
//针对静态资源
for ( var i in lang["static"] ) {
var dom = $G( i );
if(!dom) continue;
var tagName = dom.tagName,
content = lang["static"][i];
if(content.src){
//clone
content = utils.extend({},content,false);
content.src = langImgPath + content.src;
}
if(content.style){
content = utils.extend({},content,false);
content.style = content.style.replace(/url\s*\(/g,"url(" + langImgPath)
}
switch ( tagName.toLowerCase() ) {
case "var":
dom.parentNode.replaceChild( document.createTextNode( content ), dom );
break;
case "select":
var ops = dom.options;
for ( var j = 0, oj; oj = ops[j]; ) {
oj.innerHTML = content.options[j++];
}
for ( var p in content ) {
p != "options" && dom.setAttribute( p, content[p] );
}
break;
default :
domUtils.setAttributes( dom, content);
}
}
} );
}
})();
ueditor.config.js
//修改UEditor的配置（ueditor.config.js），将其中的“xxs过滤白名单”加上
section:['class', 'style'],
确保在UEditor的前端设置(ueditor.config.js)中打开了“远程图片抓取到本地保存”
//设置远程图片是否抓取到本地保存
//需要后端同学配合修改
catchRemoteImageEnable: true //设置是否抓取远程图片
参考来源: 秀米图文排版UEditor插件示例
网友评论