在jsp页面中运用CKEditor-JavaSript-爱易网页

在jsp页面中运用CKEditor

日期：2014-05-16　浏览次数：20430 次

在jsp页面中使用CKEditor
在官方下的源码，里面有demo，自己在网上找了些资料，结合自己对demo的研究。
我的使用的是使用CKEditor for Java的jar包使用CKEditor
总计如下：
1.需要一个CKEditor for Java的jar包，我使用的是目前最新版
ckeditor-java-core-3.5.3.jar。
2.需要一个CKEditor的标准包，我使用的是最新版的ckeditor_3.6.2.zip。
3.将jar包引入自己的web工程。
4.将将解压以后的目录复制到工程的WebRoot目录下。
5.在jsp页面中配置如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="ck" uri="http://ckeditor.com"%>
<%
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>My JSP 'index.jsp' starting page</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">
	-->
	<!-- contents.css可以不加
	<link rel="stylesheet" type="text/css" href="ckeditor/contents.css">
	 -->
  </head>
  
  <body>
    <textarea rows="10" cols="10" id="my_txt"></textarea>
    <ck:replace replace="my_txt" basePath="ckeditor"></ck:replace>
  </body>
</html>

此时就可以运行此项目看到效果了。
另外还可以配置WebRoot/ckeditor/config.js，config.js是影响到最后编辑器已什么样的内容展现的。
我的测试配置如下：

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	 //config.language = 'fr';//语言
	 config.width = '800px';//宽度
	 config.height = '200px';//高度
	 config.uiColor = '#AADC6E';//颜色
	 //config.toolbar = 'Basic';//有Full和Basic基本属性。也可以详细配置
	 config.skin = 'kama';//如果不设置默认为kama,还有office2003和v2属性
};

最后附上config.js的详细配置参数：
// 界面语言，默认为 'en'

    config.language = 'zh-cn';

// 设置宽高

    config.width = 400;

    config.height = 400;

// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'

    config.skin = 'v2';

// 背景颜色

    config.uiColor = '#FFF';

// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js

    config.toolbar = 'Basic';

    config.toolbar = 'Full';

    这将配合：

    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'],

       ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

       '/',

        ['S

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

在jsp页面中运用CKEditor

相关资料更多>

推荐阅读更多>