您的位置：首页 > 产品设计 > UI/UE

UEditor CKEditor 网页编辑器

2016-03-14 18:08 281 查看

UEditor：百度编辑器，旨在打造符合国人使用习惯的网页编辑器，使用起来确实简单，文档全面，开放源码。

CKEditor

1.下载CKEditor的js库，包含js css文件的整个目录，放到网站根目录，假设为ckeditor，

2.编写一个访问页面，假设为ckeditor.jsp，内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>

<script src="<%=contextPath%>/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="content" id="content" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
var editorConfig = {
language: 'zh-cn',
uiColor: '#AADC6E',
filebrowserImageUploadUrl: '<%=contextPath%>/upload/uploadImg.do?type=Images'
};
var content = CKEDITOR.replace('content', editorConfig);
function showData() {
var data = content.getData();
alert(data);
}
</script>
<input type="button" value="showData" onclick="showData();">
</form>

</body>
</html>

ck可以通过配置config.js或者网页内容参数指定以修改ck的一些样式行为等。

后台 spring mvc 代码：

package com.test.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;

@Controller
@RequestMapping("/upload")
public class UploadController {

@RequestMapping("/uploadImg")
@ResponseBody
// upload :这个目前是适用于 CKEditor 上传字段名的，对于其它方式的上传，应该改为对应的字段名字
// 此方法的返回值目前也是适用于 CKEditor的，对于其它方式的上传应该修改为对应的返回值
public String uploadImg(FormParams formParams, @RequestParam("upload") CommonsMultipartFile upFile,
HttpServletRequest request) {
if (upFile.isEmpty()) throw new RuntimeException("file is empty !!!");

String returnBody = null;
String filename = upFile.getOriginalFilename();

System.out.println(upFile.getContentType());
System.out.println(filename);
System.out.println(upFile.getName());
System.out.println(upFile.getSize());

ServletContext servletContext = request.getSession().getServletContext();
String uploadPath = servletContext.getRealPath("/upload");
//获取本地存储路径
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) uploadDir.mkdirs();

File toFile = new File(uploadDir, filename);
try {
upFile.getFileItem().write(toFile); // 将上传的文件写入新建的文件中
System.out.println("=======文件上传成功====");
} catch (Exception e) {
e.printStackTrace();
}

String callback = formParams.getCKEditorFuncNum();
System.out.println("ckCsrfToken: " + formParams.getCkCsrfToken());
System.out.println("CKEditorFuncNum: " + callback);
// 返回“图像”选项卡并显示图片
StringBuilder sb = new StringBuilder();
sb.append("<script type=\"text/javascript\">");
sb.append("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "upload/" + filename + "','')");
sb.append("</script>");
returnBody = sb.toString();

return returnBody;
}
}

package com.test.controller;

public class FormParams {
// 这里的参数目前是适配 CKEditor 提交的，对于其他方式的提交，应该修改为对应的字段
private String ckCsrfToken;
private String CKEditorFuncNum;

public String getCkCsrfToken() {
return ckCsrfToken;
}

public void setCkCsrfToken(String ckCsrfToken) {
this.ckCsrfToken = ckCsrfToken;
}

public String getCKEditorFuncNum() {
return CKEditorFuncNum;
}

public void setCKEditorFuncNum(String CKEditorFuncNum) {
this.CKEditorFuncNum = CKEditorFuncNum;
}
}

代码中使用硬编码的形式，将上传的图片保存到网站根目录的 upload目录下。

注意CK的要求是返回一段 js 脚本，其实是根 ck 的实现有关，ck的在线编辑的实时效果是利用 iframe实现的，其js请求涉及到了跨域问题，故通过 jsonp的形式要求服务器返回特定格式的 script 脚本，以执行后续的逻辑，其回调的js方法是通过 CKEditorFuncNum 参数指定的，另外 ckCsrfToken 用于防

csrf （点击打开链接）攻击的。

UEditor 百度编辑器

UEditor和CKEditor实现架构有点类似，具体没研究，不过UEditor更加简便，原因在于UEditor提供了java客户端，省去了自己写上传保存逻辑的工作。

1.下载UEditor的UTF-8 jsp版本，解压到网站根目录，假设为 ueditor

2.UEditor附带了一个controller.jsp文件，这个文件是前端与后端通信的枢纽，它识别前端的请求并处理返回需要的结果，查看其源码可知它是将页面请求传递到ActionEnter中执行，ActionEnter中定义了不同类型的请求处理，通过页面不同的参数来调用不同的处理逻辑，并返回不同的结果。

PS：注意添加其java依赖到项目的类路径（依赖jar包位于UEditor/jsp/lib下）

3.一个页面示例：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ueditor</title>
</head>

<body>
<form action="" method="post">

<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<%--<input type="submit" value="submit">--%>
</form>


<script type="text/javascript" src="ueditor/ueditor.config.js"></script>

<script type="text/javascript" src="ueditor/ueditor.all.js"></script>

<script type="text/javascript">
var ue = UE.getEditor('container', {
//toolbars: [
//['fullscreen', 'source', 'undo', 'redo', 'bold']
//],
autoHeightEnabled: true,
autoFloatEnabled: true
});
//读取配置项可以通过getOpt方法读取
var lang = ue.getOpt('lang'); //默认返回：zh-cn

//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function () {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容，返回: <p>hello</p>
var html = ue.getContent();
//alert(html);
//获取纯文本内容，返回: hello
var txt = ue.getContentTxt();
//alert(txt);
});
</script>
</body>

</html>

注意：修改 ueditor.config.js文件中的

serverUrl: URL + "controller.jsp"

为正确的路径，保证其通过浏览器可以正确地访问到即可，前端页面需要通过这个 serverUrl 配置的地址与后端 java代码通信，所以这个必需首先配置正确。

其次，config.json便是所有配置的集合，无论是后台java代码相关还是页面相关的保存路径、名称格式、访问前缀、文件大小限制等都在这里配置，对于前端需要的配置则是通过请求上面的 serverUrl 拿到之后再让js使用的，这样，前端和后端都配置在一起了，这种配置到一起的方式对于小应用到还好，如果ueditor复杂到一定成都，这种配置方式最终是要分离重构的。

好了，稍微看看他的工作原理，其实很简单，一个图片上传到请求发送到serverUrl，serverUrl配置的是controller.jsp，接收到请求传递到ActionEnter，ActionEnter通过参数解析发现是上传请求，跟踪其代码会发现会进入到StorageManager中，此类从配置文件中拿到要保存的地址、命名等信息，由

private static State saveTmpFile(File tmpFile, String path)

进行实际文件保存，保存后根据配置中配置的文件访问前缀等信息，组成合适的格式返回到前端js，前端js根据返回的信息就可以拿到图片的访问地址，进而呈现出上传的图片。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航