首先去秀米官网下载需要的四个文件,这里做的下载用户体验非常坏死,只有一个HTML文件可以直接下载,剩下的需要访问只能在浏览器中打开,而且还有乱码,那么这里涉及到一个浏览器转码
首先用火狐浏览器访问文件地址
右键选中菜单栏
按照上两图操作,就会正常显示文字,然后新建文件复制粘贴名字取一样的就可以
把四个文件放入Neditor-dialogs目录下,Neditor有一个internal.js,所以这里修改了另一个名称xiumiInternal.js,记住,这里必须另起一个文件,不能直接用internal.js,虽然代码一样,下面会做介绍
1、在neditor页面引入文件:
//需要放在neditor引用的下面
<link rel="stylesheet" href="/public/Neditor/dialogs/xiumi-ue-v5.css">
<script type="text/javascript" charset="utf-8" src="/public/Neditor/dialogs/xiumi-ue-dialog-v5.js"></script>
2、修改xiumi-ue-dialog-v5.js引用:
iframeUrl: editor.ui.UEDITOR_HOME_URL+ 'dialogs/xiumi-ue-dialog-v5.html',
3、修改xiumi-ue-dialog-v5.html引用:
<script type="text/javascript" src="xiumiInternal.js"></script>
4、修改xiumiInternal.js引用:
utils.loadFile(document,{
/*
neditor的internal.js路径:
../../themes/" + editor.options.theme + "/dialogbase.css?cache="+Math.random()
下面的路径把其中一个../去掉,这样秀米就能访问这个路径,而上面的路径是neditor自带功能的访问路径。
一开始以为一个文件就能用,毕竟代码都相同,但是改了这个路径不管怎么改,neditor与秀米都有一方有冲突,故直接另起一个文件,去掉../,冲突解决。
*/
href:"../themes/" + editor.options.theme + "/dialogbase.css?cache="+Math.random(),
tag:"link",
type:"text/css",
rel:"stylesheet"
});
5、修改neditor.config.js 中section: []与img:[]
//增加'class', 'style
section: ['class', 'style']
//增加style
img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'style', 'data-latex']
6、这一步为最最最恶心的一步,因为你发现上面引用后,编辑器中并没有出现秀米图标,这里官网也并没有介绍,实在是坑人啊,没办法,只有查看代码,发现xiumi-ue-dialog-v5.js中有代码如下
UE.registerUI('dialog', function (editor, uiName) {
......
});
发现是编辑器dialog时才会走入这个方法,可能这个就是入口吧,因此直接修改neditor.config.js中toolbars末尾添加toolbars
toolbars: [
[
......
"dialog"
]
]
果不其然,ue上出现图标了:
行,出现了就试试呗,当我高高兴兴的点击了图标弹出来秀米当真心里小小激动了一下,可是当我们选了几张图,点击√号时,发现却是这样的结果:
心里直接凉半截,经官网介绍是catchRemoteImageEnable: true //默认为true
这他丫的就是ueditor本地库啊,而且我用的neditor按照此配置就会如上图所显示,就算是可以正常显示,这个本地库的图片也不是我们需要的,刚开始还以为是这么修改可以直接上传服务器上呢,天真了。
那么此时,我们不需要远程抓取,把neditor.config.js中catchRemoteImageEnable改为false,这样就会实现正常的图片显示:
此时图片用的是秀米服务器访问的图片地址
<img src="http://statics.xiumi.us/stc/images/templates-assets/tpl-paper/image/b830d3aeb409bb6b256012bd83ff5f4c-sz_7161.png" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" _src="http://statics.xiumi.us/stc/images/templates-assets/tpl-paper/image/b830d3aeb409bb6b256012bd83ff5f4c-sz_7161.png">
那么这时你也许会问道,当有一天我们某某秀gua了怎么办,以前的图片就会不显示,那么我们需要在提交时把图片地址替换成自己服务器的图片地址: