DHTMLX系列组件的使用(5)——dhtmlx编辑器应用

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 效果预览

与之前相比，带有 toolbar 的编辑器功能丰富多了。 

注意：要实现带有 toolbar 的编辑器所需要的 JS 和 CSS 以及图标文件均可在 dhtmlxSuit 中 dhtmlxToolbar 文件夹下找到。

 

说明：在带 toolbar 的编辑器中，由editor.setIconsPath("codebase/imgs/")语句设置的图标路径无效，即运行时各个图标无法显示。不知道这是本人暂时未调通还是系统的bug，有待于进一步验证。

 

4 获取编辑器内容

editor.getContent()

 

 

-----------------------------------------------------
Stay Hungry, Stay Foolish!
Afa
July 12nd, 2010

-----------------------------------------------------