<%@ 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(); } } }