ckeditor4.7配置图片上传
ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐。
这里我们讲解下 ckeditor最新版本4.7的图片上传配置。
进入下载 https://ckeditor.com/download

我们下载完整版
默认本地上传没有开启;
找到ckeditor/plugins/image/dialogs/image.js文件 打开
然后搜索 id:"Upload",hidden 默认值是!0 我们改成0即可
刷新页面,点击那个上传图片图标,

出现了上传;
然后我们配置下上传后台请求路径
找到ckeditor下的config.js 打开
config.filebrowserUploadUrl="/admin/film/ckeditorUpload";
配置下
后台处理有个callback参数CKEditorFuncNum我们要接收下 并且要返回
这里我下我项目里的参考实现 用的是springboot
/**
* 上传图片
* @param file
* @return
*/
@ResponseBody
@RequestMapping("/ckeditorUpload")
public String ckeditorUpload(@RequestParam("upload")MultipartFile file,String CKEditorFuncNum)throws Exception{
// 获取文件名
String fileName = file.getOriginalFilename();
// 获取文件的后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
String newFileName=DateUtil.getCurrentDateStr()+suffixName;
FileUtils.copyInputStreamToFile(file.getInputStream(), new File(imageFilePath+newFileName)); StringBuffer sb=new StringBuffer();
sb.append("<script type=\"text/javascript\">");
sb.append("window.parent.CKEDITOR.tools.callFunction("+ CKEditorFuncNum + ",'" +"/static/filmImage/"+ newFileName + "','')");
sb.append("</script>"); return sb.toString();
}
获取文件,重命名,搞到本地 然后返回ajax信息。
转载:http://blog.java1234.com/blog/articles/339.html
ckeditor4.7配置图片上传的更多相关文章
- 关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
- Django配置图片上传
本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL 和 MEDIA_ROOT 在 D:\blog ...
- ckeditor+jsp+spring配置图片上传
CKEditor用于富文本输入是极好的,它还有一些插件支持扩展功能,其中图片上传就是比较常用到的.本文简单记录我的实现步骤. 1.CKEditor除了提供三种标准版压缩包下载,还可根据自己的需求进行个 ...
- drupal中安装CKEditor文本编辑器,并配置图片上传功能
一.下载: 1.CKEditor模块 2.IMCE模块 二.安装 1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...
- UEditor配置图片上传
最近项目中需要用到一个图文编辑器功能,因为之前的kingeditor功能过于简陋,所以决定换成Ueditor,前端已经配置好了,这个是后台配置 1,确定前台已经配置好了 2,将编辑器的插件包下载下来, ...
- struts2+ckeditor配置图片上传
又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckedito ...
- 百度UEditor在线编辑器的配置和图片上传
前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- CKEditor与dotnetcore实现图片上传
CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js&quo ...
随机推荐
- tableView代理方法执行顺序
tableView代理方法执行顺序,随着iOS系统版本的不断升级,执行顺序也有所变化 1.iOS7.1中先依次调一遍heightForRow方法再依次调一遍cellForRow方法,在调cellFor ...
- 工作日志,go get -v -x github.com/pebbe/zmq4 失败问题
工作日志,go get -v -x github.com/pebbe/zmq4 失败问题 笔者因为工作需要使用ZeroMQ,但是在执行go get -v -x github.com/pebbe/zmq ...
- Script - 检查当前的undo配置和建议设置 (Doc ID 1579035.1)
Script - Check Current Undo Configuration and Advise Recommended Setup (Doc ID 1579035.1) APPLIES TO ...
- Docker 运行一个Web应用
使用 docker 构建一个 web 应用程序. 我们将在docker容器中运行一个 Python Flask 应用来运行一个web应用 参数说明: -d:让容器在后台运行. -P:将容器内部使用的网 ...
- leetcode回溯算法--基础难度
都是直接dfs,算是巩固一下 电话号码的字母组合 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 思路 一直 ...
- MYSQL5.7的安装(yum、二进制、编译安装)
目录 一.环境说明 二.YUM安装 1.安装MYSQL-YUM源 2.安装说明 3.安装前的准备 4.安装 5.启动 三.变更root密码 四.BINARY-INSTALL 1.基础环境准备 2.建立 ...
- C++ 的 +,加号重载示例
#include <iostream> // overloading "operator + " // 要考虑加法的形式 // a+1 // a+a // 1+a // ...
- Java之匿名对象
匿名对象概念 创建对象时,只有创建对象的语句,却没有把对象地址值赋值给某个变量.虽然是创建对象的简化写法,但是应用场景非常有限.匿名对象 :没有变量名的对象. 格式: new 类名(参数列表): // ...
- 简单App项目的运行
我和我的同伴两个人从网上下载一个仿微信登录源码,导入到eclipse中,两人结队练习这个源代码的操作, 运行项目到Android虚拟器上,显示效果为 我们还运行这个项目到手机设备上,显示效果为 接 ...
- 曾Python培训讲师-2年Python开发无包装简历-20191217-可公开
目录 个人介绍 技能介绍 项目经历 自我评价 简历非完整版,需要完整版看下述信息,禁止任何一切私人用途.转发 我生日是27号,那就27元一份,有需求的来购买!只会涨价不会降价,大概卖10份涨1元:曾P ...