如何使用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/zh-hk/jy/jiaoliu/gx42y.html