前台页面部分: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>普通编辑器案例</title> <style type="text/css"> @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"; @import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.require("dijit.TitlePane"); //编辑器组件 dojo.require("dijit.Editor"); //编辑器扩展插件 dojo.require("dijit._editor.plugins.AlwaysShowToolbar"); dojo.require("dijit._editor.plugins.EnterKeyHandling"); dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock' dojo.require("dijit._editor.plugins.TextColor"); dojo.require("dijit._editor.plugins.LinkDialog"); dojo.require("dijit._editor.plugins.ToggleDir"); //解析器 dojo.require("dojo.parser"); </script> </head> <body class="tundra"> <!-- 基本编辑器 --> <div dojoType="dijit.TitlePane" title="基本编辑器"> <textarea dojoType="dijit.Editor" id="editor01" styleSheets="/dojotoolkit/dojo/resources/dojo.css"> <p> 初始化内容,基本编辑器。 </p> </textarea> <button dojoType="dijit.form.Button" onclick="alert(dijit.byId('editor01').getValue());"> 获取编辑器的值 </button> </div> <br /> <br /> <br /> <br /> <!-- 扩展编辑器 --> <div style="border: 1px solid #ccc"> <textarea dojoType="dijit.Editor" id="editor02" plugins="['bold','italic','|','createLink','insertImage','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock']" styleSheets="/dojotoolkit/dojo/resources/dojo.css"> <p>初始化内容,扩展编辑器。</p> </textarea> </div> <button dojoType="dijit.form.Button" onclick="alert(dijit.byId('editor02').getValue());"> 获取编辑器的值 </button> </body> </html> dojo 1.1.0 学习总结 四. 在线编辑器案例 1.导入CSS样式 <style type="text/css"> @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"$$ @import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css" </style> 2.添加dojo.js库 <script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script> 3.导入组件 //编辑器组件 dojo.require("dijit.Editor"); //编辑器扩展插件 dojo.require("dijit._editor.plugins.AlwaysShowToolbar"); dojo.require("dijit._editor.plugins.EnterKeyHandling"); dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock' dojo.require("dijit._editor.plugins.TextColor"); dojo.require("dijit._editor.plugins.LinkDialog"); dojo.require("dijit._editor.plugins.ToggleDir"); //解析器 dojo.require("dojo.parser"); 注:如果只使用普通的编辑器,只需要导入 dojo.require("dijit.Editor"); dojo.require("dojo.parser"); 其他组件为扩展功能 4.基本编辑器 <!-- 基本编辑器 --> <div style="border: 1px solid #ccc"> <textarea dojoType="dijit.Editor" id="editor01" styleSheets="/dojotoolkit/dojo/resources/dojo.css"> <p> 初始化内容,基本编辑器。 </p> </textarea> </div> <button dojoType="dijit.form.Button" onclick="alert(dijit.byId('editor01').getValue());">获取编辑器的值</button> 注: 类型使用 dojoType="dijit.Editor" id和name必须要有一个,使用Ajax时,当通过form获取数据则需要name属性,通过content获取数据时,需要ID属性 <button dojoType="dijit.form.Button" onclick="alert(dijit.byId('editor01').getValue());"></button> 用户演示获取的数据,真实开发时不需要这句 5.自定义扩展编辑器功能 <!-- 扩展编辑器 --> <div style="border: 1px solid #ccc"> <textarea dojoType="dijit.Editor" id="editor02" plugins="['bold','italic','|','createLink','insertImage','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock']" styleSheets="/dojotoolkit/dojo/resources/dojo.css"> <p>初始化内容,扩展编辑器。</p> </textarea> </div> 注: 类型使用 dojoType="dijit.Editor" id和name必须要有一个,使用Ajax时,当通过form获取数据则需要name属性,通过content获取数据时,需要ID属性 plugins="['bold','italic','|','createLink','insertImage','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock']" 通过plugins属性设置编辑器功能