妙知谷如何使用xheditor可視化編輯器
- 學習交流
- 關注：1.7W次
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頭部內。
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/jy/jiaoliu/gx42y.html
