CKEditor 3.0（FCKEditor3.0)的简单安装配置使用

zhangwenlongchina

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

最近访客更多访客>>

layhaokeai

dr0420

shl716

lmjava33

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

CKEditor 3.0安装配置，只是简单的配置使用。

下载CKEditor 3.0，地址：http://ckeditor.com/

首先，下载下来解压后，把文件夹ckeditor放到你的项目的下。

其次，在你的网页里面加入下面脚本：

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

注意红色部分，这里根据你自己的编辑器路径修改，请务必配置正确。

再次，在需要引用CKEditor编辑器的地方加入下面代码：

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
这里是内容
</textarea>

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

这样，一个编辑器就基本可以使用了。

  


<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<body id="homepage">
<div class="contentbox">

   <script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
<!-- Top Breadcrumb Start -->
<form id="boardform" action="board!save.action" name=""boardform"" method="POST">
 
 
<table width="100%" border="0" cellspacing="3" cellpadding="0">
    <tr>
      <td align="right">标题：</td>
      <td colspan="3">
         <input type="text" value=""  size="70"  name="title" id="title"  class="easyui-validatebox"   required="true" />
      </td>
    </tr>
     
    <tr>
      <td align="right">公告内容：</td>
      <td colspan="3">
     
            <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
</textarea>
     
      </td>
    </tr>
     
    <tr>
      <td width="80" align="right">&nbsp;</td>
      <td colspan="3">
       <input type="button" value="提交" class="btn"  onClick="sub()" />
        <input type="button" value="返回" class="btnalt"  onClick="javascript:window.location='board.action'" />
        </td>
    </tr>
  </table>
  </form>
  
 <script type="text/javascript"> 
   function sub(){
    if($("#title").val() == ""){
     top.easyAlert('提示信息','请输入标题!');
     return;
    }
    if(CKEDITOR.instances.content.getData() == ""){
     top.easyAlert('提示信息','请输入内容!');
     return;
    }
    $.ajax({
        type : "POST",
     url : "board!save.action",  
     data : {'id' : $("#id").val(),'title' : $("#title").val(),'content' : CKEDITOR.instances.content.getData()},
     success : function(json){
      if(json != "error"){
        top.easyAlert('提示信息','保存成功!','info',function(){window.location.href="/bo/board/board!newOrEdit.action?id="+json});
      }else{
       top.easyAlert('提示信息','更新失败!');
      }
     }
    });
   }
  
 
  CKEDITOR.replace( 'content',
   {
    extraPlugins : 'docprops',
    // Remove unused plugins.
    removePlugins : 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',
    // Width and height are not supported in the BBCode format, so object resizing is disabled.
    disableObjectResizing : true,
    // Define font sizes in percent values.
    fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
    toolbar :
    [
     ['Undo','Redo'],
     ['Find','Replace','-','SelectAll','RemoveFormat'],
     ['SpecialChar'],
     ['Bold', 'Italic','Underline'],
     ['FontSize'],
     ['TextColor'],
     ['NumberedList','BulletedList','-','Blockquote'],
     ['Maximize']
    ],
    // Strip CKEditor smileys to those commonly used in BBCode.
    smiley_images :
    [
     'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','tounge_smile.gif',
     'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angel_smile.gif','shades_smile.gif',
     'cry_smile.gif','kiss.gif'
    ],
    smiley_descriptions :
    [
     'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
     'indecision', 'angel', 'cool', 'crying', 'kiss'
    ]
  } );
</script>

servlet中关于ckedit处理文件上传，如果需要ckeditor的上传页签显示需要修改images.js,具体可参考http://blog.csdn.net/mydwr/article/details/8669594，同时需要在config.js中配置请求的action 或者servlet的url，如

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';
	
	config.filebrowserUploadUrl="actions/ckeditorUpload";
	var pathName = window.document.location.pathname;
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    config.filebrowserImageUploadUrl = projectName+'/servlet?flag=uploadFile'; 


};

Java代码如下

	try {
				PrintWriter out = response.getWriter();
				DiskFileItemFactory dff = new DiskFileItemFactory();// 创建该对象0
				dff.setSizeThreshold(1024000);// 指定在内存中缓存数据大小,单位为byte
				ServletFileUpload sfu = new ServletFileUpload(dff);// 创建该对象
				sfu.setFileSizeMax(10*1024*1024);// 指定单个上传文件的最大尺寸}
				String realPath=request.getSession().getServletContext().getRealPath("/");
				String filePath = realPath + CommonResource.RESOURCES_UPLOAD_IMAGES_PATH;
				List<FileItem> fileItems = sfu.parseRequest(request);
				CommonStrCoding csc = new  CommonStrCoding();
				for(FileItem item:fileItems){
					String callback = request.getParameter("CKEditorFuncNum");  
					String expandedName = "";  //文件扩展名     
					String file = item.getName();
					if(StringUtils.isNotEmpty(file)){
						expandedName =file.substring(file.lastIndexOf(".")+1);
					}
					if ("png".equals(expandedName)) {    
						expandedName = ".png";    
					}else if("jpg".equals(expandedName)){    
						expandedName = ".jpg";    
					}else if("gif".equals(expandedName)){    
						expandedName = ".gif";    
					}else if("bmp".equals(expandedName)){    
						expandedName = ".bmp";    
					}else{    
						String message =csc.getStrCodingISO8859("文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)");
						out.println("<script type=\"text/javascript\">");      
						out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'"+message+"');");     
						out.println("</script>"); 
						return;
					}    
					if(item.getSize() > 600*1024){    
						String message = csc.getStrCodingISO8859("文件大小不得大于600K");
						out.println("<script type=\"text/javascript\">");      
						out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'"+message+"');");     
						out.println("</script>");  
						return ;
					}    
					BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
					File targetFilePath = new File(filePath);
					if(!targetFilePath.exists()){
						targetFilePath.mkdirs();
					}
					String file_name="";
					if(StringUtils.isNotEmpty(file)){
						file_name = file.substring(file.lastIndexOf("\\")+1);
					}
					File targetFile = new File(targetFilePath,file_name);
					BufferedOutputStream ou = new BufferedOutputStream(new FileOutputStream(targetFile));// 获得文件输出流
					Streams.copy(in, ou, true);    // 把文件写到你指定的上传文件夹
					// 返回"图像"选项卡并显示图片     
					String showpath = "/portal/uploadFile/images/"+file_name;
					out.println("<script type=\"text/javascript\">");      
					out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + showpath + "','')");      
					out.println("</script>"); 
				}
			} catch (Exception e) {
				throw new IOException(e.getMessage());
			}

关于其他是形式文件上传配置可参考：

参考： http://blog.csdn.net/xiao__gui/article/details/7684505

分享到：

input输入后自动跳转 | java 中Properties 常用方法总结

2013-11-22 23:09
浏览 868
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论