哇寶部落格
Wabow Information Inc. Blog
今天要介紹的是一款輕量型的文字編輯器 markItUp!
Mac 外觀:
Live 外觀:
(剛剛打的因為電腦當機變成一片空白 >"<)
它是用 jQuery 開發, 核心檔僅有 6.5Kb 的小玩意兒.
為什麼說它是小玩意~因為它的功能並不如 TinyMCE or FCKeditor 般強大, 它的特別在於它不是普通的 HTML 編輯器, 它能夠把代碼轉換成 HTML.
目前它支援的代碼有: Html, Textile, Wiki Syntax, Markdown, BBcode.
支援的編輯功能也僅有: H1-H6, UL OL, URL, 粗體 跟 斜體
還有 Ajax 預覽功能
它可以支援其他的 jQuery Plugins:
(紅色框框裡的就是用了 jQuery plugins 的 Farbtastic, SimpleModel, 還有 jQuery UI)
它還可以自訂代碼, 因此我把程式包下載後小小改了一番:
1. 在 set.js 檔裡很輕易地把五個 plurk 支援的代碼套入到此編輯器中
路徑: markitup/sets/plurk/set.js
mySettings = {
nameSpace: "plurk",
markupSet: [
{name:'Bold', key:'B', closeWith:'**', openWith:'**'},
{name:'Italic', key:'I', closeWith:'*', openWith:'*'},
{name:'Underline', key:'U', closeWith:'__', openWith:'__'},
{name:'Picture', openWith:'', closeWith:'[![Source:!:http://]!] ([![Title]!])'},
{name:'Link', openWith:'', closeWith:'[![Link:!:http://]!] ([![Title]!])'},
]
}
2. 在 style.css 檔裡管理 Toolbar 上的 icon
路徑: markitup/sets/plurk/style.css
.markItUp .markItUpButton1 a {
background-image:url(images/bold.png);
}
.markItUp .markItUpButton2 a {
background-image:url(images/italic.png);
}
.markItUp .markItUpButton3 a {
background-image:url(images/underline.png);
}
.markItUp .markItUpButton4 a {
background-image:url(images/picture.png);
}
.markItUp .markItUpButton5 a {
background-image:url(images/link.png);
}
3. 同時我只換了 css 檔就可以把外觀換成 Mac Style (當然還有包在css裡的圖)
路徑: markitup/index.html
<!-- jQuery 核心檔 -->
<script type="text/javascript" src="jquery.pack.js"></script>
<!-- markItUp! 核心檔 -->
<script type="text/javascript" src="markitup/jquery.markitup.pack.js"></script>
<!-- markItUp! toolbar settings 設定檔-->
<script type="text/javascript" src="markitup/sets/plurk/set.js"></script>
<!-- markItUp! 外觀檔 -->
<link rel="stylesheet" type="text/css" href="markitup/skins/macosx/style.css" />
<!-- markItUp! Toolbar 外觀檔 -->
<link rel="stylesheet" type="text/css" href="markitup/sets/plurk/style.css" />
還滿簡單的. 做了一個 Plurk 的代碼編輯器 測試結果在此
優點:
速度快, 不佔空間, 俱有擴充潛力: 可以結合其他的 jQuery Plugins (作者有實作如何套用 jQuery的 color picker, dialogue).
簡單易改, 可以輕易的改成自己想要的代碼編輯器.
美中不足:
還太陽春了
- Tags: jQuery