14. DHX編輯器及選單

一、DHX編輯器基本語法

下載sql檔

<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxEditor/codebase/skins/dhtmlxeditor_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxEditor/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxEditor/codebase/dhtmlxeditor.js"></script>

二、編輯器JS部份

<script>
var editor;
function doOnLoad() {
    editor = new dhtmlXEditor("editorObj");
    editor.setIconsPath("dhtmlxSuite/dhtmlxEditor/codebase/imgs/");
    editor.init();
}
</script>

三、送出編輯器中資料

<form action="input.php" method="post" onSubmit="document.getElementById('content').value = editor.getContent();">
    <div id="editorObj" style="width: 100%; height: 300px; border: #909090 1px solid;"></div>
    <textarea id="content" name="content" style="display:none;"></textarea>
</form>

四、DHX選單基本語法

<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>

五、DHX選單JS部份

<script>
    var menu;
    function initMenu() {
        menu = new dhtmlXMenuObject("menuObj");
        menu.setIconsPath("icons/");
        menu.loadXML("menu.xml");
    }
</script>

六、XML結構

<?xml version="1.0"?>
<menu>
  <item id="m1" text="首頁">
      <href target="_top">index.php</href>
  </item>
  <item id="m2" text="新聞">
    <item id="m21" text="發布新聞" img="application_edit.png" imgdis="application_edit.png">
      <href target="_SELF">input.php</href>
    </item>
    <item id="ma1" type="separator"/>
    <item id="m22" text="新聞列表" img="application_form.png" imgdis="application_form.png">
      <href target="_SELF">list.php</href>
    </item>
  </item>
</menu>