以前也用過幾個編輯器拉，如FCK，CUTEDTOR等，它們大都實現(xiàn)了很不錯了的功能，也有豐富的插件使用。不過我還是覺得TinyMCE在線編輯器好用，它是采用純JS客戶端腳本技術(shù)構(gòu)建，是一個輕量級加載速度非常快的WEB的文本編輯控件，并且TinyMCE是一個根據(jù)LGPL license發(fā)布的自由軟件，你可以把它用于商業(yè)應(yīng)用。
由于最進(jìn)在做一個博客系統(tǒng)需要有在線編輯器，于是便找了TinyMCE在線編輯器，以前用過Google的GMail，里面就有一個按Ctrl+S的快捷鍵保存郵件的功能，因為當(dāng)時還不太清楚那些編輯器的一些功能實現(xiàn)，對編輯器結(jié)構(gòu)不清楚，也不知道用IE Developer Toolbar和Firebug等調(diào)試工具來看，所以那時候感覺Google特別牛B，而且Ctrl+S保存那個功能在FF里面運行，而FF瀏覽器按下Ctrl+S默認(rèn)是彈出修改網(wǎng)頁的對話框的，這讓我更好奇了，難道JavaScript還能阻止瀏覽器里面Ctrl+S保存網(wǎng)頁的快捷鍵，真的太神氣了！下面我們就使用TinyMCE編輯器來實現(xiàn)一個按Ctrl+S使用Ajax異步保存文章的功能吧，這也是我的博客系統(tǒng)的需要。
在線編輯器的原理一般是創(chuàng)建一個ifrmae，這樣便可相當(dāng)于一個頁面來進(jìn)行單獨控制，并且設(shè)置這個ifrmae的designMode="On"處于設(shè)置模式。TinyMCE是通過初使化配置一些參數(shù)，主要是傳遞一個textarea對象，并且在初始化的時候隱藏掉這些textarea，獲取原來textarea的寬高在原來的新創(chuàng)建一個ifrmae對象。我們先用IE Developer Toolbar來看一下這個編輯器它創(chuàng)建的一些結(jié)構(gòu)。
紅色框標(biāo)記的就是我們頁面里面放置的textare文本輸入控制了，這里是放的Asp.Net服務(wù)器控件，而綠色框里面標(biāo)記的內(nèi)容就是TinyMCE自動生成的東西了，可以看到這里面就是一個IFRAME，里面的BODY就是我們編輯器的內(nèi)容了，它會自動初始話指定的textare的內(nèi)容。這個IFRAsME的編號為我們指定的textare控件ID加上'_ifr'，而且designMode="On"。所以我們要在線編輯器內(nèi)按Ctrl+S實現(xiàn)保存就是要監(jiān)聽這個IFAME里面的事件了，關(guān)聯(lián)到我們自定義的一個方法，可以是AJax請求服務(wù)器保存s，也可以執(zhí)s行其他操作，那下面我就給出一個完成的DEMO。
上面所示就是一個完成的例子了，由于TinyMCE可以支持JavaScript，所以我就在編輯器里面用腳本再初始化一個編輯器，這個也是我博客里面所有的編輯器了，還有一些功能插件沒能用上。我們先來看它的腳本是要如何來寫的吧，先貼出它的代碼：
<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這個方法不用說了，初始話textare編輯器，然后接著是addEvent方法，這個是后面定義的，之所單獨出來是為了重用并兼容所有瀏覽器，這里需要注意的是FF內(nèi)關(guān)聯(lián)事件需要傳遞一個事件對象，而IE不需要傳也可以直接獲得，為兼容全部增加傳遞事件的參數(shù)，然后在再里面判斷獲取鍵盤按下的鍵，如果按下了Ctrl并同時按下了S(keyCode=83)則執(zhí)行保存，這里是用setTimeout模擬Ajax請保存，這里說一下之所以監(jiān)聽keydown事件，那是因為在keydown、keypress 、keyup這三個事件里面keydown是最先觸發(fā)的，而且也只能再這個事件里面阻止事件冒泡和默認(rèn)行為(FF內(nèi))，這個事件里面也是最能獲取鍵盤按下鍵的最詳細(xì)的信息，其他時間就不一定能獲取得到(FF內(nèi))，有時間再寫一下JS事件的一些文章。接下來看下面keydown里面最關(guān)鍵的代碼了，if(document.all) return false;這里是判斷是否為IE內(nèi)核的瀏覽器，不過正規(guī)的判斷應(yīng)該不是這樣，這里為了簡化就直接這樣寫了。return false是在IE里面阻止事件最的通用方法了，這里就不在撰述，后面一句是對非IE內(nèi)核瀏覽器的處理。使用e.preventDefault()方法來阻止事件的默認(rèn)行為，這個方法其實并是陌生，早在JQuery里面就有過介紹：
通過使用 preventDefault() 方法只取消默認(rèn)的行為。在一些支持標(biāo)準(zhǔn)的DOM瀏覽器里，如果動態(tài)添加關(guān)聯(lián)表單的submit的事件，只寫return false是不行的，F(xiàn)F內(nèi)仍然會submit，加上preventDefault()方法即可阻止表單提交。
jQuery 代碼:
$("form").bind("submit", function(event){
event.preventDefault();
});
通過使用preventDefault()方法取消事件默認(rèn)行為，這個應(yīng)該在所有支持WSC的DOM瀏覽器都可以，不過我還沒有在safari 、opera 瀏覽器內(nèi)做過測試，但至少在FF2.0和谷歌瀏覽器下執(zhí)行沒有問題。FF和谷歌瀏覽器在頁面里面按Ctrl+S默認(rèn)是彈出保存網(wǎng)頁對話框，使用preventDefault()就能夠阻止取消彈出對話框，是不是很神奇，呵呵^_^。因為這里瀏覽器里面事件的處理機智是先傳遞給網(wǎng)頁再傳遞給瀏覽器，所以在網(wǎng)頁里面就能通過JavaScript來阻止瀏覽器默認(rèn)的事件了。不過需要注意的是FF好象關(guān)聯(lián)body的事件無效，關(guān)聯(lián)非text或textare可輸入文本對象也無效，按Ctrl+S仍然是會談出保存的網(wǎng)頁的對話框，有點奇怪，好象Ctrl+S只是特別為text或textare預(yù)留的快捷鍵一樣，最后還是通過關(guān)聯(lián)框架的document對象contentDocument來搞定的。只要能關(guān)聯(lián)到事件，又能取消按Ctrl+S默認(rèn)行為，編輯器內(nèi)按Ctrl+S就執(zhí)行自定義的方法，我這里是使用AJax請求服務(wù)器保存編輯器內(nèi)的內(nèi)容，而且可以很友好的無刷新按Ctrl+S及時保存，這樣不需要等到PostBack回服務(wù)器去，避免寫文章到一般而沒有即時保存而丟失的一些問題。
其他只要是IFRAME編輯器應(yīng)該使用這種方法都可以實現(xiàn)按Ctrl+S自定義保存，不過寫到最后面我告訴大家其實要顯示Ctrl+S保存沒必要這么復(fù)雜，因為TinyMCE在線編輯器里面提供了一個現(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就是保存了，只要寫指定有save在編輯器內(nèi)按Ctrl+S就會自動Post回去，不過就是刷新了頁面-_-。TinyMCE編輯器果然好用夠人性化，連這種功能都預(yù)先想好提供了。不過我還是自己來實現(xiàn)了一次，下次碰到其他編輯器說不定也能用上，希望對大家有用。
posted on 2009-11-03 09:35
becket_zheng 閱讀(1577)
評論(1) 編輯 收藏 所屬分類:
網(wǎng)頁web前端技術(shù)