ezHTML - 純文字 HTML 編輯器

Tags:

簡中版

網頁好讀版

ezHTML 是一個先文字的 HTML 編輯器，主要目的是要快速的撰寫 Blog 文章，並且容易維護與修改，功能類似 wiki 編輯器或是 markdown 。

Demo: http://www.puritys.me/ezHTML/gui/
Source Code: https://github.com/puritys/ezHTML

Header: h1 ~ h6

h1 ~ h6 是 HTML Tag 中的標題，共有六種。

Header

# h1 title
### h3 title
#h1 h1 title
#h6 h6 title

圖片 img

圖片的寫法是使用 #img，[] 裡面可以指定 img 的屬性，第一個數字 200 為圖片的寬。

img

#img http://xxx.xxx.xx/a.png
#img[200,100] http://xxx.xxx.xx/a.png
#img[classname, alt="image alt"] http://xxx.xxx.xx/a.png

文繞圖，圖在左，文在右

text wrapping

#img[left,200] /xxx/xxx.png
#div 文字內容
#imgEnd#

這個文繞圖的範例，左邊是圖片，右邊是文字

文繞圖，圖在右，文在左

text wrapping

#img[right,200] /xxx/xxx.png
#div 文字內容
#imgEnd#

這個文繞圖的範例，左邊是文字，右邊是圖片

顯示程式碼

平常寫一些技術性文章時，很常需要顯示程式碼，當然 ezHTML 也內建使用了 Google Prettify 來顯示程式碼，並且提供一個比較簡單的寫法，只要將程式碼用 #code[type]# 包起來， type 這裡就輸入程式的類別如：「js」，「php」，「html」，最後再使用 #codeEnd# 當結尾。

   #code[js] code#   
   function test() {  
      var a = 5;  
   }  
   #codeEnd#

程式碼顯示 Demo

Example

function test() {
  var a = 5;
}

表格

Table

|  *編號  | *數量 |   *連結   |   *修改   |
|   001  |   1  |   link    |   edit   |
|   002  |   2  |   link    |   edit   |

編號	數量	連結	修改
001	1	link	edit
002	2	link	edit

網頁好讀版

This post was last modified by puritys 2014/04/06