zoukankan      html  css  js  c++  java

  • CKEditor 3.6

    有多种方法可以将CKEditor集成到你的页面中，下面是最通常的做法。

    第一步：载入 CKEditor

    http://ckeditor.com/download 下载ckeditor的最新版本（我下了个5月9号发布的3.6），解压后将 ckeditor 文件夹复制到web工程的根目录下。在要使用CKEditor的页面<head>块中插入以下代码，将其引入：

    Html代码
    1. <head>  
    2.     ...   
    3.     <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>  
    4. </head>  
    <head>
	...
	<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>

    第二部：创建 CKEditor 实例

    首先，在页面中插入一个<textarea>节点：

    Html代码
    1. <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>  
    <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

    如果你想让编辑器在初始化时，显示诸如从数据库等处查出的数据，只需要将他们插入<textarea>节点中，如上面<p>节点中的内容。

    创建好<textarea>后，用 CKEditor API 替换原来的HTML节点，如下：

    Html代码
    1. <script type="text/javascript">  
    2.     CKEDITOR.replace( 'editor1' );   
    3. </script>  
    <script type="text/javascript">
	CKEDITOR.replace( 'editor1' );
</script>

    或者在 window.onload 中：

    Html代码
    1. <script type="text/javascript">  
    2.     window.onload = function()   
    3.     {   
    4.         CKEDITOR.replace( 'editor1' );   
    5.     };   
    6. </script>  
    <script type="text/javascript">
	window.onload = function()
	{
		CKEDITOR.replace( 'editor1' );
	};
</script>

    第三步：更改config.js

    config.js是 CKEditor 的主配置文件，更改config.js来定制自己的 CKEditor 样式：

    Js代码
    1. /*  
    2. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.  
    3. For licensing, see LICENSE.html or http://ckeditor.com/license  
    4. */  
    5.   
    6. CKEDITOR.editorConfig = function( config )   
    7. {   
    8.     // Define changes to default configuration here. For example:   
    9.     // config.language = 'fr';   
    10.     // config.uiColor = '#AADC6E';   
    11.     config.language = 'zh-cn'; // 配置语言   
    12.     config.uiColor = '#FFF'; // 背景颜色   
    13.     config.width = 'auto'; // 宽度   
    14.     config.height = '300px'; // 高度   
    15.     config.skin = 'office2003';// 界面v2,kama,office2003   
    16.     config.toolbar = 'MyToolbar';// 工具栏风格（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js   
    17.     config.toolbarCanCollapse = false;// 工具栏是否可以被收缩   
    18.     config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js   
    19.        
    20.     //自定义的工具栏       
    21.     config.toolbar_MyToolbar =   
    22.     [   
    23.         ['Source','-','Save','Preview','Print'],   
    24.         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],   
    25.         ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],   
    26.         ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],   
    27.         '/',   
    28.         ['Styles','Format'],   
    29.         ['Bold','Italic','Strike'],   
    30.         ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],   
    31.         ['Link','Unlink','Anchor'],   
    32.         ['Maximize','-','About']   
    33.     ];   
    34. };  
    /*
Copyright (c) 2003-2011, 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 example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.language = 'zh-cn'; // 配置语言
    config.uiColor = '#FFF'; // 背景颜色
    config.width = 'auto'; // 宽度
    config.height = '300px'; // 高度
    config.skin = 'office2003';// 界面v2,kama,office2003
    config.toolbar = 'MyToolbar';// 工具栏风格（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
    config.toolbarCanCollapse = false;// 工具栏是否可以被收缩
    config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 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']
    ];
};

    补充：字体选择里面没有中文字体。可以按如下方法添加：

    打开CKeditor目录里的 config.js，在

    CKEDITOR.editorConfig = function( config )

    {

    };

    里添加如下代码：

    config.font_names=’ 宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;’+ config.font_names;

    以后使用的时候就可以用中文字体了。

    第四步：提交编辑器内容

    可以将 CKEditor 实例看作一个<textarea>处理，在表单提交时， CKEditor 实例中的内容被提交到服务器，可以通过<textarea> 的名称获得其内容。

    如果需要在客户端获得 CKEditor 实例的内容，可以通过调用 CKEditor API，在表单提交前对其进行处理，如下：

    Html代码 
    1. <script type="text/javascript">  
    2.     var editor_data = CKEDITOR.instances.editor1.getData();   
    3. </script>  
    <script type="text/javascript">
	var editor_data = CKEDITOR.instances.editor1.getData();
</script>

    一个完整的例子：

    Html代码
    1. <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  
    2. <%   
    3. String path = request.getContextPath();   
    4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
    5. %>  
    6.   
    7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    8. <html>  
    9.   <head>  
    10.     <base href="<%=basePath%>">  
    11.        
    12.     <title>CKEditor</title>  
    13.     <meta http-equiv="pragma" content="no-cache">  
    14.     <meta http-equiv="cache-control" content="no-cache">  
    15.     <meta http-equiv="expires" content="0">       
    16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    17.     <meta http-equiv="description" content="This is my page">  
    18.     <!--  
    19.     <link rel="stylesheet" type="text/css" href="styles.css">  
    20.     -->  
    21.     <script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
    22.   </head>  
    23.      
    24.   <body>  
    25.         <form id="form1" name="form1" method="post" action="display.jsp">  
    26.             <table width="650" height="400" border="0" align="center">  
    27.                 <tr>  
    28.                     <td valign="top">  
    29.                         内容:   
    30.                     </td>  
    31.                     <td>  
    32.                         <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>  
    33.                         <script type="text/javascript">  
    34.                             CKEDITOR.replace( 'editor1' );   
    35.                         </script>  
    36.                     </td>  
    37.                 </tr>  
    38.                 <tr>  
    39.                     <td></td>  
    40.                     <td>  
    41.                         <input type="submit" name="Submit" value="提交" />  
    42.                         <input type="reset" name="Reset" value="重置" />  
    43.                     </td>  
    44.                 </tr>  
    45.             </table>  
    46.         </form>  
    47.     </body>  
    48. </html>  
    <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
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="display.jsp">
			<table width="650" height="400" border="0" align="center">
				<tr>
					<td valign="top">
						内容:
					</td>
					<td>
						<textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
						<script type="text/javascript">
							CKEDITOR.replace( 'editor1' );
						</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>

    显示结果如下：

    配置CKEditor

        主要有三种方式配置CKEditor，可以在 CKEditor API 中CKEDITOR.config 部分查看所有可配置选项。

    一、在页面中配置

        在页面中进行配置是CKEditor官方推荐的方式，这样可以避免修改CKEditor原始的配置文件，使得应用进行升级时更加便捷。可以在任意的创建CKEditor实例的方法中对其进行配置，如CKEDITOR.replace 和 CKEDITOR.appendTo ：

    Js代码
    1. CKEDITOR.replace( 'editor1',   
    2.     {   
    3.         toolbar : 'Basic',   
    4.         uiColor : '#9AB8F3'  
    5.     });  
    CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

    二、在config.js中配置

        默认情况下，这个文件基本是空的，可以在这个文件中进行你所需配置，如：

    Js代码
    1. CKEDITOR.editorConfig = function( config )   
    2. {   
    3.     config.language = 'fr';   
    4.     config.uiColor = '#AADC6E';   
    5. };  
    CKEDITOR.editorConfig = function( config )
{
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

    三、自定义配置文件

        若不想更改config.js文件，CKEditor 也允许用户自定义自己的配置文件。在任意位置创建一份config.js的拷贝，如在根目录下创建一个名为“custom”的文件夹，将config.js文件拷贝至此文件夹，并重命名为“ckeditor_config.js ”，这样，在创建CKEditor实例时，就可以指定此文件为CKEditor的配置文件：

    Js代码
    1. CKEDITOR.replace( 'editor1',   
    2.     {   
    3.         customConfig : '/custom/ckeditor_config.js'  
    4.     });  
    CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

    定义工具栏

        CKEditor提供了许多工具栏按钮，可以根据需要自由选择所需的部分。或使用 CKEditor 提供的两种的工具栏风格：

    Js代码
    1. config.toolbar = 'Full';   
    2.     
    3. config.toolbar_Full =   
    4. [   
    5.     ['Source','-','Save','NewPage','Preview','-','Templates'],   
    6.     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],   
    7.     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],   
    8.     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],   
    9.     '/',   
    10.     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],   
    11.     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],   
    12.     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],   
    13.     ['BidiLtr', 'BidiRtl'],   
    14.     ['Link','Unlink','Anchor'],   
    15.     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],   
    16.     '/',   
    17.     ['Styles','Format','Font','FontSize'],   
    18.     ['TextColor','BGColor'],   
    19.     ['Maximize', 'ShowBlocks','-','About']   
    20. ];   
    21.     
    22. config.toolbar_Basic =   
    23. [   
    24.     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']   
    25. ];  
    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','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['BidiLtr', 'BidiRtl'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];
 
config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

    若想自定义工具栏按钮，可在config.js配置如下片段：

    Js代码
    1. CKEDITOR.editorConfig = function( config )   
    2. {   
    3.     config.toolbar = 'MyToolbar';   
    4.     
    5.     config.toolbar_MyToolbar =   
    6.     [   
    7.         ['NewPage','Preview'],   
    8.         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],   
    9.         ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],   
    10.         ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],   
    11.         '/',   
    12.         ['Styles','Format'],   
    13.         ['Bold','Italic','Strike'],   
    14.         ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],   
    15.         ['Link','Unlink','Anchor'],   
    16.         ['Maximize','-','About']   
    17.     ];   
    18. };  
    CKEDITOR.editorConfig = function( config )
{
    config.toolbar = 'MyToolbar';
 
    config.toolbar_MyToolbar =
    [
        ['NewPage','Preview'],
        ['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']
    ];
};

    若应用中定义了多种工具栏风格，可在创建CKEditor实例时，为其指定一种：

    Js代码
    1. CKEDITOR.replace( 'editor1',   
    2.     {   
    3.         toolbar : 'MyToolbar'  
    4.     });   
    5.     
    6. CKEDITOR.replace( 'editor2',   
    7.     {   
    8.         toolbar : 'Basic'  
    9.     });  
    CKEDITOR.replace( 'editor1',
    {
        toolbar : 'MyToolbar'
    });
 
CKEDITOR.replace( 'editor2',
    {
        toolbar : 'Basic'
    });

    你也可以在创建实例时，直接为其定义工具栏选项：

    Js代码
    1. CKEDITOR.replace( 'editor1',   
    2.     {   
    3.         toolbar :   
    4.         [   
    5.             ['Styles', 'Format'],   
    6.             ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']   
    7.         ]   
    8.     });  
    CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

    样式

        我们可以自定义CKEditor工具栏中“样式”下拉列表的内容，CKEditor提供了许多默认的样式，默认的样式列表定义在“plugins/styles/styles/default.js”文件中。可以通过如下形式定义自己的样式列表，并将其注册到 CKEditor中：

    Js代码
    1. CKEDITOR.stylesSet.add( 'my_styles',   
    2. [   
    3.     // Block-level styles   
    4.     { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },   
    5.     { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },   
    6.     
    7.     // Inline styles   
    8.     { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },   
    9.     { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }   
    10.     // Object styles   
    11.     { name : 'A Style', element : 'a', attributes : { 'color':'#000','text-decoration':'none' } },   
    12.  ]);  
    CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
 
    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
    // Object styles
    { name : 'A Style', element : 'a', attributes : { 'color':'#000','text-decoration':'none' } },
 ]);

    其中，“my_styles”是自定义样式的名称，必须是唯一的。定义好之后，就可以通知CKEditor实例使用这个样式了：

    Java代码
    1. config.stylesSet = 'my_styles';  
    config.stylesSet = 'my_styles';

        自定义的样式可以配置在config.js中、CKEditor实例的jsp页面，或者一个单独的文件，甚至一个已知的URL中，可以通过如下形式指定它的位置：

    Java代码
    1. config.stylesSet = 'my_styles:/styles.js';   
    2.     
    3. OR   
    4.     
    5. config.stylesSet = 'my_styles:http://www.example.com/styles.js';  
    config.stylesSet = 'my_styles:/styles.js';
 
OR
 
config.stylesSet = 'my_styles:http://www.example.com/styles.js';

        一条自定义的样式包括：name、element、 attributes，和CSS样式的定义，如：

    Js代码
    1. {   
    2.     name : '在样式下拉列表中显示的名称',   
    3.     element : 'HTML元素的名称 (如 "span")',   
    4.     styles :   
    5.     {   
    6.         'css-style1' : 'desired value',   
    7.         'css-style2' : 'desired value',   
    8.         ...   
    9.     }   
    10.     attributes :   
    11.     {   
    12.         'attribute-name1' : 'desired value',   
    13.         'attribute-name2' : 'desired value',   
    14.         ...   
    15.     }   
    16. }  
    {
    name : '在样式下拉列表中显示的名称',
    element : 'HTML元素的名称 (如 "span")',
    styles :
    {
        'css-style1' : 'desired value',
        'css-style2' : 'desired value',
        ...
    }
    attributes :
    {
        'attribute-name1' : 'desired value',
        'attribute-name2' : 'desired value',
        ...
    }
}

    其中，name 和 element元素是必选的，其它是可选的。

        CKEditor有三种级别的元素样式，分别是：

    Block-level styles（块级元素样式） – 应用于文本块（段落）。适用于以下元素 These apply to the following elements: address , div , h1 , h2 , h3 , h4 , h5 , h6 , p , and pre .

    Object styles（对象元素样式） – 应用于特殊的可被选择的对象（不是文本），当一个对象被选中之后才被显示。适用于以下对象： a , embed , hr , img , li , object , ol , table , td , tr and ul .

    Inline styles（内联元素样式） – 用于扩展被选中的文本样式。
  • 相关阅读:
    通过输入方式在Android上进行微博OAuth登录
    Android应用集成支付宝接口的简化
    Tomcat启动时报 java.lang.OutOfMemoryError: Java heap space
    Myeclipse中 Exploded location overlaps an existing deployment解决办法
    SVN提交项目时版本冲突解决方案
    Jsp过滤器Filter配置过滤类型汇总
    myeclipse修改jsp文件的名称之后，再也打不开的解决方案
    文件上传之 commons-fileupload(二)
    文件上传之 commons-fileupload(一)
    常见池化技术
  • 原文地址：https://www.cnblogs.com/ChenJw/p/2186561.html
Copyright © 2011-2022 走看看