首页logo
  •  

jonllen

金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。

个人档案

jonllen
心情闪存 | 给他留言
妮称:jonllen
来自:中国. 湖南. 湘潭
简述:金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。
博客日历

TinyMce在线编辑器完美打造成Asp.Net服务器自定义控件

分类:Asp.Net

玩了tiny_mce在线编辑器好几个星期,今天终于差不多把所有的功能都给完成了,确切的说是把编辑器的插件功能完美的整合在我的博客里面,解决一些小的bug,这还得意于它本身是开源免费的,这里我实现的功能主要有:

  1. 修改图片和多媒体文件上传和浏览功能;
  2. 增加signature个性签名(关联博客)和insertcode插入代码(整合CodeHighlighter代码高亮显示)功能插件;
  3. 修改编辑器内按下Ctrl S键save保存插件功能,使之支持Postback到服务器端并触发OnSave事件。
  4. 修正编辑器内字体过小、设置编辑器不会自动移除div元素节点的等问题。

起初我引用tiny_mce编辑器都是直接嵌入的脚本的,摸索了一番待完善所有功能后,当然就要把它做成.net的自定义控件了,方便每一个页面调用,下面我就结合在做自定义控件的时候说一下Tinymce编辑器。

试试我的TinyMCE在线编辑器

先上自定义控件源代码:

TinyMce在线编辑器自定义控件类

首先做一个自定义控件需要考虑的继承类,是Control还是WebControl?WebControl本身是继承自Control的类,它跟Control类相比拥有Web服务器控件的更多属性,因此我这里选择继承自WebControl类,其实我本来还试过直接继承自HtmlTextArea类的,熟悉tinymce编辑器的朋友知道,Tinymce编辑器初始化的时候只需要简单的指定一个textarea元素ID就有了,而HtmlTextArea类就是用于产生textarea的html服务器端控件,这样那些Cols、Rows、Style等属性也不需要重新定义,简单的Tinymce编辑器初始化代码如下:

<textarea id="txtContent" name="txtContent" rows="20" cols="100" style="height:200px"></textarea>
<script type="text/javascript" src="../tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" >
tinyMCE.init({
mode :
"exact",
elements :
"txtContent",
theme :
"simple",
language :
"zh",
content_css :
"/tiny_mce/css/content.css"
});
</script>

如果是继承自HtmlTextArea类的话,首先可以直接产生一个textarea控件,并可以设置Value等属性控制输出值,那么再输出tinymce编辑器主脚本路径和设置和elements为textarea客户端产生的id即可,好象可以行得通,我试着写个测试也通过了,不过我发现继承自Control类(HtmlTextArea类隐式继承Control)在VS切换到设计视图会有问题,在描绘控件控件时候会提示一些错误,有人说是VS版本的问题,我也在网上搜索一些相关资料,尝试了好几种方法都未解决,不过这个问题不会影响到程序的正常运行,喜欢追求完美的我便因为这个小问题毅然放弃了继承Control类。。。

选择好了继承自WebControl类后就开始Copy进TinyMce编辑器的一些属性,由于WebControl类默认不会产生textarea,所以我们需要在初始化的时候实例化一个HtmlTextArea类,以产生textarea控件,并且重写掉父类的Width、Height、CssClass、ClientID等属性,使之当设置这些属性的时候直接关联到textarea控件属性。重写Render输出html的方法以实现自定义输出,这里我注销掉了WebControl父类的Render方法,因为它默认会产生输出一个span标签,而这里不需要。后面接着调用HtmlTextArea控件的Render方法生成textarea,当在VS的ASPX设计视图里Context上下文为空则返回,所以我这里自定义控件在VS设计视图里面看到的就是一个textarea控件。最关键的后面产生JavaScript代码,在输出引用tinymce脚本主文件的时候做了一个判断,因为页面内可能包含了多个Tinymce编辑器控件,但tinymce的脚本主文件只需要引用一次即可,避免重复在页面引用输出,这里我是用Items暂存变量包保存页面的Tinymce编辑器个数,它在整个页面生命周期内有效,之前这个我是在TinyMce自定义控件类初始化的做判断,发现保存在Items暂存变量保存的值有问题,不知道是否为还未传递HttpContext对象的问题。接下来就是tinymce编辑器初试化一些参数的设置问题了,我类属性里面设置了一些默认值,这些都是我摸索着配置出来的默认设置,这里值得一提的是valid_elements属性,当我们在编辑器html源代码里面写一个空div但插入后却被莫名奇妙的被移除设置此属性即可,它主要是验证元素及拥有属性,默认设置的一些元素都无onclick等属性,所以你没有设置它再编辑器内怎么也给不了button按钮一个onclick事件,或插入不了一个空div元素,因为它们不在默认的valid_elements范围之内,不需要使用某些元素比如script脚本标记我们也可以通过设置valid_elements以过滤掉一些不需要使用的标签。

输出tinymce初始化脚本的时候这里还有一个重要的参数onserversave,是的,它就是触发TinyMce自定义控件的OnSave事件参数,tinymce编辑器本身是没有onserversave这个配置属性的,还好我在客户端使用js通过ed.getParam('onserversave')能获取在服务器端输出的值,那么这个onserversave值到底是什么呢?首先我们这个我的这个TinyMce自定义控件类实现IPostBackEventHandler了接口,它使服务器控件能够处理将窗体发送到服务器时引发的事件,也就是在tinymce编辑器内按Ctrl S键时Postback到服务器,并响应TinyMce自定义控件OnSave事件,需要实现RaisePostBackEvent方法,以处理响应事件,并传递eventArgument事件参数,我这里只是做了一个简单的判断,如果TinyMce自定义控件在服务器端设置了OnSave处理事件,则回调该事件,在一些比较复杂的复合控件里面我们可以通过eventArgument参数不同响应不同事件,比如我们在GridView控件里经常能看到编辑按钮是__doPostBack('GridView1','Edit$0')等字样,它所传递响应的就是GridView1控件第0行编辑按钮事件,服务器端获取的eventArgument就是这里的Edit$0,而__doPostBack函数第一个参数__EVENTTARGET是触发服务器控件的UniqueID(不是控件ClientID,相当于Name),说到这里有必要讲一下Asp.Net服务器控件__doPostBack回发事件处理机智,这个还是得从客户端submit说起,如果页面只有一些button服务器控件,这些按钮是直接生成sumbit的,所以这是一个再简单不过的提交表单动作,不需要借助__doPostBack回发函数,所以页面也不会产生任何__doPostBack函数的JavaScript代码,在点击sumbit按钮的时候form会把该按钮的name和value作为健值对post到服务器端,所以在服务器端就能获得触发postback的sumbit按钮name(即UniqueID),此时就很容易在页面里找到该控件并调用的它的Click方法了。当页面拖放了一个LinkButton链接按钮的时候就需要使用__doPostBack函数了,因为a是不能直接Postback的,我们可以把__doPostBack函数贴过来温顾一下:

<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="5o6sLhradLF1t/FSiu1eQ4vknA9uiZViTS36nXHjkdmNX6cRl4LIwK7Kna/xh9t9WhGFmwmdJA8yojvdQLLWOjS9ohcQem358kibQCPhQH9u2ffiui2v4Ao2wCX5GlGLMmS3 pqfb8VyWktLrj1zz7z7CGnnoGScuEsfP93TSIY3HnF1 X8NZT4eJfe2FuzwRVTX/Krq1bkfc6pPs3pcWmPHokdjsr4baM3pJdV 3EM5b1FwHfaIy2bDwMl6sVRCYxvFvumOJzKktI9eColGx4KN0hYz4hz60kcvPZUeFgU=" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm
= document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value
= eventTarget;
theForm.__EVENTARGUMENT.value
= eventArgument;
theForm.submit();
}
}
// -->
</script>

其实很简单,先是找到aspnetForm这个表单,然后在再__doPostBack函数判断关联的onsubmit()是否返回ture(禁止提交表单的验证),之后将eventTarget和eventArgument参数分别给form表单隐藏域赋值,之后再提交表单,__EVENTTARGET即为触发事件控件的name(即UniqueID),__EVENTARGUMENT就是事件参数了,所以通过这样PostBack到服务器端就能找到对应按纽触发的事件了。

那我如何doPostBack使之触发TinyMce自定义服务器控件的OnSave事件呢?看懂了上面的__doPostBack函数不就知道了,不就是__doPostBack('TinyMce自定义服务器控件UniqueID','eventArgument参数')吗?修改Tinymce编辑器save插件的js源代码即可,找到如下代码块:

_save : function() {
var ed = this.editor, formObj, os, i, elementId;

formObj
= tinymce.DOM.get(ed.id).form || tinymce.DOM.getParent(ed.id, 'form');

if (ed.getParam("save_enablewhendirty") && !ed.isDirty())
return;

tinyMCE.triggerSave();

// Use callback instead
if (os = ed.getParam("save_onsavecallback")) {
if (ed.execCallback('save_onsavecallback', ed)) {
ed.startContent
= tinymce.trim(ed.getContent({format : 'raw'}));
ed.nodeChanged();
}

return;
}

if (formObj) {
ed.isNotDirty
= true;

if (formObj.onsubmit == null || formObj.onsubmit() != false)
formObj.submit();

ed.nodeChanged();
}
else
ed.windowManager.alert(
"Error: No form element found.");
}

这是它原来的代码,变量ed就是当前的编辑器实例了,tinyMCE.triggerSave()是把当前编辑器内容同步保存到对应的textarea内,ed.getParam("save_onsavecallback")是获取编辑器初始化配置参数,如果设置了save_onsavecallback函数则回调函数并返回,回传ed当前编辑器对象这个参数,如果没有save_onsavecallback函数则继续下面的formObj对象判断,tinyMCE会从textarea元素一直往上找到一个form,没有找到则弹窗提示,找到了则submit表单,这就是tinyMCE编辑器按Ctrl S键保存的处理,我现在要改的地方应该很明确了,就是不能让tingMCE就这样直接submit表单了,不然服务器端是没有办法知道是那个按钮要触发事件的,根据上面__doPostBack函数原理,我做了如下修改:

_save : function() {
var ed = this.editor, formObj, os, i, elementId;

formObj
= tinymce.DOM.get(ed.id).form || tinymce.DOM.getParent(ed.id, 'form');

if (ed.getParam("save_enablewhendirty") && !ed.isDirty())
return;

tinyMCE.triggerSave();

// Use callback instead
if (os = ed.getParam("save_onsavecallback")) {
if (ed.execCallback('save_onsavecallback', ed)) {
ed.startContent
= tinymce.trim(ed.getContent({format : 'raw'}));
ed.nodeChanged();
}

return;
}

if (formObj) {
ed.isNotDirty
= true;

if (formObj.onsubmit == null || formObj.onsubmit() != false)
{
//Get Server Postback Event Target Argruments
var eventTarget = ed.getParam('onserversave');
if (eventTarget)
{
var eventTargetElem = document.getElementById('__EVENTTARGET');
if (!eventTargetElem)
{
eventTargetElem
= document.createElement('input');
eventTargetElem.id
= '__EVENTTARGET';
eventTargetElem.name
= '__EVENTTARGET';
eventTargetElem.type
= 'hidden';
formObj.appendChild(eventTargetElem);
}
eventTargetElem.value
= eventTarget;
formObj.submit();
}
}

ed.nodeChanged();
}
else {
ed.windowManager.alert(
"Error: No form element found.");
}
}

首先是获取初始化控件UniqueID的onserversave参数,这是从服务器端动态输出的,如果TinyMce自定义服务器控件关联了OnSave事件则输出,没有这里获取的就是undefined,我这里是做了判断有才submit回发到服务器端去,然后再去找一个ID为__EVENTTARGET的hidden元素,如果页面没有生成这个元素则创建一个并添加到表单域里面,之后设置它的value为onserversave参数,这一步很重要,在服务器端__EVENTTARGET隐藏的值就是认为是触发服务器控件事件的UniqueID,本来还有一个eventArgument事件参数,但是我这里的TinyMce自定义服务器控件就只有一个OnSave事件不需要传递eventArgument事件参数来判断是触发了那个事件,所有我就没有把__EVENTARGUMENT这个值加到表单域里面去了。这样,当我们在编辑器内按下Ctrl S键后就能Postback并触发TinyMce自定义服务器控件OnSave事件,当然这样对用户体验不够友好,因为只样毕竟是sumbit刷新页面了,噢等等!上面不是说过Tinymce编辑器有一个save_onsavecallback函数,是的,设置这个响应的js函数之后就不会sumbit到服务器端去了,这里只是说为TinyMce自定义服务器控件提供一个这样的事件。我的博客编辑器就是使用了在客户端无刷新的保存的Ajax函数,没当按下Ctrl S键后会在编辑器的左下方提示正在保存,这样不但能及时保存文章内容不会丢失,而且页面都不会刷新给人体验也很好。^_^

好吧,熬了两个晚上,终于总结完了这几个星期使用TinyMCE在线编辑器使用的一些心得,这里非常感谢Earth,是他在广佛都市网项目里面用了这个编辑器,让我有机会了解使用TinyMCE这个免费开源的编辑器,谢谢!表情

标签:Asp.Net TinyMce
  • posted@ 2009-09-11 23:32
  • update@ 2010-02-11 15:21:52
  • 阅读(31679)
  • 评论(8)

相关文章

评论
1楼 kavin 2009-09-30 12:56:10
呵呵,这个编辑器是去年产品升级的时候备选的呢~哈
回复:哈哈,不过这个编辑器真的很强大,现在经过我的一些改装已整合在我的博客里用呢~(2009-09-30 23:07:07)
2楼 y441809344 2009-10-08 11:51:40
改的不错.能不能把这个控件 的源码给我.
3楼 y441809344 2009-10-08 11:53:15
能不能把 源码 和一个小示例给我 迫切需要文本 编辑器联系方式:y441809344@163.com谢谢
回复:我里面有一个示例的页面http://www.jonllen.com/Demo/Tinymce.aspx,tinyMce编辑器是免费开源的你到官网下就是,展开TinyMce服务器自定义控件代码即是CS源代码。(2009-10-08 21:19:38)
4楼 chenga 2009-10-21 16:45:49
你好 改的太好了,可是我到我这边怎么就不好用了呢!你可以把这个的源代码发过来吗!先在这里谢过!我的邮箱是:wuguo-cheng@163.com 如果可以的话加下QQ:79198628 我们可以互相聊聊!! 再次拜托!!
5楼 heng 2009-12-23 16:24:24
写得真好顶!!,tinymce默认是不能上传本地文件,你的例子里都可以实现了,能不能看看例子里的源代码呢??如里可以的话,联系方式abc126500@163.com,非常感谢!!!
6楼 lam99999 2009-12-26 19:00:02
评论内容需要审核才能显示。
7楼 jelyly 2010-03-12 10:49:46
你好,用了你的这个控件没有本地上图图片的功能,能共享一下这个代码吗,你用是什么版本。谢谢了. 611176565@qq.com
回复:本地上传图片功能需要有动态页面配合,需要修改advimage插件,官网有例子,我的版本是tinymce3.2.7,http://www.jonllen.com/Demo/Tinymce.aspx(2010-03-15 09:38:14)
8楼 amlta 2011-12-21 09:36:25
能给我一份这个的最新代码吗?
急需这样的一个控件。。。
回复:我博文内容里有贴TinyMce的Asp.Net自定义控件源代码的.(2011-12-22 19:24:49)
发表评论
*必填
回复通知我
*必填

博文推荐