ckeditor和ckfinder的使用

下载

1.      将这两个文件夹拷到网站根目录（可以删掉两个文件夹下的_sample示例和_source源码）

2.      在head标签中加入

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

 

3.  页面中加入

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
         <script type="text/javascript">
             CKEDITOR.replace( '<%=mckeditor.ClientID%>',//生成客户端id             {
             skin : 'office2003',//设置皮肤
             enterMode : Number( 2),//设置enter键的输入1为<p>2为<br/>3为<div>
             shiftEnterMode : Number( 1), // 设置shift+enter的输入
             });
         </script>

4.  在page的属性里加入ValidateRequest="false"

这样在后台通过mckeditor.Text就可接收到编辑好的文本对应的html代码了，然后可以利用div的innerHtml属性显示刚提交的代码

 

要想在当中插入图片，还要配置有关ckfinder的东西

1.       添加对ckfinder下bin目录的ckfinder.dll的引用

2.       在ckeditor下的config.js文件中的CKEDITOR.editorConfig = function(config) {}里添加以下代码

var webname = '/WebSite2';
    config.filebrowserBrowseUrl = webname + '/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = webname+ '/ckfinder/ckfinder.html?Type=Images';
    config.filebrowserFlashBrowseUrl = webname+ '/ckfinder/ckfinder.html?Type=Flash';
    config.filebrowserUploadUrl = webname + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = webname+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = webname+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
    //config.filebrowserWindowWidth = '800';
    //config.filebrowserWindowHeight = '500';

将其中的webname改为网站的名字

 

这样，网站运行起来后就可以通过点击显示出的编辑器的图像按钮来添加图片了