dojo1.1.0学习总结--在线编辑器案例

发布时间：2020-12-16 21:52:32 所属栏目：百科来源：网络整理

导读：前台页面部分： %@ 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"; @i

前台页面部分： <%@ 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},'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','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','formatBlock']" styleSheets="/dojotoolkit/dojo/resources/dojo.css"> <p>初始化内容，扩展编辑器。</p> </textarea> </div> 注：类型使用 dojoType="dijit.Editor" id和name必须要有一个，使用Ajax时，当通过form获取数据则需要name属性，通过content获取数据时，需要ID属性 plugins="['bold','formatBlock']" 通过plugins属性设置编辑器功能

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!