CKeditor(网页在线文字编辑器)写用户控件

最近做一个项目，由于要在多个地方用到CKeditor，所以就用Textbox和ckeditor写了一个用户控件

1、下载一个ckeditor包，下载地址为http://ckeditor.com/download

2、把下载的ckeditor包复制到网站的根目录下，并精简ckeditor 3.0.1包：

删除_samples和_source文件夹,分别为示例文件和未压缩源程序

删除lang文件夹下除zh-cn.js,en.js下的所有语言文件.根据需要删除

删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).

删除skins目录下不需要的皮肤.我一般用V2(简单.朴素) //如果只保留V2则必须在config.js中指定皮肤

3、项目右键单击-添加-新建项-web面板-web用户控件，

设置名称为：mpckeditor.ascx

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="mpckeditor.ascx.cs" Inherits="travel.Admin.mpckeditor" %>

<script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>

    <script type="text/javascript">
        //<![CDATA[
        CKEDITOR.replace( '<%=mckeditor.ClientID %>',// mckeditor.ClientID为TextBox mckeditor生成的对应客户端看到的id
        {
            toolbarCanCollapse: true,   //工具栏是否可以被收缩
            toolbarStartupExpanded : true, //工具栏默认是否展开
            skin            : 'office2003',//设置皮肤

            enterMode     : Number( 2),//设置enter键的输入1.<p>2为<br/>3为<div>

            shiftEnterMode   : Number( 1), //  设置shiftenter的输入
            // '500',//设置宽
            // height: '76',//设置高
            toolbar :
            [
//                //加粗   斜体，   下划线      穿过线    下标字        上标字
//                ['Bold','Italic','Underline','Strike','Subscript','Superscript'],
//                //数字列表       实体列表          减小缩进    增大缩进
//                ['NumberedList','BulletedList','-','Outdent','Indent'],
//                //左对齐         居中对齐          右对齐        两端对齐
//                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//                //超链接  取消超链接  锚点
//                ['Link','Unlink','Anchor'],
//                //图片    flash    表格       水平线            表情       特殊字符        分页符
//                ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
//                '/',
//                //样式     格式     字体   字体大小
//                ['Styles','Format','Font','FontSize'],
//                //文本颜色   背景颜色
//                ['TextColor','BGColor'],
//                //全屏      显示区块
//                ['Maximize', 'ShowBlocks','-']
             [ 'NewPage' , 'Preview' ],
              [ 'Cut' , 'Copy' , 'Paste' , 'PasteText' , 'PasteFromWord' , '-' , 'Scayt' ],
              [ 'Undo' , 'Redo' , '-' , 'Find' , 'Replace' , '-' , 'SelectAll' , 'RemoveFormat' ],
              [ 'Image' , 'Flash' , 'Table' , 'HorizontalRule' , 'Smiley' , 'SpecialChar' , 'PageBreak' ],
              '/' ,
              [ 'Styles' , 'Format','Font','FontSize' ],
              ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
             '/',
              ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
             ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
              [ 'Link' , 'Unlink' , 'Anchor' ],
              [ 'Maximize' , '-' , 'About' ]
            ]
        });
        //]]>
    </script>

 

后台代码为：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace travel.Admin
{
    public partial class mpckeditor : System.Web.UI.UserControl
    {
        public string value
        {

            set { mckeditor.Text = value; }

            get { return mckeditor.Text; }

        }
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

 

4、使用时新建一个Webfrom页面。

从解决方案管理器中直接拖动到webfrom页面

在后台用value取值、赋值，就可以用了。欢迎大家前来拍砖