<%@ 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. 【原创】关于skip-gram的个人理解

    ★skip-gram的关键术语与详细解释:   [语料]—— 所有句子文档(当然会出现大量重复的单词) [词典(可用V维的onehot编码来表示)]—— 语料中出现的所有单词的集合(去除了重复词) [ ...

  2. Hadoop(17)-MapReduce框架原理-MapReduce流程,Shuffle机制,Partition分区

    MapReduce工作流程 1.准备待处理文件 2.job提交前生成一个处理规划 3.将切片信息job.split,配置信息job.xml和我们自己写的jar包交给yarn 4.yarn根据切片规划计 ...

  3. Centos安装docker#避免很多坑

    采用yum方式安装 安装: step 1: 安装必要的一些系统工具 yum install -y yum-utils device-mapper-persistent-data lvm2 Step 2 ...

  4. python 复习函数 装饰器

    # 函数 —— 2天 # 函数的定义和调用 # def 函数名(形参): #函数体 #return 返回值 #调用 函数名(实参) # 站在形参的角度上 : 位置参数,*args,默认参数(陷阱),* ...

  5. 652. Find Duplicate Subtrees

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...

  6. 文件 I/O缓冲流

    import java.io.File; import java.io.Writer; import java.util.StringTokenizer; import java.io.Reader; ...

  7. git的基本操作总结

    参考链接 https://blog.csdn.net/u012661010/article/details/73433872 https://blog.csdn.net/shj_php/article ...

  8. 【MVC】 小问题

    [MVC] 小问题 1. url 传参中文乱码 : encodeURIComponent 转码 2. RedirectToAction 重定向 : ajax 调用无效, 直接 url 访问有效 3. ...

  9. wirehshark解密IPSEC流量

    wireshark解密IPSEC加密过的流量 题目是安恒二月月赛题目:简单的流量分析 1.首先会发现很多esp类型的流量 我们不知道密钥就没有办法解密,猜测密钥肯定是在流量包里面的. 加密流量在786 ...

  10. 数据库学习（二） case when then else end 的使用

    case函数还用来统计数据的,参考资料:https://www.cnblogs.com/qlqwjy/p/7476533.html 这里我只是整理下工作中使用的到案例: 查询语句: SELECT t. ...