fckeditor的简单使用
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="res/js/jquery.js"></script>
<script type="text/javascript" src="res/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
$(function(){
var fck=new FCKeditor("myTextArea");
fck.BasePath="res/fckeditor/";
fck.ReplaceTextarea();
})
</script>
</head>
<body>
<textarea rows="" cols="" id="myTextArea"></textarea>
</body>
</html>以上是最基础的引入，同时可以自定义编辑框的工具栏，在fckconfig.js中复制
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;更改为
FCKConfig.ToolbarSets["myToolBar"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']
] ;之后在jsp中添加
$(function(){
var fck=new FCKeditor("myTextArea");
fck.BasePath="res/fckeditor/";
fck.ToolbarSet="myToolBar";//自定义工具栏
fck.ReplaceTextarea();
})fck支持图片上传到服务器，只要加入
//指定到后台Control层进行实现
fck.Config["ImageUploadURL"] = "/upload/uploadFck.do";注意：写控制层时需要引入相应的jar包java-core-2.6.jar，使用该jar包提供的类来完成代码，如下：
// 上传Fck图片
@RequestMapping(value = "/upload/uploadFck.do")
public void uploadFck(HttpServletRequest request, HttpServletResponse response) {
// 强转request 支持多个
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
// 获取值 支持多个
Map<String, MultipartFile> fileMap = mr.getFileMap();
// 遍历Map
Set<Entry<String, MultipartFile>> entrySet = fileMap.entrySet();
for (Entry<String, MultipartFile> entry : entrySet) {
// 上传上来的图片
MultipartFile pic = entry.getValue();
// 扩展名
String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
// 图片名称生成策略
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
// 图片名称一部分
String format = df.format(new Date());
// 随机三位数
Random r = new Random();
// n 1000 0-999 99
for (int i = 0; i < 3; i++) {
format += r.nextInt(10);
}
// 实例化一个Jersey
Client client = new Client();
// 保存数据库
String path = "upload/" + format + "." + ext;
// 另一台服务器的请求路径是?
String url = Constants.IMAGE_URL + path;
// 设置请求路径
WebResource resource = client.resource(url);
// 发送开始 POST GET PUT
try {
resource.put(String.class, pic.getBytes());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 返回Url给Fck fck-core...jar ckeditor
UploadResponse ok = UploadResponse.getOK(url);
// response 返回对象
// response write
// response print
// 区别:
// 字符流
// 字节流
try {
response.getWriter().print(ok);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-08-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
