百度编辑器图片上传Js

ueditor.all.min.js 下载链接

链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw
提取码:fnfi

使用方法:

替换原来的 ueditor.all.min.js 

NPM 本地快速DEMO:( 前端 )

  创建一个文件夹:执行如下命令; 再到浏览器运行 localhost:3000 ;( 需要配置本地服务器:修改ueditor.config.js 文件的 serverUrl 的值为本地服务器域名入口,默认为:http://192.168.3.25:19998/index/index/hello )

npm i xuguo_ue && cd node_modules/xuguo_ue && node index.js

  注:PHP需要开启跨域:

        header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods: GET,POST,OPTIONS,DELETE,PUT');
header('Access-Control-Allow-Headers: Origin,Content-Type, Accept, Authorization, X-Request-With');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');

问题:

只是实现了图片的上传与 Dom 的载入,本人为不改变原生百度的编辑的通用逻辑,图片路径显示依然是相对路径;

  注:当使用PHP Thinkphp 5.1时,如果在使用 ROUTE 并只在 模块里添加跨域代码。会导致不能成功跨域。

//解决方法一是修改为默认路由方式(/module/controller/action);

//解决方法二是配置ROUTE路由跨域:以下代码作为参考
Route::get('new/:id', 'News/read')
->header('Access-Control-Allow-Origin','*')
->header('Access-Control-Allow-Methods','GET,POST,OPTIONS,DELETE,PUT')
->header('Access-Control-Allow-Headers','Origin,Content-Type, Accept, Authorization, X-Request-With')
->header('Access-Control-Allow-Credentials', 'true')
->header('Access-Control-Allow-Headers', 'X-Requested-With,X_Requested_With')
->allowCrossDomain();
 

  注如:PHP 使用 Composer 加载使用:composer require xuying/ueditor;   (默认路由:domain.com/ueditor ;因默认路由与保存图片的地址相同,请自配置config.json).然后创建控制器添加如下代码。

//添加对应控制器,将下面代码插入
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods: GET,POST,OPTIONS,DELETE,PUT');
header('Access-Control-Allow-Headers: Origin,Content-Type, Accept, Authorization, X-Request-With');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');
$config_file = __DIR__ . '/../config.json'; //fixme 使用自定义config.json路径
$ss = new Control($config_file);//初始化
$ss->index();//运行

解决思路:

  1. 使用过滤(正则)的方式进行交互;(目前推荐)
  2. 使用CDN的方式配置整体BaseUrl ;
  3. PHP 配置输出域名:如列:(可暂时使用)
       

    缺点:导致数据库数据包含了域名,搬家时需要注意资源内容的访问。
    问题:我们可以在提交时过滤掉内容包含的域名,但是编辑器内容丰富,有可能是其它外部的资源,这样为内容替换增加了难度。

  4. --

百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor的更多相关文章

  1. Ueditor 前后端分离实现文件上传到独立服务器

    关于Ueditor 前后端分离实现文件上传到独立服务器,在网上搜索确实遇到大坑,不过还好遇到了 虚若影 最终实现了,在此感谢!虚若影的原文博客网址:http://www.cnblogs.com/hpn ...

  2. UEditor实现前后端分离时单图上传

    首先,需要下载部署ueditor相关代码,可以参考一篇简单的博客,这里不再赘述: 环境搭建好后,我们先简单使用一下,启动http://web.yucong.com:8080/ueditor/index ...

  3. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  4. [转]微信小程序开发(二)图片上传+服务端接收

    本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...

  5. 富文本编辑器CKeditor的配置和图片上传,看完不后悔

    CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...

  6. springMVC3 ckeditor3.6 图片上传 JS回调

    一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...

  7. 图片上传JS插件梳理与学习

    项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...

  8. 仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大

    1.介绍 ​ 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel ...

  9. 关于Ueditor 前后端分离实现文件上传到独立服务器的问题 望大神们赐教

    最近,由于网站实现多台服务器负载均衡,导致编辑器上传文件需要同步,可是使用同步软件太慢,不太现实,所以想到实现编辑器上传文件直接上传到独立文件服务器.可是没想到遇到坑了. 1.在本地IIS 中添加网站 ...

随机推荐

  1. MySQL 笔记整理(18) --为什么这些SQL语句逻辑相同,性能却差异巨大?

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 18) --为什么这些SQL语句逻辑相同,性能却差异巨大? 本篇我们以三 ...

  2. 解决Win10系统下 C# DateTime 出现星期几的问题

    昨天晚上写代码的时候偶然发现 DateTime 里出现了星期几,当时一阵凌乱,去网上百度没有详细解决办法,很多人说可以用用 ToString 解决. 也有部分人说可以修改系统时间的显示,我打算试一下看 ...

  3. JAVA IO流编程 实现文件的写入、写出以及拷贝

    一.流的概念 流:数据在数据源(文件)和程序(内存)之间经历的路径. 输入流:数据从数据源(文件)到程序(内存)的路径. 输出流:数据从程序(内存)到数据源(文件)的路径. 以内存为参照,如果数据向内 ...

  4. jsp内置对象-response对象

    一.概念 隐含对象response是javax.servlet.HttpServletResponse接口实现类的对象.response对象封装了JSP产生的响应,用于响应客户端的请求,向客户端输出信 ...

  5. web服务器负载均衡与集群基本概念二

    前面已经说过负载均衡的作用是在多个节点之间按照一定的策略(算法)分发网络或计算处理负载.负载均衡可以采用软件和硬件来实现.一般的框架结构可以参考下图.    后台的多个Web节点上面有相同的Web应用 ...

  6. Mac下全局安装yarn

    sudo -s npm install -g yarn react-native-cli

  7. VSCode中快捷输入HTML代码

    VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些. 1.输入html:5,然后按tab键或enter键,效果如下: <!-- 输入html或者html:5生成页面模板 ...

  8. 自托管websocket和webapi部署云服务器域名及远程访问

    当写完websocket和webapi服务端时,在本地测试时是没有问题的,因为是通过本地IP及端口号访问(例:127.0.0.1:8080\api\test),也就没有防火墙等安全限制,但当部署到云服 ...

  9. SQL优化小技巧

    我们要做到不但会写SQL,还要做到写出性能优良的SQL语句. 1.使用表的别名(Alias): 当在SQL语句中连接多个表时, 请使用表的别名并把别名前缀于每个Column上.这样一来,就可以减少解析 ...

  10. centos7的主机名配置

    centos7的主机名配置 方法一:通过配置文件/etc/hostname (重启后生效) 方法二:通过命令hostnamectl  set-hostname    新主机名(会自动把主机名改为小写) ...