1. 初始化

首先将dhtmlxSuit中dhtmlxEditor文件夹下的codebase文件夹整个复制到你的项目目录下，然后创建HTML文件。

1.1 引入 JS 和 CSS文件

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

?

1.2 定义用于显示编辑器的容器

?

<div id="editorObj" style="width: 300px; height: 300px; border: #909090 1px solid;"></div>

?

1.3 定义生成编辑器的 JS 函数

<script type="text/javascript">
var editor;
function doOnLoad() {
	editor = new dhtmlXEditor("editorObj");
}

// another constructor
function doOnLoad() {
    var editorObject = {
        parent: "editorObj",
        content: "<b>Editor</b> content"; // init content
    }
    editor = new dhtmlXEditor(editorObject);
}
</script>

之后调用 doOnLoad 函数即可。

?

1.4 效果预览

?相当简单的一个编辑器。

?

?

2. 皮肤设置

2.1 引入所有的样式文件

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_skyblue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_black.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_blue.css" />

?

2.2 定义生成编辑器的 JS 函数

<script type="text/javascript">
var editor;
function doOnLoad() {
	editor = new dhtmlXEditor("editorObj", "dhx_black");
}
</script>

说明：在构造函数中指定样式即可。比如这里指定的是黑色。

?

2.3 效果预览

?

?

3 带有 toolbar 的编辑器

3.1 引入所需要的 JS 和 CSS 文件

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxtoolbar_dhx_skyblue.css" />
<script src="codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="codebase/dhtmlxeditor.js" type="text/javascript"></script>
<script src="codebase/ext/dhtmlxeditor_ext.js" type="text/javascript"></script>
<script src="codebase/dhtmlxtoolbar.js" type="text/javascript"></script>

?

3.2 定义生成编辑器的 JS 函数

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

?

3.3 效果预览