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>  
     

    第二部：创建 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>  

    显示结果如下：


    • 大小: 28.6 KB
  • 相关阅读:
    Hamler 0.2 正式发布
    Xamarin.Forms 解决ListView高度问题
    Xamarin.Forms中DependencyService的使用
    Xamarin.Forms Android 底部导航栏
    修改UITabBar样式 TintColor 和 Selected Tab Images in Xamarin.Forms iOS
    Xamarin.iOS中使用MvvmLight框架
    Xamarin.iOS 代码中添加约束练习
    Xamarin.Android 手势密码
    UWP 手势密码实现
    Xamarin.iOS 手势密码
  • 原文地址：https://www.cnblogs.com/hannover/p/2120540.html
Copyright © 2011-2022 走看看