CKeditor(网页在线文字编辑器)写用户控件 - 为学日损

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的输入
            //width: \'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取值、赋值，就可以用了。欢迎大家前来拍砖