asp.net ckeditor编辑器的使用方法_实用技巧

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

时间: 2024-09-12 05:39:44

asp.net ckeditor编辑器的使用方法_实用技巧的相关文章

FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用方法_实用技巧

1.下载最新版FreeTextBox(版本3.1.6),解压 FreeTextBox 3.1.6 (2007/10/17) 作者网站下载地址:http://freetextbox.com/download/ 详细版本有哪些改进和修改历史可以看这里:http://freetextbox.com/download/changelog.aspx FreeTextBox 3.1.6 (2006/07/18) * BUG: Firefox postback problems (due to IE spec

asp.net中调用存储过程的方法_实用技巧

本文实例讲述了asp.net中调用存储过程的方法.分享给大家供大家参考,具体如下: 一.建立并调用一个不带参数的存储过程如下: CREATE PROCEDURE 全部学生<dbo.selectUsers> AS SELECT * FROM 学生 GO EXEC 全部学生 建立并调用一个带参数的存储过程如下: CREATE PROCEDURE 学生查询1 @SNAME VARCHAR(8),@SDEPT VARCHAR(20) AS SELECT * FROM 学生 WHERE 姓名=@SNAM

三种asp.net页面跳转的方法_实用技巧

第一种方法:response.redirect这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但它可以跳转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护.但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session.代码如下  using System; using System

ASP.NET显示渐变图片实现方法_实用技巧

先给大家来个最终效果: 实现效果,首先准备一张图片,高度为25pixel,宽度为1至3pixel渐变的图片.可以这里下载. 还要准备数据: Dictionary<int, int> Datas { get { Dictionary<int, int> d = new Dictionary<int, int>(); d.Add(1, 35); d.Add(2, 45); d.Add(3, 20); return d; } } ok,数据准备完了,在aspx里放三个Labe

Asp.NET调用百度翻译的方法_实用技巧

本文实例讲述了Asp.NET调用百度翻译的方法.分享给大家供大家参考.具体分析如下: Asp.NET调用百度翻译,如下图所示: HTML代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="baidu.aspx.cs" Inherits="FanYi_baidu" %>  <!DOCTYPE html PUBLIC &

ASP.NET使用TreeView显示文件的方法_实用技巧

本文实例讲述了ASP.NET使用TreeView显示文件的方法,是非常实用的技巧.分享给大家供大家参考.具体实现方法如下: 通常在ASP.NET中,TreeView的使用很普遍,这里详细讲述一下使用TreeView显示文件的方法. 1.首先加入TreeView控件: <asp:TreeView ID="driverInfoView" runat="server" ImageSet="XPFileExplorer" OnTreeNodePop

ASP.NET显示农历时间的方法_实用技巧

本文实例讲述了ASP.NET显示农历时间的方法.分享给大家供大家参考.具体实现方法如下: CS部分代码如下: 复制代码 代码如下: public string ChineseTimeNow = "";  public string ForignTimeNow = "";  private static ChineseLunisolarCalendar calendar = new ChineseLunisolarCalendar();  private static

asp.net简单生成验证码的方法_实用技巧

本文实例讲述了asp.net简单生成验证码的方法.分享给大家供大家参考,具体如下: 1.新建一个一般处理程序 namespace WebApplication1 { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfil

asp.net实现输出xml的方法_实用技巧

本文实例讲述了asp.net实现输出xml的方法.分享给大家供大家参考,具体如下: #region 根据xml节点 查询xml节点的值并作修改 /// <summary> /// 根据xml节点 查询xml节点的值并作修改 /// </summary> /// <param name="fileName">要加载的xml文件</param> /// <param name="tagName">xml节点的名