Neditor集成秀米

首先去秀米官网下载需要的四个文件,这里做的下载用户体验非常坏死,只有一个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了怎么办,以前的图片就会不显示,那么我们需要在提交时把图片地址替换成自己服务器的图片地址:

请查看下一篇

猜你喜欢

转载自blog.csdn.net/qq_38529889/article/details/85251237