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

        }
    }

 

posted @ 2017-08-29 22:55  H.U.C-王子  阅读(231)  评论(0)  编辑  收藏  举报