ITKeyword,专注技术干货聚合推荐

注册 | 登录

Ckeditor编辑器在JAVA中的使用与配置

Mydwr 分享于 2013-02-26

推荐:ckeditor编辑器上传图片

 ckeditor编辑器的页面 cci是textarea的id或者name CKEDITOR.replace('cci',addUploadButton(this));         function addUploadButton(editor){            CK

2020腾讯云共同战“疫”,助力复工(优惠前所未有!4核8G,5M带宽 1684元/3年),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1054

2020阿里云最低价产品入口,含代金券(新老用户有优惠),
地址https://www.aliyun.com/minisite/goods

一、  下载ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个压缩文件,去http://ckeditor.com/官网上下载。

二、  解压缩文件ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个文件,在ckeditor_3.6.2 文件中有ckeditor文件夹;ckeditor-java-core-3.5.3中有ckeditor-java-core-3.5.3.jar、 ckeditor-java-core-3.5.3-javadoc.jar和ckeditor-java-core-3.5.3-sources.jar三个jar包。

三、  我使用的是Myeclipse开发工具,新建工程,接着把ckeditor_3.6.2文件夹下的ckeditor整个复制到工程WebRoot下;然后 把ckeditor-java-core-3.5.3文件夹下的三个jar包复制到WebRoot——>WEB-INF——>lib文件夹 下,最后整个工程的目录如图:


注意:该版本的不需要在web.xml文件中配置<servlet></servlet >

四、  下面写一个jsp页面来使用这个ckeditor,为了省时间,直接在index.jsp页面上写代码。代码如下:

<html>

  <head>

    <title>编辑器</title>

    <script type="text/javascript" src="<%=path %>/ckeditor/ckeditor.js"></script>

  </head>

  <body>

         <form name="testForm"method="post" action="<%=path %>/index.jsp">

     <textarea  cols="80"id="editor1" name="editor1"rows="10">

         在此添加内容

     </textarea>

     <script type="text/javascript">

        CKEDITOR.replace( 'editor1',

         {

推荐:javascript获取ckeditor编辑器的值

CKeditor编辑器是FCKeditor的升级版本 想对于FCK来说,确实比较好用,加载速度也比较快 以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.ins

          skin : 'kama',

          language : 'zh-cn'

         });

    </script>

     <input type="submit"value="提交"/>

    </form>

  </body>

</html>

注意:要使用就必须先引入ckeditor.js文件

<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>

五、    接下来发布工程,启动服务器,在地址栏中输入:http://localhost:8899/ckeditor

就可以访问了。访问的效果如图:


通过上面的介绍,大家应该可以看出使用ckeditor的方便快捷。大家不需要任何的改变就可以在项目中引用在线编辑器了。

当然要想根据自己的需求进行定制就需要进行一些更深入的学习,不过也并不难。

我们可以在项目中新建一个ckconfig.js文件专门用来定制自己的ckeditor,下面贴出一个本人自己的配置

下面是简单的配置

/* 
Copyright (c) 2003-2010, CKSource - Frederico Knabben. Allrightsreserved. 
For licensing, see LICENSE.html or http://ckeditor.com/license 
*/ 
 
CKEDITOR.editorConfig = function( config )     
{     
// Define changes to default configuration here.Forexample:     
config.language = 'zh-cn'; //配置语言     
config.uiColor = '#BFEFFF'; //背景颜色     
config.width = 700; //宽度     
config.height = 300; //高度     
config.skin='kama';     
//工具栏     
config.toolbar =     
[     
    ['Source','Bold','Italic'],     
   ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],    
    ['Smiley'],      
    ['Styles','Font','FontSize'],     
    ['TextColor'],     
    ['Undo','Redo']     
    
];     
}; 
你可以根据自己的需要定制,下面贴出一个含有完整工具栏的配置文件 ,供大家参考定制自己的工具栏

view plaincopy toclipboardprint?
/* 
Copyright (c) 2003-2010, CKSource - Frederico Knabben. Allrightsreserved. 
For licensing, see LICENSE.html or http://ckeditor.com/license 
*/ 
 
CKEDITOR.editorConfig = function( config )  
{  
config.language = 'zh-cn';  
    config.width = 900;  
    config.height = 300;  
    config.skin = 'kama';  
// 背景颜色  
    config.uiColor = '#BFEFFF';  
  config.toolbar_Full = [  
      ['Source','-','Save','NewPage','Preview','-','Templates'],  
      ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],  
      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],  
       ['Form', 'Checkbox', 'Radio','TextField','Textarea', 'Select', 'Button', 'ImageButton','HiddenField'],  
       '/',  
       ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],  
       ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],  
       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],  
        ['Link','Unlink','Anchor'],  
      ['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],  
       '/',  
       ['Styles','Format','Font','FontSize'],  
        ['TextColor','BGColor']  
    ];  
    }; 

只要在页面中将你的配置文件和ckeditor.js同时引入页面,就可以显示你自己定义的ckeditor了。

推荐:UEditor CKEditor 网页编辑器

UEditor:百度编辑器  ,旨在打造符合国人使用习惯的网页编辑器,使用起来确实简单,文档全面,开放源码。 CKEditor 1.下载CKEditor的js库,包含js css文件的整

一、  下载ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个压缩文件,去http://ckeditor.com/官网上下载。 二、  解压缩文件ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个文件

相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。