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 constructorfunction 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
-----------------------------------------------------