CKEditor在.NET中的应用

转自：http://shawnqiu.javaeye.com/blog/689748

1. 下载ckeditor
官方网址：http://ckeditor.com/
最新版本：CKEditor 3.3.1，released on 10 June 2010

2. 精简ckeditor
删除_samples和_source文件夹，分别为示例文件和未压缩源程序。
删除lang文件夹下除zh-cn.js，en.js下的所有语言文件，或根据需要删除。
删除根目录下的changes.html（更新列表），install.html（安装指向），license.html（使用许可）
删除skins目录下不需要的皮肤。//如果只保留V2则必须在config.js中指定皮肤

3. ckeditor 3.0.1相关文件配置路径
/ckeditor.js 核心文件,调用需加载
/config.js 配置文件,参数配置均在此完成
/plugins/smiley/images 表情符号.

4. ckeditor配置（config.js配置文件）

Config.js代码

config.language = "zh-cn";
config.skin = "office2003";
config.width = "100%";
config.height = "600px";
config.resize_enabled = false;
config.toolbarCanCollapse = false;
config.toolbar = [['Source', 'Preview', '-'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], '/', ['Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About']];

config.language = "zh-cn";
config.skin = "office2003";
config.width = "100%";
config.height = "600px";
config.resize_enabled = false;
config.toolbarCanCollapse = false;
config.toolbar = [['Source', 'Preview', '-'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], '/', ['Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About']];

5. ckeditor内的文本自动换行
修改contents.css，设置如下

Css代码

body { word-break:break-all;//自动换行 }

body { word-break:break-all;//自动换行 }

6. .net环境应用ckeditor
HEAD中引用js脚本

Javascript代码

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

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

将相应的控件替换成编辑器代码

Html代码

<asp:textbox id="txt_CKEditor" runat="server" Width="100%"></asp:textbox>
<script type="text/javascript">
var editor = CKEDITOR.replace('txt_CKEditor');
</script>

   <asp:textbox id="txt_CKEditor" runat="server" Width="100%"></asp:textbox>
   <script type="text/javascript">
     var editor = CKEDITOR.replace('txt_CKEditor');
   </script>

添加一个text控件，用于存放ckeditor的HTML源码

Html代码

<asp:textbox id="txt_NoticeContext" runat="server" Width="1px" TextMode="MultiLine" Height="1px"></asp:textbox>

   <asp:textbox id="txt_NoticeContext" runat="server" Width="1px" TextMode="MultiLine" Height="1px"></asp:textbox>

7. 获取ckeditor的HTML源码
HTML页面中

Javascript代码

<script>
function BindContent()
{
document.Form1.txt_NoticeContext.value = editor.document.getBody().getHtml();
}
</script>

<script>
  function BindContent()
  {
    document.Form1.txt_NoticeContext.value = editor.document.getBody().getHtml();
  }		
</script>

cs页面中

C#代码

protected void Page_Load(object sender, EventArgs e)
{
//向按钮增加读取页面内容的js函数（点击按钮时将文章内容绑定到隐藏的文本框）
btn_Add.Attributes.Add("onclick", "javascript:BindContent();");
}

  protected void Page_Load(object sender, EventArgs e)
  {
    //向按钮增加读取页面内容的js函数（点击按钮时将文章内容绑定到隐藏的文本框）
    btn_Add.Attributes.Add("onclick", "javascript:BindContent();");
  }

获取OO对象时

C#代码

noticeInfoTemp.NoticeContext = txt_NoticeContext.Text;

  noticeInfoTemp.NoticeContext = txt_NoticeContext.Text;

8. 将HTML源码赋给ckeditor
HTML页面中

Javascript代码

<script>
function LoadContent()
{
editor.setData(document.Form1.txt_NoticeContext.value);
}
</script>
...
<body onload="javascipt:LoadContent();">

<script>
  function LoadContent()
  {
    editor.setData(document.Form1.txt_NoticeContext.value);
  }			
</script>
...
<body onload="javascipt:LoadContent();">

cs页面中

C#代码

txt_NoticeContext.Text = t_tw_noticeinfo.NoticeContext;

txt_NoticeContext.Text = t_tw_noticeinfo.NoticeContext;