java+Ckeditor

javawangli

浏览: 224874 次
性别:
来自: 北京

最近访客更多访客>>

mmylover

rubys

yss1605

qq222196

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

人生
javascript
java编程

CKEditor 二次开发 ---- 为 CKEditor 增加上传图片的功能
文章分类 :Java 编程
这是我做的一个个人知识管理的一部分，现在把这部分提取出来，加上原代码，希望对大家学习工作有一定的的参考价值。

我对 JAVA 情有独钟，可惜，原本可以用 CKFinder 来完成图片上传的功能，可是呢， CKFinder 不支持 java, 所以我只能自己对 CKEditor 动一下手。其实原理也很简单，只是把原来可以配置为上传的那个页面换成我们自己开发的上传页面。在这里，使用了 Action 来实现图片的上传，对不需要 Action 或对 Action 不懂的朋友，可以使用 Servlet 来代替那部分的功能，在此，我不就不多说了。

首先是下载插件了大家可以去官网上下载http://ckeditor.com/download/，在这里我已经下载了最新的版本大家可以直接下载

接下来第一步：

在myeclipse 新建一个web project 起名CkeditorPro(也可以随便起)，让将下载的插件解压将ckeditor_3.6.2下的ckeditor文件夹拷贝到webRoot下。

第二步：

修改config.js文件

CKEDITOR.editorConfig = function( config )  
{  
    // Define changes to default configuration here. For example:  
  // config.language = 'fr';  
    // config.uiColor = '#AADC6E';  
    config.language = 'zh-cn'; // 配置语言  
    config.uiColor = '#FFF'; // 背景颜色  
    config.width = 'auto'; // 宽度  
    config.height = '500px'; // 高度  
    config.skin = 'office2003';// 界面v2,kama,office2003  
    config.toolbar = 'Full';// 工具栏风格（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js  
    config.toolbarCanCollapse = false;// 工具栏是否可以被收缩  
    config.resize_enabled = true;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js  
 
      
    //自定义的工具栏      
    config.toolbar_MyToolbar =  
    [  
        ['Source','-','Save','Preview','Print'],  
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],  
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],  
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],  
        '/',  
        ['Styles','Format'],  
        ['Bold','Italic','Strike'],  
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],  
        ['Link','Unlink','Anchor'],  
        ['Maximize','-','About']  
    ];  
};

这里的config.js里的参数是来定义ckeditor界面的；大家可以找找Config中的参数的意思这里就不多说了

第三步：

在index.jsp中添加一个标签

 <textarea id="content" name="editor1"></textarea>

在添加js

 <script type="text/javascript">  
                            CKEDITOR.replace( 'content' );  
                        </script>

最后的页面是

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>CKEditor</title>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->  
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
  </head>  
    
  <body>  
        <form id="form1" name="form1" method="post" action="getContent">  
            <table width="800" height="400" border="0" align="center">  
                <tr>  
                    <td valign="top">  
                        内  容:  
                    </td>  
                    <td>  
                        <textarea id="content" name="editor1"></textarea>  
                        <script type="text/javascript">  
                            CKEDITOR.replace( 'content' );  
                        </script>  
                        


</script>
                        
                    </td>  
                </tr>  
                <tr>  
                    <td></td>  
                    <td>  
                        <input type="submit" name="Submit" value="提交" />  
                        <input type="reset" name="Reset" value="重置" />  
                    </td>  
                </tr>  
            </table>  
        </form>  
    </body>  
</html>

最后部属项目，运行tomcat 访问http://localhost:8080/CkeditorPro

效果图

*注意现在的Ckeditor插件不能上传图片处理后才能上传！期待！

ckeditor_3.6.2.zip (2.2 MB)
下载次数: 21

查看图片附件

1
顶

0
踩

分享到：

(原创)javascript 实现批量打印《简历》 | 不查不知道一查全知道（hibernate注解实 ...

2012-03-23 18:09
浏览 1994
评论(1)
分类:开源软件
查看更多

1 楼 Franciswmf 2013-09-03

图片上传的东西呢？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

java+Ckeditor

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

java+Ckeditor

评论

发表评论

相关推荐

项目框架和项目架构的区别是什么？

(原创)javascript 实现批量打印《简历》

iteye 这是咋了

不查不知道 一查全知道（hibernate注解实现set集合排序）

《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}

JDK7.0语法新特性及下载

系统性能调优总结分享(转载)

JAVA内存问题：Java heap space

“五一放假调整”疑是病毒？

50首最好听的英文歌

Jquery从入门到精通及附件下载（一）

javascript eval函数解析json数据时为什么 加上圆括号

Json 浅谈及解析

Ajax 实现分页及表与表的级联

《神》预测本周五 java 考试题！！

解决Js解析xml浏览器不兼容问题及省市区三级联动实现

js 解析xml文件实现省市级联下拉菜单

超强 DOM增删改,js日历综合案例实现

DOM总结（三）及综合案例

DOM 总结（二）

最近访客更多访客>>

不查不知道一查全知道（hibernate注解实现set集合排序）

javascript eval函数解析json数据时为什么加上圆括号