<%@ 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. leetcode笔记（五）809. Expressive Words

    题目描述 Sometimes people repeat letters to represent extra feeling, such as "hello" -> &qu ...

  2. Java反射的两种使用方法

    1.创建User.java package com.tao.test; public class User { private String name; private int id; public ...

  3. 《高性能MySQL》笔记——MySQL建表数据类型的选择

    前段时间看了<高性能MySQL>中的选择优化的数据类型,这里主要是做一下笔记. 首先数据选择有几个简单原则: 更小的通常更好.一般情况下,应该尽量使用可以正确存储数据的最小数据类型.例如只 ...

  4. 方别《QQ群霸屏技术》，又见《QQ群建群细则》

    规则,时刻变动;QQ群系列,咱们再来一轮. QQ群霸屏技术,你说建群貌似很菜,大家仿佛都知道,其实只知其一不知其二. QQ群类别 群分类,常规的就以下几种. 普通群. 建群随意,偏个性化,一言不合就拉 ...

  5. PHP-提升PHP性能的几个扩展

    下面介绍的几个扩展原理都是对OPCODE进行缓存(Opcode缓存原理查看http://www.cnblogs.com/JohnABC/p/4531029.html): Zend Opcache: 由 ...

  6. Hadoop(22)-Hadoop数据压缩

    1.压缩概述 2.压缩策略和原则 3.MapReduce支持的压缩编码 64位系统下的单核i7,Snappy的压缩速率可以达到至少250MB/S,解压缩速率可以达到至少500MB/S 4.压缩方式选择 ...

  7. SSM框架搭建步骤

    首先要导入相关的jar包(spring\spring-core\spring-jdbc\spring-aop\spring-context\spring-webmvc\junit\commons-la ...

  8. 模块导入应用settings的字符串

    看django源码,感觉他的settings好高大上然后自己试试 以上是文件目录 email.py中代码 class Email: def send(self): print('发送email') M ...

  9. WPF 构建无外观（Lookless）控件

    原文:WPF 构建无外观(Lookless)控件 构建一个用户可以使用Template属性设置外观的WPF控件需要以下几步 1.继承自System.Windows.Controls.Control 2 ...

  10. 当应用出现 access violation at address in module时

    Delphi2010和XE10,midas是不同的版本,之前开发的两个系统,基于不同的Delphi版本,经常出现access violation at address in module错误.特别是当 ...