CKEditor4.7怎样实现上传图片,浏览服务器(无需ckfinder),nodejs图片管理,字体居中,图片居中(超详细)...
首先是下载CKEditor,下载地址:http://ckeditor.com/download
选择里面的Customize自定义,如图
然后进入配置界面,第一个choose preset一般就选standard标准的
第二个需要添加两个东西进去
第一个是Justify
它的作用是添加左对齐右对齐居中的按钮,可以使字体居中,但只添加这个无法使图片居中
第二个是Enhanced Image
有了它,就可以使图片居中了。
然后根据自己的需求进行添加,但注意这里面有许多是不支持4.7版的,谨慎添加,有很多添加之后无法显示编辑器。
然后选择skin皮肤,添加language语言,在这里我添加了中文简体和中文繁体,根据你的需要。
最后,勾上同意协议,点击下载就行了。
下载解压后会得到一个文件夹,这就是你需要的文件夹,把它放到你的项目public中,文件夹打开有个ckeditor.js文件,通过<script src="/ckeditor/ckeditor.js"></script>
添加到你的网页,就可以在网页中使用了,使用方法:
<textarea name="content" id="editor1" rows="10" cols="80">内容</textarea>
<script>CKEDITOR.replace('editor1', {language: 'zh-CN',//改成中文版});
</script>
然后就可以在网页看到效果了
我们点开图片,发现并没有上传图片的功能,也没有浏览服务器的功能
现在我们来一一实现
首先图片上传功能,找到ckeditor文件夹,进入后找到plugins,点进去
找到iamge2文件夹,进入后找到image2.js,用编辑器打开,搜索hidden,此文件中只有两处hidden,找到id为'Upload'的hidden,将'!0'的'!'去掉,如图:
此时刷新页面点击图片会发现多了个上传标签
此时就可以点击Choose File上传图片了,但是点击上传到服务器不能上传,此时需要在ckeditor文件夹中的config.js配置文件中加一段代码:
config.filebrowserUploadUrl = '/ckeditorUpload?type=File';
config.filebrowserImageUploadUrl = "/ckeditorUpload?type=image";
config.filebrowserFlashUploadUrl = '/ckeditorUpload?type=Flash';
一般就加第一个就行了,也可以三个都加,顾名思义,看它的名字就会懂什么意思了吧,后面的是你的服务器后台,响应过去,在你的服务器实现上传,每种语言实现也就不一样,这里不详讲,有问题的可以去看看你使用语言的文件上传方式,上传图片的功能就实现了。
然后是浏览服务器的功能,可是在上面连按钮都没有,怎么实现呢?其实很简单的,只需在刚才的config.js文件里面加上这段代码即可:
config.filebrowserImageBrowseUrl = '/browerServer?type=image';
后面的是你服务器响应地址,保存后去刷新页面,发现,按钮已经出来了
但是在服务器里面要怎么实现图片的管理呢?这里每种语言实现也不一样了,大家可以自行搜索图片管理的代码,但我看到网上Java的,PHP的挺多,就是很少看到nodejs的,这里给出nodejs的实现方法:
服务器代码:
router.get('/browerServer', function (req, res, next) {var callback = req.query.CKEditorFuncNum;var imgPath = ".\/public\/images\/uploads";var imgInfols = [];try {var files = rd.readSync(imgPath);for (var i in files) {if (!fs.lstatSync(files[i]).isDirectory()) {if (files[i].toLowerCase().split(/\.(jpg|jpeg|png|gif|bmp)$/).reverse()[0].length == 0) {console.log(files[i]);imgInfols[imgInfols.length] = {name: files[i].split("\/").reverse()[0],//获取文件名url: files[i].split("\/public").reverse()[0],mtime: fs.statSync(files[i]).mtime}}}}}catch (e) {console.log(e);}imgInfols.sort(function (a, b) {return Date.parse(b.ctime) - Date.parse(a.ctime);});console.log(callback);res.render('adminImgManage', {results:imgInfols, callback:callback});
});
adminImgManage.ejs代码://这里我用了image-picker,详见http://rvera.github.io/image-...
<% include ../header.ejs %>
<link rel="stylesheet" type="text/css" href="/stylesheets/image-picker.css">
<script src="/javascripts/prettify.js" type="text/javascript"></script>
<script src="/javascripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="/javascripts/show_html.js" type="text/javascript"></script>
<script src="/javascripts/image-picker.min.js" type="text/javascript"></script>
<div class="container"><div><div class="text-center" style="padding-bottom: 20px;"><button type="button" class="btn btn-primary select">选择</button><button type="button" class="btn btn-primary delete">删除</button></div><select class="image-picker" style="display: none;"><% results.forEach(function(item){ %><option data-img-src="<%= item.url%>" value="<%= item.name%>"><%= item.name%></option><%})%></select></div>
</div>
<script type="text/javascript">
jQuery("select.image-picker").imagepicker({hide_select: false,
});
$(document).ready(function(){$(".select").click(function(){window.location.href = "/adminSelectImg/" + $(".image-picker").val() + "/" + <%= callback%>;});$(".delete").click(function(){window.location.href = "/adminDeleteImg/" + $(".image-picker").val();});
});
</script>
<% include ../footer.ejs %>
图片选择服务器处理代码:
router.get('/adminSelectImg/:name/:callback', function (req, res, next) {var name = req.params.name;var callback = req.params.callback;var str = "<script type=\"text/javascript\">" + "window.opener.CKEDITOR.tools.callFunction("+ callback + ",'" + "/images/uploads/"+ name + "','');window.close();" + "</script>";res.send(str);
});
删除的代码就不粘了,举一反三,注明下代码中的window.opener.CKEDITOR.tools.callFunction,这个是ckeditor的反值得函数,执行后就会把括号内的后面的路径加载到图像信息的URL中,这样点击确定就可以将图片放入编辑器了。
CKEditor4.7怎样实现上传图片,浏览服务器(无需ckfinder),nodejs图片管理,字体居中,图片居中(超详细)...相关推荐
- ftp服务器连接时间太长(耗时20s或40s)问题解决(超详细图文教程)
连接ftp耗时特别长怎么办: 1.xshell连接上服务器,编辑配置文件 vim /etc/vsftpd/vsftpd.conf 2.在配置文件里添加一行 reverse_lookup_enable= ...
- 图片批量重命名方法(超详细 无需辅助软件 本地运行)
[检索关键词/句] 1. 按excel内容为图片批量重命名 2. bat文件运行解决 3. excel两列内容合并 6. bat文件运行中文乱码问题 5. 批量顺序重命名后阔号()问题 6. 班级资料 ...
- 如何搭建苹果虚拟服务器降级,ios14怎么降级13.6 苹果iOS14降级超详细教程
iOS14相信很多朋友都体验过了,最近不少的小伙伴都升级到iOS14,但是对这个版本并不满意,那么iOS14怎么降级13.6呢?下面就来为大家分享一下苹果iOS14降级13.6的教程. 1.通过 iT ...
- 小米电视系统统计服务器,史上最全!小米电视4 各系列超详细对比
原标题:史上最全!小米电视4 各系列超详细对比 小米电视作为智能电视的新秀,以优秀的品牌号召力.良好的口碑,当然免不了小米一直以来的价格攻势,逐渐成为电视领域的领头羊,目前市面上包含小米电视4.4A. ...
- 服务器Ctrl+R快捷键阵列(RAID)卡配置步骤【超详细】
目录 Ctrl+R快捷键阵列卡配置步骤 一. 查看raid状态 二. 删除Raid 阵列 三. 大存储下Raid配置建议 四. Raid 5 的配置: 五. Raid 0 的配置 六. Raid 1 ...
- 微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
- 【安卓开发之图片分享应用5:上传图片到服务器】
安卓上传图片到服务器阿里云OSS(可实现多图片上传) 开发过程中遇到的问题 1.W/System.err: java.net.UnknownServiceException: 一.效果演示 二.购买阿 ...
- FCKeditor 上传图片和浏览服务器时提示请先登陆的解决办法
在一个网站中用到这个编辑器,可老是在上传或是浏览服务器目录的时候出现提示"请先登陆.",试过了好多版本都是这样,甚至是直接把别人的项目中的拿过来用也不行,在网上查了一天也没有找到解 ...
- 【前端】CKeditor屏蔽“浏览服务器”功能
CKEditor+CKFinder屏蔽"浏览服务器"按钮 1.去除上传图片功能中的浏览服务器按钮 打开ckeditor\plugins\image\dialogs\image.js ...
- android上传本地图片到服务器上,Android使用post方式上传图片到服务器的方法
本文实例讲述了Android使用post方式上传图片到服务器的方法.分享给大家供大家参考,具体如下: /** * 上传文件到服务器类 * * @author tom */ public class U ...
最新文章
- Fescar 全局锁介绍
- 美团性能分析框架和性能监控平台
- boost::set_union相关的测试程序
- NoSQL, Clojure
- WebIDE Initialization process
- CF536C-Tavas and Pashmaks【凸壳】
- nginx 直接在配置文章中设置日志分割
- 百度地图no result available_【整理之路二】百度地图的路径规划和调用本机地图导航...
- 排序上---(排序概念,常见排序算法,直接插入,希尔排序,直接选择排序,堆排序)
- 2014年驾考科目三考试扣分标准(细则)
- python 数字转化excel行列_Python实现excel的列名称转数字、26进制(A-Z)与10进制互相转换...
- 去360总部参加网络信息安全会议经历
- 6.18张朝阳再次直播带货 现拌现吃凉拌槐花上演“回忆杀”
- 让你的网页更精彩 - Javascript 调用MSAgent (转)
- 嵌入式c学习第一步:dev cpp编译器安装
- Xmind 中附件的存放位置
- cv2 EigenFace(特征脸)
- python编写word_如何使用Python来编辑word
- tx2 can通信之开机自动加载can模块
- LTE中RNTI介绍