纯JS文本在线HTML编辑器KindEditor - 双鱼座的天蝎
纯JS文本在线HTML编辑器KindEditor纯JS文本在线HTML编辑器KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器。 它除
顺晟科技
2021-06-16 10:16:52
300
在使用百度富文本编辑器上传图片的过程中,如果有单独的图片服务器,需要将上传的图片放入图片服务器,比如在a.com的编辑器中上传图片,将图片保存到img.com,这就涉及到跨域上传图片。但是ueditor的官方文档里说不支持单幅图片跨域上传,网上查了各种花式,操作猛如猛虎。例如,添加document.domain、配置完整域名等。都是平行的。如果你不知道什么是跨域,你敢定义为跨域。仔细研究了ueditor的演示文件后,你想出了一个折中的办法。很简单。你只需要在演示的两个地方修改代码,写一个上传界面到:
首先,介绍页面编辑器。这里不多说。可以参考前面的文章:Html如何插入百度富文本编辑器ueditor。这里默认已经实现了ueditor的引入,如下图:所示。
1.此时,您上传的图片都存储在本地。如果您想跨域将它们传输到其他服务器,您需要将域名添加到ueditor/php/config.json配置文件中的image configuration item imageurl prefix,这样您就可以在上传图片后将完整路径的图片返回给您,这些图片可以在任何地方显示。在这里,我用客户端a.com通过编辑器上传图片到img.com,所以imageUrlPrefix配置为http://img.com。请注意,它必须是包含http://的完整域名:
2.修改访问路径后,需要修改文件ueditor/php/Uploader.class.php,找到upFile()方法,这是演示中上传文件的主要处理方法。修改这种上传方式比做代理页面或者添加js更简单易懂,即使引入了多个页面。
一个
2
三
四
五
六
七
八
九
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
四十二岁
43
四十四
45
46
47
48
四十九
50
51
五十二
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
六十八
六十九
70
71
七十二
73
74
75
76
77
七十八
79
80
81
私有函数upFile()
{
$ FIle=$ this-FIle=$ _ FILES[$ this-FILEfield];
if(!$file) {
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ FILE _ NOT _ FOUND ');
返回;
}
if ($this-file['error']) {
$ this-StateInfo=$ this-GetStateInfo($ file[' error ']);
返回;
} else if(!file _ exists($ file[' tmp _ name ']){
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ TMP _ FILE _ NOT _ FOUND ');
返回;
} else if(!is _ uploaded _ file($ file[' tmp _ name ']){
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ TMPFILE ');
返回;
}
$ this-OrName=$ file[' name '];
$ this-Filesize=$ file[' size '];
$ this-FileType=$ this-GetFileExt();
$ this-FullName=$ this-GetFullName();
$ this-file path=$ this-GetFilePath();
$ this-fileName=$ this-getFileName();
$ dir name=dir name($ this-FilePath);
//检查文件大小是否超出限制
if(!$this-checkSize()) {
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ SIZE _ EXPER ');
返回;
}
//检查文件格式是否不允许
if(!$this-checkType()) {
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ TYPE _ NOT _ ALLOPED ');
返回;
}
//创建目录失败
if(!file_exists($dirname)!mkdir($dirname,0777,true)) {
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ CREATE _ DIR ');
返回;
} else if(!is _ written($ dirname)){
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ DIR _ NOT _ SLAVERY ');
返回;
}
//移动文件
if(!(move _ uploaded _ file($ file[' tmp _ name '],$ this-file path)file _ exists($ this-file path)){//move失败
$ this-StateInfo=$ this-GetStateInfo(' ERROR _ FILE _ MOVE ');
} else {//移动成功
$ this-StateInfo=$ this-StateMap[0];
}
/**
*这里上面的代码都是演示中的源代码,不需要修改。以下是我需要敲黑板和画重点的地方。先说思路。上面的代码会在本地生成上传的图片内容,然后我们就可以得到上传文件的完整路径。
*获取完整路径,然后调用预打包的上传接口上传到镜像服务器。因为在步中配置了图像服务器的域名,所以最终返回到编辑器窗口的图像路径已经是具有域名的完整路径。
*/
$ IMgpath=“@”。$dirname。'/'.$ this-文件名;//获取生成的本地文件的完整路径
//发送请求的参数
$data=[
myFile'=$imgPath,
imgType'=4
];
$ ServerURL=' http://img.com/API/image . action ';//请求地址
$ ch=curl _ init();//初始化
curl_setopt($ch,CURLOPT_URL,$ ServerURL);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch,CURLOPT_POST,true);
//https协议要求以下两行,否则请求不成功
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,FALSE);
curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,false);
//post方法所需的//参数
curl_setopt($ch,CURLOPT _ POSTFIELDS,$ data);
curl_setopt($ch,CURLOPT_HTTPHEADER,array());
$ result=curl _ exec($ ch);
curl _ close($ ch);
$result=json_decode($result,true);//将接口返回的json数据转换成数组
$ this-FullName=$ result[' IMgurlNormal '];//重置要返回编辑器窗口的图像路径。这一步可以使图像在编辑器中正常显示
}
3.换了这两个地方之后,自己写一个上传图片的接口,把上面的请求地址缓存到你的接口地址。很简单,有很多例子,我就不在这里贴了,所以三步就可以毫无意外的跨域上传图片,不管是单幅还是多幅,简单易懂,方便!
15
2022-09
15
2022-09
15
2022-09
15
2022-09
15
2022-09
15
2022-09