以前也用過(guò)幾個(gè)編輯器拉，如FCK，CUTEDTOR等，它們大都實(shí)現(xiàn)了很不錯(cuò)了的功能，也有豐富的插件使用。不過(guò)我還是覺(jué)得TinyMCE在線編輯器好用，它是采用純JS客戶(hù)端腳本技術(shù)構(gòu)建，是一個(gè)輕量級(jí)加載速度非常快的WEB的文本編輯控件，并且TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件，你可以把它用于商業(yè)應(yīng)用。
由于最進(jìn)在做一個(gè)博客系統(tǒng)需要有在線編輯器，于是便找了TinyMCE在線編輯器，以前用過(guò)Google的GMail，里面就有一個(gè)按Ctrl+S的快捷鍵保存郵件的功能，因?yàn)楫?dāng)時(shí)還不太清楚那些編輯器的一些功能實(shí)現(xiàn)，對(duì)編輯器結(jié)構(gòu)不清楚，也不知道用IE Developer Toolbar和Firebug等調(diào)試工具來(lái)看，所以那時(shí)候感覺(jué)Google特別牛B，而且Ctrl+S保存那個(gè)功能在FF里面運(yùn)行，而FF瀏覽器按下Ctrl+S默認(rèn)是彈出修改網(wǎng)頁(yè)的對(duì)話框的，這讓我更好奇了，難道JavaScript還能阻止瀏覽器里面Ctrl+S保存網(wǎng)頁(yè)的快捷鍵，真的太神氣了！下面我們就使用TinyMCE編輯器來(lái)實(shí)現(xiàn)一個(gè)按Ctrl+S使用Ajax異步保存文章的功能吧，這也是我的博客系統(tǒng)的需要。
在線編輯器的原理一般是創(chuàng)建一個(gè)ifrmae，這樣便可相當(dāng)于一個(gè)頁(yè)面來(lái)進(jìn)行單獨(dú)控制，并且設(shè)置這個(gè)ifrmae的designMode="On"處于設(shè)置模式。TinyMCE是通過(guò)初使化配置一些參數(shù)，主要是傳遞一個(gè)textarea對(duì)象，并且在初始化的時(shí)候隱藏掉這些textarea，獲取原來(lái)textarea的寬高在原來(lái)的新創(chuàng)建一個(gè)ifrmae對(duì)象。我們先用IE Developer Toolbar來(lái)看一下這個(gè)編輯器它創(chuàng)建的一些結(jié)構(gòu)。
紅色框標(biāo)記的就是我們頁(yè)面里面放置的textare文本輸入控制了，這里是放的Asp.Net服務(wù)器控件，而綠色框里面標(biāo)記的內(nèi)容就是TinyMCE自動(dòng)生成的東西了，可以看到這里面就是一個(gè)IFRAME，里面的BODY就是我們編輯器的內(nèi)容了，它會(huì)自動(dòng)初始話指定的textare的內(nèi)容。這個(gè)IFRAsME的編號(hào)為我們指定的textare控件ID加上'_ifr'，而且designMode="On"。所以我們要在線編輯器內(nèi)按Ctrl+S實(shí)現(xiàn)保存就是要監(jiān)聽(tīng)這個(gè)IFAME里面的事件了，關(guān)聯(lián)到我們自定義的一個(gè)方法，可以是AJax請(qǐng)求服務(wù)器保存s，也可以執(zhí)s行其他操作，那下面我就給出一個(gè)完成的DEMO。
上面所示就是一個(gè)完成的例子了，由于TinyMCE可以支持JavaScript，所以我就在編輯器里面用腳本再初始化一個(gè)編輯器，這個(gè)也是我博客里面所有的編輯器了，還有一些功能插件沒(méi)能用上。我們先來(lái)看它的腳本是要如何來(lái)寫(xiě)的吧，先貼出它的代碼：
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
var editorId = "txtContentEditor"
tinyMCE.init({
mode : "exact",
elements : editorId,
theme : "advanced",
language : "zh",
content_css : "/tiny_mce/css/content.css", plugins : "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,insertCode,uploadImage",
theme_advanced_buttons1:"formatselect,fontselect,fontsizeselect,separator,forecolor,backcolor,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,separator, justifyleft, justifycenter, justifyright",
theme_advanced_buttons2:"undo,redo,cut,copy,paste,separator,justifyleft,justifycenter,justifyright,separator,outdent,indent,removeformat,separator,link,unlink,image,uploadImage,media,separator,insertCode,separator,code,fullscreen",
convert_fonts_to_spans:true
});
addEvent(window,"load",function (){
setTimeout(function (){
var content = tinyMCE.getInstanceById(editorId).getBody();
var editorDocument = document.all ? content : document.getElementById(editorId+"_ifr").contentDocument;
addEvent( editorDocument ,"keydown",function (e){editorKeyDown(e)});
},1000);
});
function editorKeyDown(e)
{
var num = e.which?e.which:e.keyCode;
if( e.ctrlKey && num == 83 )
{
//postArticle();這里模擬Ajax保存文章
InsertToEditor("<br />正在保存中。。。");
setTimeout(function (){
InsertToEditor("<br />保存成功！！！");
},1000);
if (document.all)
{
return false;
}else e.preventDefault();
}
}
function InsertToEditor(content)
{
tinyMCE.execCommand('mceInsertContent',false,content);
}
function addEvent(target,eventType,func){
if(target.attachEvent)
{
target.attachEvent("on"+eventType,func);
}else if(target.addEventListener)
{
target.addEventListener(eventType,func,false);
}
return this;
}
</script>
TinyMCE.init這個(gè)方法不用說(shuō)了，初始話textare編輯器，然后接著是addEvent方法，這個(gè)是后面定義的，之所單獨(dú)出來(lái)是為了重用并兼容所有瀏覽器，這里需要注意的是FF內(nèi)關(guān)聯(lián)事件需要傳遞一個(gè)事件對(duì)象，而IE不需要傳也可以直接獲得，為兼容全部增加傳遞事件的參數(shù)，然后在再里面判斷獲取鍵盤(pán)按下的鍵，如果按下了Ctrl并同時(shí)按下了S(keyCode=83)則執(zhí)行保存，這里是用setTimeout模擬Ajax請(qǐng)保存，這里說(shuō)一下之所以監(jiān)聽(tīng)keydown事件，那是因?yàn)樵趉eydown、keypress 、keyup這三個(gè)事件里面keydown是最先觸發(fā)的，而且也只能再這個(gè)事件里面阻止事件冒泡和默認(rèn)行為(FF內(nèi))，這個(gè)事件里面也是最能獲取鍵盤(pán)按下鍵的最詳細(xì)的信息，其他時(shí)間就不一定能獲取得到(FF內(nèi))，有時(shí)間再寫(xiě)一下JS事件的一些文章。接下來(lái)看下面keydown里面最關(guān)鍵的代碼了，if(document.all) return false;這里是判斷是否為IE內(nèi)核的瀏覽器，不過(guò)正規(guī)的判斷應(yīng)該不是這樣，這里為了簡(jiǎn)化就直接這樣寫(xiě)了。return false是在IE里面阻止事件最的通用方法了，這里就不在撰述，后面一句是對(duì)非IE內(nèi)核瀏覽器的處理。使用e.preventDefault()方法來(lái)阻止事件的默認(rèn)行為，這個(gè)方法其實(shí)并是陌生，早在JQuery里面就有過(guò)介紹：
通過(guò)使用 preventDefault() 方法只取消默認(rèn)的行為。在一些支持標(biāo)準(zhǔn)的DOM瀏覽器里，如果動(dòng)態(tài)添加關(guān)聯(lián)表單的submit的事件，只寫(xiě)return false是不行的，F(xiàn)F內(nèi)仍然會(huì)submit，加上preventDefault()方法即可阻止表單提交。
jQuery 代碼:
$("form").bind("submit", function(event){
event.preventDefault();
});
通過(guò)使用preventDefault()方法取消事件默認(rèn)行為，這個(gè)應(yīng)該在所有支持WSC的DOM瀏覽器都可以，不過(guò)我還沒(méi)有在safari 、opera 瀏覽器內(nèi)做過(guò)測(cè)試，但至少在FF2.0和谷歌瀏覽器下執(zhí)行沒(méi)有問(wèn)題。FF和谷歌瀏覽器在頁(yè)面里面按Ctrl+S默認(rèn)是彈出保存網(wǎng)頁(yè)對(duì)話框，使用preventDefault()就能夠阻止取消彈出對(duì)話框，是不是很神奇，呵呵^_^。因?yàn)檫@里瀏覽器里面事件的處理機(jī)智是先傳遞給網(wǎng)頁(yè)再傳遞給瀏覽器，所以在網(wǎng)頁(yè)里面就能通過(guò)JavaScript來(lái)阻止瀏覽器默認(rèn)的事件了。不過(guò)需要注意的是FF好象關(guān)聯(lián)body的事件無(wú)效，關(guān)聯(lián)非text或textare可輸入文本對(duì)象也無(wú)效，按Ctrl+S仍然是會(huì)談出保存的網(wǎng)頁(yè)的對(duì)話框，有點(diǎn)奇怪，好象Ctrl+S只是特別為text或textare預(yù)留的快捷鍵一樣，最后還是通過(guò)關(guān)聯(lián)框架的document對(duì)象contentDocument來(lái)搞定的。只要能關(guān)聯(lián)到事件，又能取消按Ctrl+S默認(rèn)行為，編輯器內(nèi)按Ctrl+S就執(zhí)行自定義的方法，我這里是使用AJax請(qǐng)求服務(wù)器保存編輯器內(nèi)的內(nèi)容，而且可以很友好的無(wú)刷新按Ctrl+S及時(shí)保存，這樣不需要等到PostBack回服務(wù)器去，避免寫(xiě)文章到一般而沒(méi)有即時(shí)保存而丟失的一些問(wèn)題。
其他只要是IFRAME編輯器應(yīng)該使用這種方法都可以實(shí)現(xiàn)按Ctrl+S自定義保存，不過(guò)寫(xiě)到最后面我告訴大家其實(shí)要顯示Ctrl+S保存沒(méi)必要這么復(fù)雜，因?yàn)門(mén)inyMCE在線編輯器里面提供了一個(gè)現(xiàn)成的save插件，我們園子里面就有用到。plugins :"safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,insertCode,uploadImage",其中的save就是保存了，只要寫(xiě)指定有save在編輯器內(nèi)按Ctrl+S就會(huì)自動(dòng)Post回去，不過(guò)就是刷新了頁(yè)面-_-。TinyMCE編輯器果然好用夠人性化，連這種功能都預(yù)先想好提供了。不過(guò)我還是自己來(lái)實(shí)現(xiàn)了一次，下次碰到其他編輯器說(shuō)不定也能用上，希望對(duì)大家有用。
posted on 2009-11-03 09:35
becket_zheng 閱讀(1578)
評(píng)論(1) 編輯 收藏 所屬分類(lèi):
網(wǎng)頁(yè)web前端技術(shù)