asp.net(C#)下配置CKEditor

     正在做毕业设计，刚开始接触Asp.net，涉及到web编辑器的使用，在网上了解了一些编辑器后，选择使用CKEditor编辑器。可是问题就来了，究竟在Asp.net下如何使用CKEditor，我在网上找了很多方法，可仍是一头雾水。于是，结合如何配置CKEditor的相关文章和CKEditor官网提供的英文参考。终于琢磨出了一点，现记录于此，主要还是翻译为主。

-----------------------------------------------------------------------------------------------------------------

使用之前，需要下载CKEditor，点此进入官网下载吧。我下载的是CKEditor for ASP.NET ，版本为CKEditor.NET 3.6.4, released on 8 August 2012

下载完CKEditor后，解压，就可以看到一堆的文件，我也没弄清这些文件有什么作用，就看了根目录文件夹下的_Samples文件夹，提供了一些样例，作用类似于使用帮助吧。

下面，就来介绍如何在Asp.net中使用CKEditor了，大部分都是翻译~

1.  首先，先要添加dll文件的引用和注册该控件

If you want use the CKEditor for ASP.NET Control, you must add references to the project and register the control.

1.1 添加dll的引用

复制_Samples\bin\Release\CKEditor.NET.dll至你的网站bin目录下，再为其添加引用【选择bin-右键-添加引用-浏览】

ps:对于复制dll文件到bin文件夹下，再添加引用，我不怎么懂，参考了一篇文章，可见Asp.net调用dll文件

1.2 注册控件

如果你仅在一个页面中使用该控件，只要加入如下代码即可：

<%@Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor"%>

如果你要在多个页面中使用该控件，则需配置web.config文件，在<system.web><pages><controls>下插入如下代码即可：

<add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>

2.  复制_Samples\ckeditor整个文件夹至你的网站的根目录下

 

-----------------------------------------------------------------------------------------------------------

                          至此，就完成了使用之前的基本工作了，下面只要在aspx文件中使用即可了~

-----------------------------------------------------------------------------------------------------------

 

3.  在aspx文件中，插入如下代码即可

<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" runat="server"></CKEditor:CKEditorControl>

4.  自定义CKEditor工具栏

CKEditor toolbar can be adjusted to your needs. You can define a toolbar that contains all the buttons available in the Full toolbar definition using the following code:

4.1 在aspx页面中插入如下代码即可(当然，下面的代码也可写在aspx.cs文件中)，其中CKEditor1为控件的id：

<script language="C#" runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
           CKEditor1.config.toolbar = new object[]
           {
                new object[] { "Source", "-", "Save", "NewPage", "Preview", "-", "Templates" },
                new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },
                new object[] { "Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat" },
                new object[] { "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" },
                "/",
                new object[] { "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript" },
                new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent", "Blockquote", "CreateDiv" },
                new object[] { "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" },
                new object[] { "BidiLtr", "BidiRtl" },
                new object[] { "Link", "Unlink", "Anchor" },
                new object[] { "Image", "Flash", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak", "Iframe" },
                "/",
                new object[] { "Styles", "Format", "Font", "FontSize" },
                new object[] { "TextColor", "BGColor" },
                new object[] { "Maximize", "ShowBlocks", "-", "About" }
          };
       }
</script>

 4.2 当然，你也可以根据实际的需要，修改工具栏，如：

CKEditor2.config.toolbar = new object[]
{
    new object[] { "Bold", "Italic", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink", "-", "About" },
    new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },
};

4.3 此外，你也可以使用已经定义好的工具栏样式，如：

CKEditor3.config.toolbar = "Basic";

CKEditor1.config.toolbar = "Full";

5.  自定义CKEditor外观样式

 5.1 方法一，在使用CKEditor时直接设置，如：

<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" runat="server" UIColor="#BFEE62" Language="de" EnterMode="BR">
</CKEditor:CKEditorControl>

 5.2 方法二，在aspx.cs中用代码控制(也可经过修改后，写在aspx页面中)，如：

  protected void Page_Load(object sender, EventArgs e)
 {
   CKEditor1.config.language = "de";
   CKEditor1.config.enterMode = EnterMode.BR;
   CKEditor1.config.uiColor = "#BFEE62";
 }

6. 获取CKEditor中的值，在aspx.cs中加入如下代码，如：

 protected void Button1_Click(object sender, EventArgs e)
    {
        this.TextBox1.Text = this.CKEditor1.Text;
    }

 

-----------------------------------------------------------------------------------------------------------

                          这样，就可以简单地使用了~，下一篇，将记录CKFinder的用法

-----------------------------------------------------------------------------------------------------------

 

转载于:https://www.cnblogs.com/YummyPumpkin/archive/2012/08/09/2629827.html