内容提交[ckeditor系列]CKEditor 3.6 入门

最新推荐文章于 2020-12-22 11:31:29 发布

dyl_love98

最新推荐文章于 2020-12-22 11:31:29 发布

阅读量280

点赞数

文章标签：内容提交

本文链接：https://blog.csdn.net/javablogs/article/details/8885004

版权

时间紧张，先记一笔，后续优化与完善。

第一步：载入 CKEditor

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

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

第二部：创立 CKEditor 例实

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

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

或者在 window.onload 中：

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

第三步：改更config.js

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

/*  
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，在表单提交前对其行进处置，如下：

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

一个整完的例子：

每日一道理
喜马拉雅直冲霄汉，可上面有攀爬者的旗帜；撒哈拉沙漠一望无垠，可里面有跋涉者的脚印；阿尔卑斯山壁立千仞，可其中有探险者的身影；雅鲁藏布江湍急浩荡，可其中有勇敢者的故事。

<%@ 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>

文章结束给大家分享下程序员的一些笑话语录：一位程序员去海边游泳，由于水性不佳，游不回岸了，于是他挥着手臂，大声求.救：“F1，F1！”

dyl_love98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容提交[ckeditor系列]CKEditor 3.6 入门

时间紧张，先记一笔，后续优化与完善。第一步：载入 CKEditor http://ckeditor.com/download 下载ckeditor的最新版本（我下了个5月9号宣布的3.6），解压后将 ckeditor 文件夹复制到web工程的根目录下。在要应用CKEditor的页面块中插入以下代码，将其引入： head> ... scri
复制链接

扫一扫