網(wǎng)頁(yè)上的Javascript編輯器和代碼格式化
為什么不用textarea呢？
1 沒(méi)有高亮
2 tab鍵無(wú)法使用?！磘ab鍵會(huì)切換到下個(gè)控件
3 沒(méi)有代碼格式化?！?yàn)榱?xí)慣了Eclipse的環(huán)境，可以使用ctrl+shift+F來(lái)代碼進(jìn)行格式化。
當(dāng)然，我還沒(méi)強(qiáng)大到自己實(shí)現(xiàn)的程度，而且用腳趾頭都能想到肯定有人實(shí)現(xiàn)了，就看找不找得著。
經(jīng)過(guò)了艱難的搜索，終于在SourceForge上找到一個(gè)叫EditArea的項(xiàng)目，感覺(jué)挺好。http://sourceforge.net/projects/editarea/
它的sample也很清楚
在網(wǎng)頁(yè)上用以下方法構(gòu)造
<script language="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js"></script>
<script language="Javascript" type="text/javascript">
// initialisation
editAreaLoader.init({
id: "example_1" // id of the textarea to transform
,start_highlight: true // if start with highlight
,allow_resize: "both"
,allow_toggle: true
,word_wrap: true
,language: "zh" //國(guó)際化
,syntax: "js" //代碼的樣式，支持js ,php,sql,
//以下是格式化的支持
,begin_toolbar: "btn_beautifier,|" //插入工具欄
,plugins: "beautifier" //使用控件
});
</script>
便可以在頁(yè)面中出現(xiàn)代碼的編輯框
能夠解決第一個(gè)和第二個(gè)問(wèn)題，但是還能解決。
因此我又找啊找，找到這個(gè)網(wǎng)站：http://jsbeautifier.org/。這個(gè)網(wǎng)站做了一個(gè)js的格式化工具，甚至可以格式化經(jīng)過(guò)某個(gè)混淆器混淆的js代碼。
于是我根據(jù)上面項(xiàng)目中的插件規(guī)范，將這兩個(gè)東東整合了起來(lái)?？瓷厦鎴D中的
按鈕，按下以后，就變成了
看，高亮和格式化都有了。
需要下載的可以從這里下載（已經(jīng)包含代碼格式化的插件了）：editarea_0_8_2.zip
樣例見(jiàn)\exemples\example.html
格式化的插件實(shí)現(xiàn)在\edit_area\plugins\beautifier\beautifier.js
相關(guān)文章
JavaScript數(shù)據(jù)類型區(qū)別及檢測(cè)方法
在JavaScript中,數(shù)據(jù)類型是編程中非常重要的概念,它決定了數(shù)據(jù)的性質(zhì)、如何存儲(chǔ)以及如何操作這些數(shù)據(jù),本文介紹JavaScript數(shù)據(jù)類型區(qū)別及檢測(cè)方法,感興趣的朋友一起看看吧2024-04-04
ant design下運(yùn)用js實(shí)現(xiàn)框選功能，這篇文章主要介紹了ant design實(shí)現(xiàn)圈選功能,本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-12-12
JS中的常見(jiàn)數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?ever
這篇文章主要介紹了JS中的常見(jiàn)數(shù)組遍歷方法詳解(forEach,?map,?filter,?sort,?reduce,?every),本篇講用實(shí)際案例詳解他們的語(yǔ)法和用法，需要的朋友可以參考下2023-05-05
微信小程序并沒(méi)有提供搖一搖API接口，但是提供了一個(gè)重力感應(yīng)的API，接下來(lái)我們可以用這個(gè)方法來(lái)模擬微信搖一搖功能，具體實(shí)現(xiàn)代碼，大家參考下本文2017-07-07
解決微信瀏覽器Javascript無(wú)法使用window.location.reload()刷新頁(yè)面
這篇文章主要介紹在微信瀏覽器Javascript無(wú)法使用window.location.reload()刷新頁(yè)面的解決方法，比較實(shí)用，需要的朋友可以參考下。2016-06-06
為了提高網(wǎng)站的加載速度，有一個(gè)很重要的手段就是在用戶瀏覽過(guò)程中的上游網(wǎng)站做一個(gè)文件的預(yù)加載。2010-04-04
使用bootstrap validator的remote驗(yàn)證代碼經(jīng)驗(yàn)分享(推薦)
這篇文章主要介紹了使用bootstrap validator的remote驗(yàn)證器驗(yàn)證經(jīng)驗(yàn)分享(推薦)的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
javascript IE中的DOM ready應(yīng)用技巧
當(dāng)我們想在頁(yè)面加載之后執(zhí)行某個(gè)函數(shù)，肯定會(huì)想到onload了 但onload在瀏覽器看來(lái)，就是頁(yè)面上的東西全部都加載完畢后才能發(fā)生，但那就為時(shí)已晚了。2008-07-07
二級(jí)域名轉(zhuǎn)向類...2006-11-11
javascript實(shí)現(xiàn)復(fù)選框選中屬性
本文給大家介紹的是一篇國(guó)外網(wǎng)友寫(xiě)的博客，講解的是關(guān)于實(shí)現(xiàn)復(fù)選框選中屬性的問(wèn)題，感覺(jué)非常不錯(cuò)，翻譯過(guò)來(lái)推薦給大家，希望小伙伴們能夠喜歡。2015-03-03