当前位置： 移动技术网 > IT编程>开发语言>.net > asp.net ckeditor编辑器的使用方法

asp.net ckeditor编辑器的使用方法

2017年12月12日  | 移动技术网IT编程  | 我要评论

通缉女逃犯落网,玉女剑派男掌门,触手控漫画

1. 下载ckeditor放到网站目录下。地址：http://ckeditor.com/
引用js
<script language="javascript" type="text/javascript" src='<%=resolveurl("~/ckeditor/ckeditor.js")%>'></script>
3.添加一个编辑框
<asp:textbox id="mckeditor" runat="server" textmode="multiline"></asp:textbox>
4.在下面添加如下代码
复制代码 代码如下:

<script type="text/javascript">
//<![cdata[
ckeditor.replace( '<%=mckeditor.clientid %>',// mckeditor.clientid为textbox mckeditor生成的对应客户端看到的id
{
skin : 'office2003',//设置皮肤
entermode : number( 2),//设置enter键的输入1.<p>2为<br/>3为<div>
shiftentermode : number( 1), // 设置shiftenter的输入
});
//]]>
</script>

像上面这样就可以完成基本的功能了，但是有的时候我们要上传文件，cfeditor的文件功能是通过插件实现的，下面介绍文件插件的ckfinder的配置
1. 到http://www.ckfinder.com/下载插件（主意选择asp.net版的），放到网站目录下
2. 在之前的ckeditor配置信息后面添加如下代码
复制代码 代码如下:

filebrowserbrowseurl:'<%=resolveurl("~/ckfinder/ckfinder.html")%>',
filebrowserimagebrowseurl:'<%=resolveurl("~/ckfinder/ckfinder.html?type=images")%>',
filebrowserflashbrowseurl:'<%=resolveurl("~/ckfinder/ckfinder.html?type=flash")%>',
filebrowseruploadurl:'<%=resolveurl("~/ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=files")%>',
filebrowserimageuploadurl:'<%=resolveurl("~/ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=images")%>',
filebrowserflashuploadurl:'<%=resolveurl("~/ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=flash")%>'

3. 修改config.ascx文件中的baseurl = "/uploads/"（文件上传目录） 和checkauthentication()上传身份验证。
4. 排除示例文件夹中的fckeditor相关的文件，或者直接删除。（引用了fckeditor相关的命名空间）
有fckeditor.aspx popup.aspx popups.aspx.三个文件
之后应该使用就基本没问题了，但是如果项目中有几个地方都用到了编辑器，就要每个地方都写一段配置信息岂不是很麻烦，所以做了个简单的控件，代码如下：ascx文件
复制代码 代码如下:

<%@ control language="c#" autoeventwireup="true" codefile="mpckeditor.ascx.cs" inherits="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 %>',
{
skin : 'office2003',
entermode : number( 2),
shiftentermode : number( 1),
filebrowserbrowseurl:'<%=resolveurl("~/ckfinder/ckfinder.html")%>',
filebrowserimagebrowseurl:'<%=resolveurl("~/ckfinder/ckfinder.html?type=images")%>',
filebrowserflashbrowseurl:'<%=resolveurl("~/ckfinder/ckfinder.html?type=flash")%>',
filebrowseruploadurl:'<%=resolveurl("~/ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=files")%>',
filebrowserimageuploadurl:'<%=resolveurl("~/ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=images")%>',
filebrowserflashuploadurl:'<%=resolveurl("~/ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=flash")%>'
});
//]]>
</script>

cs文件：
复制代码 代码如下:

using system;
using system.data;
using system.configuration;
using system.collections;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
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)
{
}

使用的地方只要把控件拖过来，后台代码页很简单mpckeditor1.value就可以给它赋值或获取值
复制代码 代码如下:

<uc1:mpckeditor id="mpckeditor1" runat="server" value="疯子来测试"> </uc1:mpckeditor>
protected void button1_click(object sender, eventargs e)
{
response.write("<script language='javascript'>alert('" + httputility.htmlencode(mpckeditor1.value) + ";')</script>");
}

ok

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网