CKEditor 3.6入门–通过 javascript 调用CKEditor 编辑器

现在的位置: 首页 > 综合 > 正文

RSS

CKEditor 3.6入门–通过 javascript 调用CKEditor 编辑器

2017年11月19日 ⁄ 综合 ⁄ 共 3502字 ⁄ 字号小中大 ⁄ 评论关闭

IT程序员开发必备-各类资源下载清单，史上最全IT资源，个人收藏总结！

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

Developer's Guide : http://docs.cksource.com/CKEditor_3.x/Developers_Guide

----Integration :

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration

第一步：载入 CKEditor

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

Html代码

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

第二部：创建 CKEditor 实例

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

Html代码

<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>

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

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

Html代码

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

或者在 window.onload 中：

Html代码

<script type="text/javascript">
	window.onload = function()
	{
		CKEDITOR.replace( 'editor1' );
	};
</script>

第三步：更改config.js

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

Js代码

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

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

Html代码

    <script type="text/javascript">  
        var editor_data = CKEDITOR.instances.editor1.getData();   
    </script>

一个完整的例子：

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 
  <script type="text/javascript">
    function getData(){
        var editor_data = CKEDITOR.instances.editor1.getData();     
        alert(editor_data);
    }
  </script> 
  </head>  
     
  <body>  
        <form id="form1" name="form1" method="get" 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="提交"  onclick="getData()"/>  
                        <input type="reset" name="Reset" value="重置" />  
                    </td>  
                </tr>  
            </table>  
        </form>  
    </body>  
</html>

显示结果如下：

【上篇】CKEditor 3.6入门–在 jsp 中通过自定义标签调用
【下篇】软件工程文档编写标准包括哪些内容？

作者: superbike

该日志由 superbike 于6年前发表在综合分类下，最后更新于 2017年11月19日.
转载请注明: CKEditor 3.6入门–通过 javascript 调用CKEditor 编辑器 | 学步园 +复制链接

抱歉!评论已关闭.

学步园