CKEditor 入门

泄露秘密 提交于 2021-01-12 19:09:23

有多种方法可以将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>  

 

 

第二部:创建 CKEditor 实例

 

首先,在页面中插入一个<textarea>节点:

 

Html代码  收藏代码

  1. <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>  

 

或者在 window.onload 中:

 

Html代码  收藏代码

  1. <script type="text/javascript">  

  2.     window.onload = function()  

  3.     {  

  4.         CKEDITOR.replace( 'editor1' );  

  5.     };  

  6. </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. };  

 

 

第四步:提交编辑器内容

 

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

 

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

 

Html代码  收藏代码

  1. <script type="text/javascript">  

  2.     var editor_data = CKEDITOR.instances.editor1.getData();  

  3. </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>  

 

显示结果如下:



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!