首先是下载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图片管理,字体居中,图片居中(超详细)的更多相关文章

  1. ruby -- 进阶学习(十六)ckeditor去除“浏览服务器”按钮

     FROM:http://blog.163.com/zjc_8886/blog/static/2408175201011222590967/ 实现方法: 由于ckeditor中的"上传图片& ...

  2. 通过android 客户端上传图片到服务器

    昨天,(在我的上一篇博客中)写了通过浏览器上传图片到服务器(php),今天将这个功能付诸实践.(还完善了服务端的代码) 不试不知道,原来通过android 向服务端发送图片还真是挺麻烦的一件事. 上传 ...

  3. atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php

    atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 .打开浏览服务器文件夹java .net php 1. 环境:::项目java web,需要打开浏览服 ...

  4. Wcf for wp8 上传图片到服务器,将图片名字插入数据库字段(五)

    环境:.NET Framework 3.5 服务: IIS EXpress托管 WCF服务程序 配置:Web.config <!--<connectionStrings> <a ...

  5. ckeditor中“浏览服务器”的后台操作

    此博文,基于CKeditor 4.5.6版本测试通过. 原创博文,转载请注明出处 参考官方文档,以及网络上的一些帖子.经过调试得到正确的期待中的结果. [网络上的一些所谓的帖子,不知道是故意将上传的代 ...

  6. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  7. Android 上传图片到服务器二--------调用相机7.0以上权限问题

    [目录] (一)上传图片到服务器一 ---------------------------------Android代码 (二)上传图片到服务器二--------------------------- ...

  8. Android 上传图片到服务器 okhttp一

    [目录] (一)上传图片到服务器一 ---------------------------------Android代码 (二)上传图片到服务器二--------------------------- ...

  9. C# fckeditor浏览服务器和上传目录不一致,看不到上传过的文件

    fckeditor在上传标签页面,传过文件后,在浏览服务器那里,看不到之前上传的文件,通过浏览服务器页面上传文件,保存的目录也和上传标签页面上传的不是同一个文件夹. 修改方法如下: 打开fckedit ...

随机推荐

  1. 基础篇四:Ngnix安装

    然后直接 yum  install nginx 安装nginx

  2. getopt|sys|open|print文件|main()|if __name__ == "__main__"|getline()

    #!/usr/bin/python import sys import getopt import re def compare(f1,f2,o1,o2,si_line): lines_count=0 ...

  3. Events|sample space|mutually exclusive events

    5.2Events The collection of all 52 cards—the possible outcomes—is called the sample space for this e ...

  4. 关于 Cantor 集不可数的新观点

    第一步操作:将区间 $[0,1]$ 中去掉开区间 $(\frac{1}{3},\frac{2}{3})$ 后,就形成了两个不交闭区间.于是这两个不交闭区间中至少有两个元素,正好是集合 $\{1\}$ ...

  5. Lua-文件操作

    简单模式和完全模式 简单模式(simple model)拥有一个当前输入文件和一个当前输出文件,并且提供针对这些文件相关的操作. 完全模式(complete model) 使用外部的文件句柄来实现.它 ...

  6. 利用数目找中位数(牛客第七场E)

    https://ac.nowcoder.com/acm/contest/887/E 树状数组做法(代码有注释) #include<bits/stdc++.h> using namespac ...

  7. Google DevTools Explanation

    Evaluating network performance The Network panel records information about each network operation in ...

  8. SpringMVC静态资源拦截的问题

    通常在web.xml中的核心控制器的DispatcherServlet中的url-pattern属性配置成类似“/”的拦截路径,但是会出现静态资源找不到的问题,比如js脚本.图片.css等无法加载,那 ...

  9. Invalid action class configuration that references an unknown class解决方案

    Sturts2整合后时出现诡异的异常: java.lang.RuntimeException: Invalid action class configuration that references a ...

  10. OpenCV Sobel 导数

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...