百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor
百度编辑器图片上传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();//运行
解决思路:
- 使用过滤(正则)的方式进行交互;(目前推荐)
- 使用CDN的方式配置整体BaseUrl ;

- PHP 配置输出域名:如列:(可暂时使用)
缺点:导致数据库数据包含了域名,搬家时需要注意资源内容的访问。
问题:我们可以在提交时过滤掉内容包含的域名,但是编辑器内容丰富,有可能是其它外部的资源,这样为内容替换增加了难度。 --
百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor的更多相关文章
- Ueditor 前后端分离实现文件上传到独立服务器
关于Ueditor 前后端分离实现文件上传到独立服务器,在网上搜索确实遇到大坑,不过还好遇到了 虚若影 最终实现了,在此感谢!虚若影的原文博客网址:http://www.cnblogs.com/hpn ...
- UEditor实现前后端分离时单图上传
首先,需要下载部署ueditor相关代码,可以参考一篇简单的博客,这里不再赘述: 环境搭建好后,我们先简单使用一下,启动http://web.yucong.com:8080/ueditor/index ...
- vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
- [转]微信小程序开发(二)图片上传+服务端接收
本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...
- 富文本编辑器CKeditor的配置和图片上传,看完不后悔
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...
- springMVC3 ckeditor3.6 图片上传 JS回调
一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...
- 图片上传JS插件梳理与学习
项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...
- 仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大
1.介绍 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel ...
- 关于Ueditor 前后端分离实现文件上传到独立服务器的问题 望大神们赐教
最近,由于网站实现多台服务器负载均衡,导致编辑器上传文件需要同步,可是使用同步软件太慢,不太现实,所以想到实现编辑器上传文件直接上传到独立文件服务器.可是没想到遇到坑了. 1.在本地IIS 中添加网站 ...
随机推荐
- DSAPI+DS控件库 Windows7风格控件演示
效果图 部分代码 DSAPI.Win7特性.任务栏特效.初始化() '这句非常重要,很多对任务栏特性的操作都需要先初始化 DSAPI.Win7特性.设置任务栏窗口缩略图(Me, My.Resource ...
- 类和对象,以及 LeetCode 每日一题
所有类都是引用类型. 1 定义类 类是某一批对象的抽象. 1.1 定义类的语法: [修饰符] class 类名{ 零到多个构造器定义 零到多个成员变量 零到多个方法 } 对于一个类定义而言,可以包含三 ...
- 如何将workerman部署到windows服务器上面
一直以来对php的即时通讯都很好奇,其实是不知道应该怎么来实现,后来了解到了swoole和workerman这两个神器,他们都可以实现即时通信的功能,其中swoole是C语言编写的php扩展,其配置起 ...
- spring boot拦截器中获取request post请求中的参数
最近有一个需要从拦截器中获取post请求的参数的需求,这里记录一下处理过程中出现的问题. 首先想到的就是request.getParameter(String )方法,但是这个方法只能在get请求中取 ...
- Vue 单选框与单选框组 组件
radio组件 v-model : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...
- .net开源工作流引擎ccflow表单数据返回值Pop分组模式和表格模式对比
Pop分组模式和表格模式对比 关键词: 驰骋工作流引擎 表单引擎 ccflow .net开源工作流 jflow Java工作流引擎 驰骋工作流程快速开发平台 工作流程管理系统 工作流引擎 a ...
- Express NodeJs Web框架 入门笔记
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一个完整功能的网 ...
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- 海思uboot启动流程详细分析(二)
1. 第二个start.S 从start_armboot开始,在startup.c中有包含#include <config.h> 在config.h中: /* Automatically ...
- hexo 建站参考
1. hexo 官网 2. 主题 AD:https://godbmw.com/ 前期尝试了两天都是看主题,还有编辑主题,最终选择这个主题是因为两点 主题layout是 ejs 学习node时候了解过 ...