作為動態網站在建設過程中難免遇到在線編輯文章的問題。HTML提供了一個textarea標記,但是實際上沒有解決這個問題,因為從textarea的是純文本。除非在輸入的時候使用了HTML標記,否則在輸出的時候將獲得從頭到尾毫無結構的一盤文字。WEB設計中通過DHTML構建一類所見即所得的在線編輯器對這個問題有了很好的解決。
但是所見即所得並不是唯一的解決辦法。筆者在上網過程中發現一些門戶網站的在線編輯器非常有特色。它並不是所見即所得(但是提供了一個預覽功能),而是一個textarea的文本域,但是又不支持HTML標記語言。而是有它自己的一套標記語言。
圖1
圖2
筆者使用覺得非常流暢,總結其優點如下:
第一, 它的標記不多,相對於HTML而言非常簡單,而且通過回車可以自動生成段落,容易被一般用戶所接受。筆者認為如果使用中文標記,可以被更多國內用戶接受。
第二, 相對所見即所得的編輯器而言用戶更能掌握自己的文章結構,生成亂碼少。
第三, 可見性相對於HTML而言要好得多,加上預覽功能後更佳。
第四, 由於自己的標記語言不支持腳本,因而是更安全的.
經過筆者一番思考和實踐,現把構建這種屬於自己的標記語言的方法公示:
首先,我們為自己的網站確定一套簡單而必要的標記語言。確定時把一些不必要的省略。拿我而言,我為自己的網站確定的標記語言如下:
[圖片]圖片的網址[/圖片]
[大標題]文字內容[/大標題]
[小標題]文字內容[/小標題] (考慮到用戶可能會細分所以加上)
[粗體]文字內容[/粗體]
[斜體]文字內容[/斜體]
[鏈接]網址[/鏈接]
然後,提供一定的機制,讓浏覽器讀懂我們的標記.那麼,怎麼讓浏覽器讀懂我們自己確定的標記呢? 在內容顯示的頁面,我們需要寫一個程序將我們的所有標記翻譯成為標准的HTML標記,但是此前必須過濾掉用戶輸進來的HTML代碼。
第一步:過濾HTML代碼.
這個其實很簡單,只要將所有的 “<” 標簽替換為 “<” ,另外把所有 “>” 替換為 “>” 就可以了。在ASP中通過如下語句實現:
Content=replace(content,”<”,”<”)
Content=replace(content,”>”,”>”)
(以上代碼中,content是儲存了我們要顯示的內容的變量,下文中若出現也表示一樣的意思。)
第二步:將我們的標記翻譯為HTML
這個相對復雜一些,因為並不是簡單的將所有[標簽替換為<和]替換為>然後將裡面的中文(比如圖片)翻譯為英文(比如IMG)就可以的。原因有兩個:
1 是我們的標記裡面的內容,根據不同的分類需要做不同的處理:
第一類,直接顯示給用戶的,比如:
[大標題]文字[/大標題]
此時確實是只要將標簽翻譯成相應的英文,比如上面的標記翻譯為<h1>文字</h1>就可以了.
第二類,不直接呈現給用戶的,比如:
[圖片]圖片網址[/圖片]
此時,標簽中間的內容”圖片網址”只是我們要顯示的網址,在HTML中是作為<IMG>標簽的SRC屬性,而且這個標簽在HTML中是不要結尾標簽的.所以直接翻譯的結果是肯定錯誤的.
第三類,直接呈現同時又作為屬性,比如:
[鏈接]網址[/鏈接]
2 是並非所有出項標記的地方都是要翻譯的,比如,有時候用戶需要用符號”[“和符號”]”來表現他們的內容,而這時候如果將這樣的標記翻譯為”<”和”>”肯定不是符合用戶的心意的。
分析了出現的問題,筆者將在下面給出編寫程序的思路參考和一個參考的程序.
由於不同的標簽需要的翻譯方式不一樣,所以必須針對不同的標簽,一個個的翻譯.
對於任何單個的標記,一篇文章內可能出現多此,也可能一次也不出現,程序應當從頭到尾首先檢查某一標記的開始標記(比如對”圖片]圖片地址[/圖片]”是”[圖片]”)出現的位置,一旦檢查到了,然後從那個位置開始檢查結束標記,如果也檢查到了,則說明這是我們要的標記;如果結束標記沒有檢查到,那麼說明那不是我們要的標記,而只是用戶自己展示的內容。檢查到之後,將標記翻譯為HTML標記,並根據不同類型對標記中的內容作不同的處理.坐完以後從結束標記的位置又繼續檢查,直到文章結束。
實際編寫中,需要用到遞歸的思想.下面給出翻譯[圖片]圖片地址[/圖片]這個標記的范例程序.
Function TranslateImg(Str)
Start=instr(str,”[圖片]”) ‘檢查標記的開始位置
If start=0 then exit function ‘開始位置為0,表示沒有這個標記,那麼程序結束
End=instr(start,str,”[/圖片]” ‘檢查繼該開始位置之後所出現的結束標記位置
If end=0 then exit function ‘結束標記出現位置為0,表示沒有結束標記,程序結束
MidStr=mid(str,start+4,end-start-4) ‘標記中間的內容
ReplaceStr=mid(str,start,end-start+5) ‘標記中間的內容加上標記,作為將要替換的內容
Str=replace(instr,ReplaceStr,”<img src=”&MidStr&”>”) ‘將標記翻譯為HTML
TranslateImg Str ‘遞歸執行該函數
End Function
通過以上分析,相信讀者能夠通過自己的分析為自己的網站構建一套”MyHTML”標記語言了。
在實際的開發中還會有一些課題需要攻破,比如:標記嵌套的處理;是在將用戶提交到數據庫之前就翻譯還是待用戶浏覽文章從數據庫中調出來時才翻譯;為用戶提供一些自動插入標記的按鈕方便用戶的操作體驗登.本文僅作拋磚引玉之用希望引得讀者一點欣賞。