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

            }

        }

    }

fckeditor的简单使用的更多相关文章

  1. JavaWEB开发时FCKeditor类似office界面的ajax框架，加入后就能做界面类似office，能进行简单的文本编辑操作+配置手册...

    2019独角兽企业重金招聘Python工程师标准>>> FCKeditor是一款功能强大的开源在线文本编辑器(DHTML editor),它使你在web上可以使用类似微软Word 的 ...

  2. [转载]什么是FCKeditor？功能强大的HTML编辑器！

    天天在用FCKeditor写博客,但一直不清楚FCKeditor到底是什么,今天终于找到了一些相关的资料,大家一起来分享下. FCKeditor文本编辑程序(共享软件)为用户提供在线的文档编辑服务,其 ...

  3. FCKeditor使用方法技术详解

    转载自 http://www.cnblogs.com/cchyao/archive/2010/07/01/1769204.html 1.概述 FCKeditor是目前最优秀的可见即可得网页编辑器之一, ...

  4. SVN四部曲之SVN简单使用教程入门

    1.        签出源代码到本机 在本机创建文件夹StartKit,右键点击Checkout,弹出如下图的窗体: 2.        2 在上图中URL of Repository:下的文本框中输 ...

  5. 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例

    http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...

  6. asp.net文本编辑器（FCKeditor）

    FCKeditor介绍 FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务.它不需要安装任何形式的客户端,兼容绝大多数主流浏览器, ...

  7. FCKEditor使用说明

    1.基本设置   先看看效果是什么样的:   效果图: 那么为什么说是FCKeditor的冰冷之心呢?这不是哗众取宠,主要是说它使用起来有点麻烦,下文就详细说明如何搞定这玩意儿. 1.FCKedito ...

  8. HTML编辑器UEditor的简单使用

    參考自:http://ueditor.baidu.com/website/document.html 关于HTML编辑器,试过FCKeditor,升级版的CKeditor,还有TinyMCE,近期在尝 ...

  9. FCKeditor 插件开发 示例

    (FCKeditor.地址是:http://www.fckeditor.net/.我下载的版本是:2.6.3.)What ?FCKeditor一直是web上编辑器的比较好的一个选择,他是开源的,而且效 ...

随机推荐

  1. VS2013入门驱动配置测试

    准备工作: VS2013 WDK8.1 DbgView InstDrv VS2013+WDK8.1是绝配,意思是这两个版本结合最方便,安装后无需任何改动直接写代码,自动生成模板,省去了设置一些参数繁琐 ...

  2. Spring Boot多环境配置

    在项目开发阶段,开发环境和实际生产环境是不一样,比如使用的数据库/服务连接配置等.因此,配置多个开发环境profile还是必要的 多环境的配置(yml)方式 配置其实很简单,在resource目录下, ...

  3. Linux运维工作中需要掌握的知识

    说到工具,在行外可以说是技能,在行内我们一般称为工具,就是运维必须要掌握的工具.我就大概列出这几方面,这样入门就基本没问题了.linux系统如果是学习可以选用redhat或centos,特别是cent ...

  4. python字符串的格式化输出

    很多时候我们在打印输入内容时希望有简单格式而不是拼接 一般做法: name = input("name:").strip() age = input("age:" ...

  5. 关于Linux中mysql中文乱码

    1.SHOW VARIABLES LIKE 'character_set_%';查看编码集 2.编辑/etc/my.cnf文件 加入这个设置 default-character-set=utf8 (这 ...

  6. DSP+ARM多核异构开发环境SYSLINK搭建OMAPL138

    DSP+ARM多核异构开发环境搭建OMAPL138 注意: 环境为Ubuntu 12.04 只能是这个环境.我甚至在Ubuntu16.04上面安装了VMware,然后,在装了一个Ubuntu 12.0 ...

  7. pygame小游戏之坦克大战

    以前在学校的时候无聊的学了会pygame.看了大概一周的教学视频,做出来个坦克大战的小游戏 Python3.5  pycharm import pygame,sys,time from random ...

  8. 二、Django需要的知识点

    1.请求(request): 客户端到服务器端. 响应(response):服务器端到客户端. HTTP/1.1 协议共定义了 8 种请求方式,分别是: OPTIONS. HEAD. GET. POS ...

  9. QOS-CBQ概述

     QOS-CBQ概述 2018年7月7日    19:56 CBQ(基于类的对列)是一种基于QOS policy实现的拥塞管理技术. CBQ中包含一个LLQ(低延迟队列),用来支撑EF(快速转发)类业 ...

  10. java泛型<? extends E> 有上限通配符与<? Super E>有上限通配符

    通配符?,?表示占位,表明将来使用的时候在指明类型 <?>无限定的通配符, 是让泛型能够接受未知类型的数据 <? extends E> 有上限通配符,能够接受指定类及其子类类型 ...