javascript
tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存
以前也用過幾個編輯器拉，如FCK，CUTEDTOR等，它們大都實(shí)現(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的快捷鍵保存郵件的功能，因?yàn)楫?dāng)時還不太清楚那些編輯器的一些功能實(shí)現(xiàn)，對編輯器結(jié)構(gòu)不清楚，也不知道用IE Developer Toolbar和Firebug等調(diào)試工具來看，所以那時候感覺Google特別牛B，而且Ctrl+S保存那個功能在FF里面運(yùn)行，而FF瀏覽器按下Ctrl+S默認(rèn)是彈出修改網(wǎng)頁的對話框的，這讓我更好奇了，難道JavaScript還能阻止瀏覽器里面Ctrl+S保存網(wǎng)頁的快捷鍵，真的太神氣了！下面我們就使用TinyMCE編輯器來實(shí)現(xiàn)一個按Ctrl+S使用Ajax異步保存文章的功能吧，這也是我的博客系統(tǒng)的需要。
在線編輯器的原理一般是創(chuàng)建一個ifrmae，這樣便可相當(dāng)于一個頁面來進(jìn)行單獨(dú)控制，并且設(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實(shí)現(xiàn)保存就是要監(jiān)聽這個IFAME里面的事件了，關(guān)聯(lián)到我們自定義的一個方法，可以是AJax請求服務(wù)器保存s，也可以執(zhí)s行其他操作，那下面我就給出一個完成的DEMO。
在這里面按下Ctrl+S試試？
上面所示就是一個完成的例子了，由于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方法，這個是后面定義的，之所單獨(dú)出來是為了重用并兼容所有瀏覽器，這里需要注意的是FF內(nèi)關(guān)聯(lián)事件需要傳遞一個事件對象，而IE不需要傳也可以直接獲得，為兼容全部增加傳遞事件的參數(shù)，然后在再里面判斷獲取鍵盤按下的鍵，如果按下了Ctrl并同時按下了S(keyCode=83)則執(zhí)行保存，這里是用setTimeout模擬Ajax請保存，這里說一下之所以監(jiān)聽keydown事件，那是因?yàn)樵趉eydown、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)行為，這個方法其實(shí)并是陌生，早在JQuery里面就有過介紹：
通過使用 preventDefault() 方法只取消默認(rèn)的行為。在一些支持標(biāo)準(zhǔn)的DOM瀏覽器里，如果動態(tài)添加關(guān)聯(lián)表單的submit的事件，只寫return false是不行的，FF內(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()就能夠阻止取消彈出對話框，是不是很神奇，呵呵^_^。因?yàn)檫@里瀏覽器里面事件的處理機(jī)智是先傳遞給網(wǎng)頁再傳遞給瀏覽器，所以在網(wǎng)頁里面就能通過JavaScript來阻止瀏覽器默認(rèn)的事件了。不過需要注意的是FF好象關(guān)聯(lián)body的事件無效，關(guān)聯(lián)非text或textare可輸入文本對象也無效，按Ctrl+S仍然是會談出保存的網(wǎng)頁的對話框，有點(diǎn)奇怪，好象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)該使用這種方法都可以實(shí)現(xiàn)按Ctrl+S自定義保存，不過寫到最后面我告訴大家其實(shí)要顯示Ctrl+S保存沒必要這么復(fù)雜，因?yàn)門inyMCE在線編輯器里面提供了一個現(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ù)先想好提供了。不過我還是自己來實(shí)現(xiàn)了一次，下次碰到其他編輯器說不定也能用上，希望對大家有用。
本篇為作者Jonllen以"現(xiàn)狀"提供,且沒有任何擔(dān)保，同時也沒有授予任何權(quán)利。原文地址http://www.jonllen.com/Article.aspx?aid=16轉(zhuǎn)載于:https://www.cnblogs.com/Jonllen/archive/2009/06/28/jssave.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Devexpress的Datalayou
- 下一篇： # N数码问题