取出客户端卸载CKEditor中的内容，放入数据库中的方案

最新推荐文章于 2022-10-08 20:16:42 发布

GoodShot

最新推荐文章于 2022-10-08 20:16:42 发布

阅读量1.5k

点赞数

分类专栏： ASP.NET 文章标签：数据库 licensing button server styles office

本文链接：https://blog.youkuaiyun.com/GoodShot/article/details/6947430

版权

ASP.NET 专栏收录该内容

326 篇文章

订阅专栏

本文介绍如何在网页中集成CKEditor编辑器，并通过JavaScript与服务器端进行数据交互，实现富文本编辑与内容保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、客户端：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <form id="form1" runat="server">

    <div>
    <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
                        <script type="text/javascript">
                            CKEDITOR.replace( 'editor1' );
                        </script>
        <br />
    </div>
     <input type=hidden id=content runat=server />
     <script>
         document.getElementById("content").value=CKEDITOR.instances.editor1.getData();
     </script>

<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>

二、服务器端得到：

protected void Page_Load(object sender, EventArgs e)
    {

        Response.Write(content.Value);
    }

另外：

ckeditor文件夹中的config.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']
    ];
};