`
javawangli
  • 浏览: 224077 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

java+Ckeditor

 
阅读更多

 

   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插件不能上传图片 处理后才能上传! 期待!

 

 

 

 

  • 大小: 42.7 KB
1
0
分享到:
评论
1 楼 Franciswmf 2013-09-03  
图片上传的东西呢?

相关推荐

    ckeditor+ckeditor-java+ckfinder

    【集成CKEditor+ckeditor-java+ckfinder】 在Java Web项目中集成CKEditor和CKFinder,主要步骤如下: 1. 下载并引入CKEditor和CKFinder的Java版本到项目中。 2. 配置CKEditor的Java插件,使编辑器能够调用CKFinder...

    springMVC的action配置+ckeditor

    SpringMVC是一个强大的Java web框架,它为开发者提供了模型-视图-控制器(MVC)架构,使得构建可维护和可扩展的Web应用程序变得更加容易。在这个主题中,我们将聚焦于如何在SpringMVC中配置Action,并结合CKEditor来...

    jforum+ckeditor整合案例

    JForum是一款流行的Java论坛软件,它提供了一个用户友好的界面,支持多语言,且具有高度可扩展性。CKEditor则是一个先进的在线文本编辑器,广泛用于网站内容管理系统,提供丰富的富文本编辑功能。在JForum中整合...

    ckfinder+ckeditor+jsp+批量上传图片 java版

    ckfinder和ckeditor的整合,ckfinder没有批量上传图片,我加了一个小图标,实现批量上传。网上很少java版的两个整合,自己写了个。不过有个小问题,忙着也没时间去看下,IE下上传图片报找不到路径,大家看看改下哪就...

    fckeditor-java-2.4.1-bin.zip+ckeditor_3.1.zip

    FCKeditor和CKEditor是两个非常知名的开源文本编辑器,广泛应用于网站建设和内容管理系统。 首先,我们来看"Fckeditor-java-2.4.1-bin.zip"。FCKeditor是一款早期的JavaScript富文本编辑器,它提供了丰富的文本格式...

    ssh+sql+jquery+ckeditor+css2+html5+ext4+swt+xmlhttp+易宝支付帮助文档_各类web开发文档

    标题和描述中提到的"ssh+sql+jquery+ckeditor+css2+html5+ext4+swt+xmlhttp+易宝支付帮助文档_各类web开发文档"是一个综合性的Web开发资源集合,涵盖了多个重要的技术领域。以下是这些技术的详细解释: 1. **SSH ...

    struts2 + ckeditor

    Struts2是一个流行的Java web开发框架,它提供了一种模型-视图-控制器(MVC)架构,使得开发者可以更方便地构建可维护、可扩展的Web应用程序。CKEditor则是一个强大的富文本编辑器,广泛用于网站内容创建,它允许...

    ewebeditor v6.2商业版+5.5戒聊修改版商业版+ckeditor_开源版

    ckeditor是另一款非常流行的开源在线富文本编辑器,支持多种编程语言和平台,如PHP、ASP.NET、Java等。ckeditor_3.0.1_open.rar表示的是ckeditor的3.0.1版本的开源版本,开源意味着源代码公开,允许用户自由使用、...

    jsp项目中使用了ckfinder+ckeditor

    在Java Web开发中,JSP(JavaServer Pages)是一种用于创建动态网页的技术。在这个特定的项目中,开发者选择了集成CKFinder和CKEditor来增强页面的编辑功能,这是一套常用的富文本编辑器解决方案。 CKEditor是一款...

    java与ckeditor和ckfinder整合后实现上传图片功能

    以下是对"java与ckeditor和ckfinder整合后实现上传图片功能"这一主题的详细说明。 首先,**CKEditor** 是一个开源的JavaScript富文本编辑器,它提供了丰富的文本格式化选项,让用户可以在网页上创建类似于Word文档...

    jfreechart+ckeditor

    在“jfreechart+ckeditor+tinymce”的组合中,我们可以想象一个场景:一个数据分析师使用JFreeChart生成各种统计图表,然后将这些图表嵌入到由CKEditor或TinyMCE支持的Web应用中,以创建交互式报告。用户可以通过富...

    ckeditor + ckfinder

    CKeditor CKfinder 整合方案,清晰明了,供给有需要的伙伴!

    ckeditor_java_3.5.3和ckfinder_java_2.0.2配置程序案例

    在本文中,我们将深入探讨如何配置`ckeditor_java_3.5.3`和`ckfinder_java_2.0.2`这两个工具,以便在Java Web应用程序中实现富文本编辑功能和图片、文件管理。`CKEditor`是一款强大的JavaScript富文本编辑器,而`...

    CKEditor3.6.4+CKFinder2.3 for java破解整合

    CKEditor3.6.4+CKFinder2.3 for java破解整合

    ckeditor+ckfinder(java 版本)

    **ckeditor+ckfinder(java 版本)** **一、CKEditor与CKFinder简介** CKEditor是一款功能丰富的开源富文本编辑器,它支持多种浏览器环境,提供了丰富的文本编辑功能,包括文字格式化、图像处理、链接创建等。...

    ckeditor-simple-link-plugin:一个简单的插件,可为CKEditor添加链接

    ckeditor-简单链接插件一个简单的插件,可为CKEditor添加链接#GPL许可该程序是免费软件:您可以根据自由软件基金会发布的GNU通用公共许可的条款(许可的版本3)或(根据您的选择)任何更高版本来重新分发和/或修改它...

    CKeditor for JAVA v3.6.4

    CKeditor for JAVA v3.6.4是一款专为JAVA开发者设计的在线网页编辑器,它提供了丰富的文本编辑功能,使得用户可以在浏览器环境下实现所见即所得(WYSIWYG)的编辑体验。这款编辑器不仅限于JAVA平台,还兼容多种...

    ckeditor-java-core-3.5.3

    此版本是"ckeditor-java-core-3.5.3",专门针对Java平台进行了优化,允许开发者在Java应用程序中集成CKEditor的功能。 1. **CKEditor简介** CKEditor是一款基于JavaScript的WYSIWYG(所见即所得)文本编辑器,最初...

    wps在线编辑,java+vue

    2. 在线编辑器:基于Web的富文本编辑器,允许用户进行文字编辑、格式调整、图片插入等操作,可能集成WPS的Web API或使用开源库如CKEditor、Quill等。 3. 实时保存:用户编辑的任何变化都能自动保存,防止意外丢失。 ...

    ckeditor java版

    "ckeditor java版"指的是将CKEditor与Java平台相结合的版本,便于Java开发者使用。 在2012年12月12日发布的这个版本中,我们可以推测这可能是CKEditor 3.5.3的Java适配版。CKEditor 3.5.3是一个稳定的版本,它包含...

Global site tag (gtag.js) - Google Analytics