ckeditor4.7配置图片上传

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

原文地址:https://www.cnblogs.com/share-record/p/11291645.html

时间: 2024-11-07 17:27:56

ckeditor4.7配置图片上传的相关文章

Django配置图片上传

本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog_project  下建立文件夹 uploads MEDIA_URL = '/uploads/' # 上传图片的路径:D:\blog_project\uploads MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') # 上传图片的根路径 BASE_DIR:

struts2+ckeditor配置图片上传

又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckeditor,觉得里面上传功能挺好用,于是想出这个法子,把网站的编辑器换掉. 用的是最新的版本的,4点几的.很有wordpress的感觉,不知道是不是一家的.先预览一下: 代码: package action; import java.io.File; import java.io.FileInputStre

Java往事之《百度UEditor插件配置图片上传问题》

百度UEditor插件配置图片上传问题 前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的.然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2! 图1 图2 很好!下面看一下如何解决这个问题. 1.首先你可以到官网Ueditor,查看很详细的文档

ckeditor4.5.1配置图片上传的方法

本篇博文主要面向初学者,一步一步地实现ckeditor的图片上传,欢迎各位大神指正. ckeditor的图片上传默认是关闭的,网上也有很多相关的教程,可是不是讲的不完整,就是版本太旧已经不适用.我写这篇博文主要面向初学者,有错误的地方欢迎指正. 截止本文撰写,ckeditor最新版本是4.5.1,我下载的版本是4.5.1standard,如果本文的方法不管用,请下载同一版本尝试. 1.开启图片上传界面 文件地址:ckeditor/plugins/image/dialogs/image.js 搜索

UEditor配置图片上传

最近项目中需要用到一个图文编辑器功能,因为之前的kingeditor功能过于简陋,所以决定换成Ueditor,前端已经配置好了,这个是后台配置 1,确定前台已经配置好了 2,将编辑器的插件包下载下来,将里面文件夹拷到网站的静态资源目录 3,文件夹里面包含一个PHP文件夹,这个里面包含文件上传,后台配置文件,打开config.json文件,需要配置的地方是:"imagePathFormat":"这里写你的上传图片保存路径,一定要是绝对路径" 4,在你引用编辑器的模版中

Ueditor 1.4.3 图片上传配置

1. 在工程中引入 ueditor ueditor其实就是一个js插件,所以一般将其,放到工程的js目录下面 如上图所示的目录,直接将下载下来的ueditor发到js目录中,特别要注意的是此时要吧 jsp 中的 lib 中的这几个包全部复制到 WEB-INF下的lib目录中,特别注意,在复制时前4个jar包可能工程中已经存在了,就一定不要引入重复的jar包,否则就会导致jar包冲突,一定要仔细 2. 在jsp文件中使用ueditor 2.1 在页面中引入 ueditor <script type

.net core CKEditor 图片上传

最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="content" name="content"></text> <script> CKEDITOR.replace('content'); </script> CKeditor config.js 配置代码:需要配置图片上传路径 CKEDIT

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas

ueditor1.4.3 springmvc图片上传

ueditor:百度富文本编辑器,地址:ueditor.baidu.com 版本选择,之所以选择1.4.3,是因为ueditor 1.4.2才修复在bootstrap环境下图片拖拽异常,看到1.4.3也修复了不少的bug,没敢使用1.4.2,稍微看了下源码,1.4.3里面很多todo注释,ueditor一直在改进,不太成熟,既然这么多bug,为什么要选ueditor做富文本编辑?这个看项目组大神了,小喽啰没法做技术引入,如果有选择,不太建议用ueditor商用,bug比较多,当然使用简单也是个有