dojo 0.4 关于 editor2 的使用

dojo 0.4 关于 editor2 的使用

 

0.4刚出来，我也是刚用上dojo，研究了几天。

由于 editor 在 0.5中将被删除，所以还是用 editor2，不过官方站点的关于 editor2 的文档和例子都比较少，找了半天也没找多少出来，只好自己动手摸了。

 

我不研究简单的在页面元素中定义 dojo 属性的用法，一般我都不会这么用，一般都是用 javascript 动态创建。

 

1.创建

var args = {

    shareToolbar: false,
    toolbarAlwaysVisible: false,
    focusOnLoad: true,
    closeOnSave: true,
    toolbarTemplatePath: "src/widget/templates/EditorToolbar.html",
    height: 100

};

var e = dojo.widget.createWidget("Editor2",  args,  dojo.byId("divId"));

 

说明：

官方的例子中还有一个创建参数：commandList: ["bold", "italic", "underline", "insertimage", "save"]，但是我怎么试工具栏都出不来，换成 toolbarTemplatePath 就行了。

文件 src/widget/templates/EditorToolbar.html 里面定义了工具栏的内容，可以自行修改。

 

2.调整

原来提供的几个工具栏的模板文件，如 src/widget/templates/EditorToolbar.html，都不带字体和字号的工具，修改 src/widget/templates/EditorToolbar.html ，在其中加入以下内容：

 

                <td width="36">
                    <span class="iconContainer dojoEditorToolbarItem" dojoETItemName="fontname">
                        <span title="设置字体">字体</span>
                    </span>
                </td>
                <td width="36">
                    <span class="iconContainer dojoEditorToolbarItem" dojoETItemName="fontsize">
                        <span title="设置字号">字号</span>
                    </span>
                </td>

 

打开文件 src/widget/templates/Editor2/FontName.html 和 src/widget/templates/Editor2/FontSize.html ,进行字体和字号的定制

 

3.使用

a.更新内容

e.replaceEditorContent("作者:吴悠");

b.取得内容

alert(e.getEditorContent());

c.执行命令：插入内容

e.execCommand("inserthtml", "作者:吴悠");

 

注:

commands: inserthtml setbackcolor forecolor backcolor fontsize setfontname setblockformat unlink hilitecolor createlink

 

4.测试过程中发现一些bug，期待下一版

 

5.发现与 prototype.js 有冲突