大家好,我是L。我最近发现我的办公管理系统里的文本编辑器真的是。。。忍不了了,所以我想换一换,在网上找到一个办法,和大家分享一下,这项技术在VS2003中已经应用了,也算比较老的技术,但是对于大家应该还是比较有用的。
博客,论坛也都会用到文本编辑器,发帖子之类的,类似于Word,比较常用,如果自己开发一个文本编辑器,成本也是很高的,好多代码都设计到JavaScript,不太容易,也比较麻烦。现在网上很多工作室也开始做专门的成品然后卖,这次我用的是一个ASP版本的免费版,当然不能用于商业,要是用于商业就一定要购买版权。可能有很多网友和水友都会了,但是我觉得还是共享出来给不太熟悉的朋友,代码在文章后面会上传上来,代码很简单,我写一点思路。
1.首先,下载ASP文本编辑器压缩包
,这个我文章后面附件也会上传的。里面都是ASP,可以先看下运行效果,当然ASP是要在IIS下运行的,这里一定要注意,后面新建网站的时候是要选择的。进入系统目录,找到IIS根目录(C:\Inetpub\wwwroot),复制进来,运行Test1.asp。下面两张图大家应该就可以看明白了。这个文本编辑器功能比较全,操作也比较简单,很方便。
![](https://i-blog.csdnimg.cn/blog_migrate/e79a4bd3ab63d0e5123e5c02daedcb96.png)
![](https://i-blog.csdnimg.cn/blog_migrate/45489b890cbf5c4f360f69c577b094b6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/310f0d69ebef6b96a3b82167672a326a.png)
2.然后,我们把这个ASP版本变成能在.NET下使用。打开VS2008,(或者VS2005都行),新建一个网站,然后选 HTTP,一般都是选文件系统,ASP需要在IIS上运行, 当然也可以是远程。
![](https://i-blog.csdnimg.cn/blog_migrate/d902167539130b53ae7aca39a16b0a40.png)
3.把解压后的ASP文本编辑器粘贴到项目中来
![](https://i-blog.csdnimg.cn/blog_migrate/31b63a98ffbfd02dd0056b77cf564a24.png)
看一下test1.asp的源代码:
<
TABLE
border
="0"
cellpadding
="2"
cellspacing
="1"
>
< TR >
< TD >编辑内容: </TD>
< TD >
< INPUT type ="hidden" name ="content1" value="<p > </p> < p > < font color=#ff0000 >本样式为自带默认样式,最佳调用宽度550px,高度350px! </font> </p> < p >下面为一些高级调用功能的例子,你可以用脚本方便的编辑进行一些操作。 </p> < p >看到这些内容,且没有错误提示,说明安装已经正确完成! </p> < p >你可以先到后台管理中,进行必要的设置,然后再调用! </p> < p > < b > < font color=#0000ff >提示: </font>别忘了改用户和密码、数据库文件名。 </b> </p>">
< IFRAME ID ="eWebEditor1" src ="../ewebeditor.asp?id=content1&style=s_coolblue" frameborder ="0" scrolling ="no" width ="550" height ="350" > </IFRAME>
</TD>
</TR>
< TR >
< TD colspan=2 align=right >
< INPUT type=submit name=b1 value ="提交" >
< INPUT type=reset name=b2 value ="重填" >
< INPUT type=button name=b3 value ="查看源文件" onclick ="location.replace('view-source:'+location)" >
</TD>
</TR>
< TR >
< TD >取到内容: </TD>
< TD > < TEXTAREA cols=50 rows=5 id=myTextArea style ="width:550px" >点击“取值”按钮,看一下效果! </TEXTAREA> </TD>
</TR>
< TR >
< TD colspan=2 align=right >
< INPUT type=button name=b4 value ="取值" onclick ="myTextArea.value=eWebEditor1.getHTML()" >
< INPUT type=button name=b5 value ="赋值" οnclick="eWebEditor1.setHTML('<b >Hello My World! </b>')">
< INPUT type=button name=b6 value ="代码状态" onclick ="eWebEditor1.setMode('CODE')" >
< INPUT type=button name=b7 value ="设计状态" onclick ="eWebEditor1.setMode('EDIT')" >
< INPUT type=button name=b8 value ="文本状态" onclick ="eWebEditor1.setMode('TEXT')" >
< INPUT type=button name=b8 value ="预览状态" onclick ="eWebEditor1.setMode('VIEW')" >
< INPUT type=button name=b9 value ="当前位置插入" onclick ="eWebEditor1.insertHTML('This is Insert Function!')" >
< INPUT type=button name=b10 value ="尾部追加" onclick ="eWebEditor1.appendHTML('This is Append Function!')" >
</TD>
</TR>
</TABLE>
< TR >
< TD >编辑内容: </TD>
< TD >
< INPUT type ="hidden" name ="content1" value="<p > </p> < p > < font color=#ff0000 >本样式为自带默认样式,最佳调用宽度550px,高度350px! </font> </p> < p >下面为一些高级调用功能的例子,你可以用脚本方便的编辑进行一些操作。 </p> < p >看到这些内容,且没有错误提示,说明安装已经正确完成! </p> < p >你可以先到后台管理中,进行必要的设置,然后再调用! </p> < p > < b > < font color=#0000ff >提示: </font>别忘了改用户和密码、数据库文件名。 </b> </p>">
< IFRAME ID ="eWebEditor1" src ="../ewebeditor.asp?id=content1&style=s_coolblue" frameborder ="0" scrolling ="no" width ="550" height ="350" > </IFRAME>
</TD>
</TR>
< TR >
< TD colspan=2 align=right >
< INPUT type=submit name=b1 value ="提交" >
< INPUT type=reset name=b2 value ="重填" >
< INPUT type=button name=b3 value ="查看源文件" onclick ="location.replace('view-source:'+location)" >
</TD>
</TR>
< TR >
< TD >取到内容: </TD>
< TD > < TEXTAREA cols=50 rows=5 id=myTextArea style ="width:550px" >点击“取值”按钮,看一下效果! </TEXTAREA> </TD>
</TR>
< TR >
< TD colspan=2 align=right >
< INPUT type=button name=b4 value ="取值" onclick ="myTextArea.value=eWebEditor1.getHTML()" >
< INPUT type=button name=b5 value ="赋值" οnclick="eWebEditor1.setHTML('<b >Hello My World! </b>')">
< INPUT type=button name=b6 value ="代码状态" onclick ="eWebEditor1.setMode('CODE')" >
< INPUT type=button name=b7 value ="设计状态" onclick ="eWebEditor1.setMode('EDIT')" >
< INPUT type=button name=b8 value ="文本状态" onclick ="eWebEditor1.setMode('TEXT')" >
< INPUT type=button name=b8 value ="预览状态" onclick ="eWebEditor1.setMode('VIEW')" >
< INPUT type=button name=b9 value ="当前位置插入" onclick ="eWebEditor1.insertHTML('This is Insert Function!')" >
< INPUT type=button name=b10 value ="尾部追加" onclick ="eWebEditor1.appendHTML('This is Append Function!')" >
</TD>
</TR>
</TABLE>
我们需要修改这个table,我要的是文本里的内容,所以用不到的就去掉好了。修改后变成:
<
TABLE
border
="0"
cellpadding
="2"
cellspacing
="1"
>
< TR >
< TD >
< INPUT type ="hidden" name ="content1" value="<p > </p> < p > < font color=#ff0000 >本样式为自带默认样式,最佳调用宽度550px,高度350px! </font> </p> < p >下面为一些高级调用功能的例子,你可以用脚本方便的编辑进行一些操作。 </p> < p >看到这些内容,且没有错误提示,说明安装已经正确完成! </p> < p >你可以先到后台管理中,进行必要的设置,然后再调用! </p> < p > < b > < font color=#0000ff >提示: </font>别忘了改用户和密码、数据库文件名。 </b> </p>">
< IFRAME ID ="eWebEditor1" src ="../ewebeditor.asp?id=content1&style=s_coolblue" frameborder ="0" scrolling ="no" width ="550" height ="350" > </IFRAME>
</TD>
</TR>
< TR >
< TD align=right >
< INPUT type=submit name=b1 value ="提交" >
< INPUT type=reset name=b2 value ="重填" >
</TD>
</TR>
</TABLE>
< TR >
< TD >
< INPUT type ="hidden" name ="content1" value="<p > </p> < p > < font color=#ff0000 >本样式为自带默认样式,最佳调用宽度550px,高度350px! </font> </p> < p >下面为一些高级调用功能的例子,你可以用脚本方便的编辑进行一些操作。 </p> < p >看到这些内容,且没有错误提示,说明安装已经正确完成! </p> < p >你可以先到后台管理中,进行必要的设置,然后再调用! </p> < p > < b > < font color=#0000ff >提示: </font>别忘了改用户和密码、数据库文件名。 </b> </p>">
< IFRAME ID ="eWebEditor1" src ="../ewebeditor.asp?id=content1&style=s_coolblue" frameborder ="0" scrolling ="no" width ="550" height ="350" > </IFRAME>
</TD>
</TR>
< TR >
< TD align=right >
< INPUT type=submit name=b1 value ="提交" >
< INPUT type=reset name=b2 value ="重填" >
</TD>
</TR>
</TABLE>
再改一下路径,改成我项目的路径:
src="eWebEditor/ewebeditor.asp?id=content1&style=s_coolblue"
4.其实核心语言无所谓,主要都是传值然后进行操作,现在服务器都支持ASP,然后把这个修改后的TABLE复制到Default.aspx,然后修改一下路径。可以先看一下效果了,但是在之前我们需要改个地方,IIS需要进行设置,网站-->属性-->目录安全性-->编辑-->集成windows身份验证勾上。
5.这样虽然显示了,但是不够灵活,可能我们的页面还有其他的控件,所以我们可以把刚才的TABLE做成 WEB控件,用的化直接拖进页面就OK了,新建一个WEB控件,直接剪进页面A把代码。
6.看一下table代码,内容都在textbox里面了,value是内容,传参的大家即使不了解ASP也会看到ewebeditor.asp?id=content1&style=s_coolblue。当我们点击“提交”的时候对内容进行处理,取出内容,显示或者添加数据库都可以。内容都是通过 form提交,所以我们把A页面的form进行一下处理,变成:
<
form
id
="form1"
action
="save.aspx"
method
="post"
>
,但是form下的不管什么控件都要runat=server,因为数据还是要在后台处理的,把内容传到save.aspx页面。
7.页面save.aspx获取文本内容,代码很简单。
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/6c4ada636183f7ba45c8df66c1800d0d.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/6c4ada636183f7ba45c8df66c1800d0d.png)
原理已经就这么多了,不难,不过很有用。后面我们完善一下这个程序。
8.肯定还要有其他控件在起始页面,我们再建立一个B页面。
关系:B是主页面 > A是框架 > WEB控件
这样我们在B页面引用以下A框架就可以了:
<
iframe src=Default.aspx width=580 height=550
>
</iframe>
9.在aspx页面中设计到一个安全的东西,不允许提交一些脚本的东西。增加验证代码:
ValidateRequest="false"
10.如果上传图片的话,要增加文件夹权限,否则上传不了图片什么的。共享里面打开这个文件夹共享。
大功告成,用别人的成品还是比较快的,有经济能力的尽量购买正版。这个程序已经算是比较简便的办法了,当然办法都是人想的,而且这个技术是VS2003那个时代的,肯定还会有更好的。
这个是最简单的让.NET使用ASP文本编辑器,要是更改文本编辑器也可以,但是要懂一些JS,呵呵,还是很麻烦的。产品版权还是作者的,应用商业一定要买正版。
这个是最简单的让.NET使用ASP文本编辑器,要是更改文本编辑器也可以,但是要懂一些JS,呵呵,还是很麻烦的。产品版权还是作者的,应用商业一定要买正版。
附件:http://down.51cto.com/data/2350832
本文转自L.net 51CTO博客,原文链接:http://blog.51cto.com/mixangel/104575,如需转载请自行联系原作者