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