大家好,我是L。我最近发现我的办公管理系统里的文本编辑器真的是。。。忍不了了,所以我想换一换,在网上找到一个办法,和大家分享一下,这项技术在VS2003中已经应用了,也算比较老的技术,但是对于大家应该还是比较有用的。
博客,论坛也都会用到文本编辑器,发帖子之类的,类似于Word,比较常用,如果自己开发一个文本编辑器,成本也是很高的,好多代码都设计到JavaScript,不太容易,也比较麻烦。现在网上很多工作室也开始做专门的成品然后卖,这次我用的是一个ASP版本的免费版,当然不能用于商业,要是用于商业就一定要购买版权。可能有很多网友和水友都会了,但是我觉得还是共享出来给不太熟悉的朋友,代码在文章后面会上传上来,代码很简单,我写一点思路。
1.首先,下载ASP文本编辑器压缩包
,这个我文章后面附件也会上传的。里面都是ASP,可以先看下运行效果,当然ASP是要在IIS下运行的,这里一定要注意,后面新建网站的时候是要选择的。进入系统目录,找到IIS根目录(C:\Inetpub\wwwroot),复制进来,运行Test1.asp。下面两张图大家应该就可以看明白了。这个文本编辑器功能比较全,操作也比较简单,很方便。



2.然后,我们把这个ASP版本变成能在.NET下使用。打开VS2008,(或者VS2005都行),新建一个网站,然后选 HTTP,一般都是选文件系统,ASP需要在IIS上运行, 当然也可以是远程。

3.把解压后的ASP文本编辑器粘贴到项目中来

看一下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="赋值" onclick="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="赋值" onclick="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获取文本内容,代码很简单。


原理已经就这么多了,不难,不过很有用。后面我们完善一下这个程序。
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,呵呵,还是很麻烦的。产品版权还是作者的,应用商业一定要买正版。