ASP.NET常用在线编辑器使用方法总结

我们在做web项目的时候,时常会遇到需要在线编辑的情况,需要我们在网页上进行编辑,就像在Word里编辑一样,今天就把常用的几种在线的编辑器介绍给大家,顺便没一种编辑器都会带有相应的使用示例,方便大家使用。好了,废话不多说,直接进入正题。

一、FreeTextBox(点击下载压缩包FreeTextBox用法.zip

FreeTextBox是一个很好用的在线编辑器,使用很简单,同时在线编辑的感觉就像在word里编辑一样,先给大家一个编辑器的图像显示,然后再一步步的教大家如何配置并使用FreeTextBox

显示效果:(可以在文本框里添加图片以及各种文字效果)

1、先将FreeTextBox文件压缩包解压,里边的文件目录如下:

2、Visual Studio工具箱里标准项(其他任意的一项均可)点击右键,选择“选择项”如图示

3、进入选择工具箱项以后,选择浏览按钮,找到刚刚解压的文件夹并找到FreeTextBox.dll选择添加,如图

添加成功之后会在工具箱里看到FreeTextBox控件,如图:

3、将FreeTextBox控件添加到你需要用到的页面,然后将之前我们刚刚解压的文件夹里的

Iamges文件夹和其他的三个.aspx文件添加到项目的根目录下,如图:

4、如果这个时候我们在浏览器里浏览当前页,可能会出现错误,因为我们需要在源文件.aspx中做如下配置

这样做是禁止请求验证,如果不禁用的话,如果请求提交的文本里有特殊的字符就会报错。

5、这个时候我们的文本编辑器已经可以使用了,但是它会有很多的按钮显示不出来,它还需要你对它的ButtonPath进行设置,如图示:

好了,到此为了一个跟Word一样的在线编辑器就配置好了,是不是有点迫不及待呢?赶紧去试一下吧,先给大家上个图,在编辑文本中插入图片:

如果我们需要提交数据则直接在后台代码中this.FreeTextBox1.Text即可。

在这里需要额外强调的一点是,我们的images文件夹和添加的三个.aspx文件都是在项目的根目录下,但是在实际的开发中可能不会在根目录下,这个时候我们需要将FreeTextBoxButtonPath属性做一些修改,应该为"images上一级文件夹名/images/ftb/office2003",同时在项目的根目录下创建一个images文件夹,这样就可以自如的使用FreeTextBox进行在线编辑了。如图示的是在非根目录中使用FreeTextBox,这个时候的ButtonPath"Admin/images/ftb/oofice2003",需要向大家解释的一点是我们之所以要创建images文件夹是因为默认的文件夹被添加到了Admin文件下目录下,上传图片的时候找不到默认的文件了,所以我们需要在项目根目录下创建一个images文件夹,同时我们还需要将ftb.imagegallery.aspx文件复制一份在根目录下,这样就可以自如的在文本框中插入的图片了,否则会提示该文件不存在的。在文本框中插入图片步骤如下,先浏览图片,然后选中要上传的图片,点击上传,上传之后会在对话框中显示已上传成功的图片,这个时候只要双击要插入的图片,就可以把图片插入到文本中了。(下图为非根目录下的FreeTextBox配置,需要大家ftb.imagegallery.aspx文件复制一份在根目录下)

二、CKEditor+CKFinder(点击此处下载压缩包ckfinder_aspnet_1.4.3.zip

我们可以将其理解为一款历史悠久的在线文本编辑器,CKEditor主要是用作文本的编辑,CKFinder主要是用作图片的上传。好了,进入正题。

1、在网站的根目录下创建两个文件夹:ckeditorckfinder

如图:

2、将压缩包ckeditor中的adaptersimageslangpluginsSkinsthemsckeditor.jsconfig.jscontexts.css解压到上一步创建的文件夹ckeditor下,在发帖也引用ckeditor.js文件,对引用的TextBox文本框添加cssclass属性例如:cssclass=ckeditor”并将其文本设置为多行,代码页中可通过TextBoxText属性来获取编辑器内容。如图:

使用Ckeditor控件页代码:

<head runat="server">
    <title></title>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" CssClass="ckeditor" TextMode="MultiLine"></asp:TextBox>
    </div>
    </form>
</body>

3、aspx页的page指令中添加ValidateRequest=false“禁用攻击检测

4、到这里为止我们已经实现了在线的文本编辑器,先给大家看个图像效果

但是我们只能进行文本的编辑,如果想要像FreeTextBox那样在文本中插入图片,则就需要用到了另一个组件ckfinderckfinderckeditor的一个插件,为ckeditor提供上传文件、图片的功能,将解压文件中的CKFinder.dll添加到项目引用,并将coreckfinder.jsckfinder.htmlconfig.ascx解压到ckfinder自己的文件夹下,如图示

5、在ckeditorconfig.js文件中配置上传文件路径:(高亮部分固定不变,一般不要改动)

var ck="/";

config.filebrowserBrowseUrl = ck + 'ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = ck+'ckfinder/ckfinder.html?Type=Images';

config.filebrowserFlashBrowseUrl = ck+'ckfinder/ckfinder.html?Type=Flash';

config.filebrowserUploadUrl = ck + 'ckfinder/core/connector/aspx/connector.aspx?Command=QuickUpload&type=Files';

config.filebrowserImageUploadUrl = ck+'ckfinder/core/connector/aspx/connector.aspx?Command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl = ck + 'ckfinder/core/connector/aspx/connector.aspx?Command=QuickUpload&type=Flash';

6、在ckfinderconfig.ascx文件中进行如下配置:

public override bool CheckAuthentication()

添加如下语句:

if (Session["denglu"].ToString() == "true")

{

return true;

}

else

{

return false;

}

用来验证用户是否有足够的权限上传文件,在登录时设置:session[denglu]=true“如果没有登录则没有权限上传文件,也可以直接设置为true

7、至此已经配置完毕,可以完成文件图片的上传。上传文件、图片时,应先选择上传,然后选择要上传的文件,然后上传到服务器,最后再确定,这样你所要插入的图片就可以显示编辑的文本框中了。如图:

这样就完成了CKEditor的在线编辑、图片上传的使用示例,当然上传文件的的时候也是这样的方法,这里就不再演示了。还需要注意的是本在线编辑器是在空的Asp.Net Web应用程序中使用的,如果你新建的不是项目而是网站,则需要在配置文件里做如下修改:

网站根目录下的web.config文件做如下的配置:

<httpRuntimerequestValidationMode="2.0"/>

同时在使用Ckeditor编辑器的页做如下使用:

然后添加文本框:(代码如下):

<asp:TextBox ID="fck" runat="server" TextMode="MultiLine" Height="503px" Width="100%"  ></asp:TextBox>
 <script type="text/javascript"> CKEDITOR.replace('<%= fck.ClientID %>', { skin: 'kama' });</script>

这样即使在你新建的网站中也可以使用Ckeditor进行在线编辑了。

好了,今天这一节就到这里了。在线编辑器使用的还是比较多的,所以就把常用的两款在线编辑器给总结示例了下,主要还是配置,感觉挺麻烦的,总结下来做以后备用,同时也希望能给大家带来一些帮助,共同学习。如果有不正确的地方还请多多指点。会附上FreeTextBoxCkeditorCkFinder的压缩包,使用的时候先解压下,同时我在压缩包里也附录了一个简单的使用文档,方便大家使用。

当然除此之前还有很多比较好的编辑器比如:kindeditor、HTMLArea还有比较有名的SinaEditor等等,这里我只是总结了经常用的两款编辑器,有兴趣的朋友可以下去再了解下其他的几款编译器,个人感觉SinaEditor用户体验是最好的,但是它体积有点大。见仁见智吧,希望对大家有所帮助。

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 答:ASP.NET和Java Web的主要区别在于它们使用的编程语言不同。ASP.NET使用C#和VB.NET,而Java Web则使用Java语言。此外,ASP.NET的代码常常更加简洁,但Java代码通常更容易扩展。 ### 回答2: ASP.NET和Java Web是两种主流的服务器端Web应用开发框架,它们有以下几个主要区别: 1. 语言:ASP.NET使用C#或Visual Basic作为主要开发语言,而Java Web使用Java语言进行开发。两种语言在语法和特性上有一些差异,开发者可以根据自己的喜好和经验选择适合自己的语言进行开发。 2. 平台依赖性:ASP.NET是基于Microsoft的Windows操作系统开发和运行的,而Java Web则可以在各种操作系统上运行,包括Windows、Linux和Mac等。这意味着ASP.NET开发者需要使用Windows系统进行开发和部署,而Java Web可以在各种平台上进行开发和部署。 3. 框架和工具:ASP.NET使用Microsoft的开发工具集,如Visual Studio等,配合.NET框架进行开发。而Java Web使用Eclipse、IntelliJ IDEA等工具进行开发,结合Java EE平台和各种开源框架,如Spring、Struts和Hibernate等。两种框架和工具集都提供了强大的开发和调试功能,开发人员可以根据自己的需求和偏好选择适合自己的开发环境。 4. 性能和扩展性:ASP.NET和Java Web在性能和扩展性方面有一定的差异。ASP.NET在Windows平台上表现出色,尤其在使用IIS等Microsoft服务器技术时具有较高的性能。Java Web则在跨平台和可扩展性方面具有优势,可以更容易地在不同的平台和环境下进行部署和扩展。 综上所述,ASP.NET和Java Web在语言、平台依赖性、框架和工具、性能和扩展性等方面存在一些区别。开发者可以根据自己的需求和条件选择适合自己的开发框架进行Web应用的开发。 ### 回答3: ASP.NET和Java Web是两种常用的Web开发技术,它们在很多方面有所不同。 首先,ASP.NET是由微软开发的,而Java Web是由Sun Microsystems(现在是Oracle)开发的。这就意味着它们使用的编程语言不同,ASP.NET主要使用C#和VB.NET,而Java Web使用Java语言。 其次,ASP.NET从根本上是Windows平台的一部分,它依赖于IIS(Internet Information Services)作为Web服务器。而Java Web是跨平台的,可以在各种操作系统上运行,如Windows、Linux和Mac OS。 另外,ASP.NET开发工具主要是Visual Studio,这是一个功能强大、集成度很高的开发环境。而Java Web开发可以使用多种集成开发环境,如Eclipse、NetBeans等,也可以使用纯文本编辑器。 此外,ASP.NET和Java Web的架构也不同。ASP.NET采用的是“代码后置”(Code Behind)的方式,即将HTML代码和服务器端代码分离,由CS或VB文件来处理逻辑。而Java Web一般采用的是MVC(Model View Controller)架构,它将应用分成Model(模型)、View(视图)和Controller(控制器)三层,提高了应用的可维护性和可伸缩性。 最后,两者的生态系统也有所不同。ASP.NET可以与其他微软技术无缝集成,如SQL Server、SharePoint等,而Java Web则更加开放,可以与各种开源技术进行整合,如Tomcat、Spring、Hibernate等。 综上所述,ASP.NET和Java Web在编程语言、平台依赖、开发工具、架构和生态系统等方面存在一些区别。选择使用哪种技术主要取决于项目需求、开发团队的技术栈和个人偏好等因素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值