ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐。

这里我们讲解下 ckeditor最新版本4.7的图片上传配置。

https://ckeditor.com/ 官方

进入下载 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配置图片上传的更多相关文章

  1. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  2. Django配置图片上传

    本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog ...

  3. ckeditor+jsp+spring配置图片上传

    CKEditor用于富文本输入是极好的,它还有一些插件支持扩展功能,其中图片上传就是比较常用到的.本文简单记录我的实现步骤. 1.CKEditor除了提供三种标准版压缩包下载,还可根据自己的需求进行个 ...

  4. drupal中安装CKEditor文本编辑器,并配置图片上传功能

    一.下载: 1.CKEditor模块 2.IMCE模块 二.安装       1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...

  5. UEditor配置图片上传

    最近项目中需要用到一个图文编辑器功能,因为之前的kingeditor功能过于简陋,所以决定换成Ueditor,前端已经配置好了,这个是后台配置 1,确定前台已经配置好了 2,将编辑器的插件包下载下来, ...

  6. struts2+ckeditor配置图片上传

    又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckedito ...

  7. 百度UEditor在线编辑器的配置和图片上传

    前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...

  8. 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)

    我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...

  9. CKEditor与dotnetcore实现图片上传

    CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js&quo ...

随机推荐

  1. html-css___table属性(设置细线边框)

    border-collapse 属性设置表格的边框是否被合并为一个单一的边框 //设置table实线边框 table,td{ /*边框合并*/ border-collapse: collapse; b ...

  2. R语言入门1:安装R和RStudio

    R语言入门1:安装R和RStudio 曹务强 中科院遗传学博士研究生 9 人赞同了该文章 1. Windows安装R 在Windows系统上,安装R语言比较简单,直接从R的官方网站下载,按照正常的软件 ...

  3. curl的使用指南

    一.查看网页源码 直接在curl命令后加上网址,就可以看到网页源码.我们以网址www.sina.com为例(选择该网址,主要因为它的网页代码较短): $ curl www.sina.com ​   M ...

  4. [PHP] cli环境下php设置进程名字

    if (function_exists('cli_set_process_title')) { cli_set_process_title("superman php master proc ...

  5. fstab是什么?被谁用?怎么写?

    关键词:fstab.mount -a.fsck等等. 1. fstab是干什么的? fstab是file system table的意思,即文件系统表. 它在开机的时候告诉系统挂载哪些分区.挂载点是什 ...

  6. Octave中的常用操作2

    >> ones(2:3)ans = 1 1 1 1 1 1 >> 2*ones(2:3)ans = 2 2 2 2 2 2 >> rand(3,3) 产生0~1中的 ...

  7. 006.MongoDB副本集

    一 MongoDB 复制(副本集) 1.1 复制概述 MongoDB复制是将数据同步在多个服务器的过程. 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性, 并可以保证数据的 ...

  8. LeetCode 307. 区域和检索 - 数组可修改

    地址 https://leetcode-cn.com/problems/range-sum-query-mutable/ 题目描述给定一个整数数组  nums,求出数组从索引 i 到 j  (i ≤  ...

  9. WPF 精修篇 窗体唯一(Single) 显示在最前

    原文:WPF 精修篇 窗体唯一(Single) 显示在最前 只运行一个窗体 并在一次点击时 显示到最前 发现用 SetForegroundWindow 并不是稳定的有效 最后使用 SetWindowP ...

  10. 阿里Nacos初体验

    Nacos 从开源到现在已经18个releases了,更新很快,社区也很活跃,光钉钉群的人数那也是好多,每次点个查看全部成员的按钮,我的钉钉就要卡死,也有可能我没更新最新的版本. 前面写了一段时间的S ...