如何使用xheditor視覺化編輯器
xheditor是基於jQuery的迷你視覺化編輯器。用xheditor可以方便快速的製作出一個編輯器出來。因此在開發WEB網站中很常使用。現在我們來看看如何使用xheditor視覺化編輯器吧。
操作方法
（01）下載xheditor版本並解壓xheditor版本在網上下載即可。然後把下載下來的zip檔案解壓。如下圖所示：
（02）將xheditor資料夾複製貼上到站點中將解壓完成的xheditor資料夾複製到站點中。
（03）新建檔案在Dreamweaver軟體中新建一張HTML檔案。建立步驟：找到選單欄中的【新建】--【檔案】--【HTML】即可。
（04）引入4個js檔案從xheditor資料夾中拉出4個js檔案到HTML的head頭部，如下所示：<script type="text/javascript" src="../xheditor/jquery/"></script><script type="text/javascript" src="../xheditor/"></script><script type="text/javascript" src="../xheditor/xheditor_lang/"></script><script type="text/javascript" src="../xheditor/"></script>
（05）在body主體部分編輯一個textare文字區域程式碼，如下所示： <textarea id="Contents" name="Contents" cols="" rows="" style="height:300px; width:600px;"></textarea>
（06）編寫script指令碼程式碼，定義xheditor<script type="text/javascript"> var categoryData; $("#Contents")itor({ tools:'full', skin:'o2007silver', upBtnText:'上傳', upImgUrl:'' });</script>
（07）預覽效果點選Dreamweaver選單欄的地球圖示，選擇在【預覽在360se】中。在瀏覽器中的預覽效果如下所示：
（08）為了便於理解，貼出全部的程式碼，如下所示：<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><script type="text/javascript" src="../xheditor/jquery/"></script><script type="text/javascript" src="../xheditor/"></script><script type="text/javascript" src="../xheditor/xheditor_lang/"></script><script type="text/javascript" src="../xheditor/"></script></head><body> <textarea id="Contents" name="Contents" cols="" rows="" style="height:300px; width:600px;"></textarea> </body><script type="text/javascript"> var categoryData; $("#Contents")itor({tools:'full',skin:'o2007silver',upBtnText:'上傳',upImgUrl:''});</script></html>
特別提示
要記得下載xheditor包並解壓，然後複製貼上到站點中，引入4個js檔案到head頭部內。
