前台页面部分:
<%@ 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属性设置编辑器功能
分享到:
相关推荐
struts2-dojo-plugin-2.3.4 jar 日期控件的jar包 需要的自行下载
struts2-dojo-plugin-2.2.1.jar, 直接导入到Struts2项目里即可,注意版本。
struts2-dojo-plugin-2.3.15.3.jar.zip
dojo-release-1.4.3.zip dojo-release-1.4.3.zip Qooxdoo
dojo-release-1.4.2-src.tar.gz
struts2-dojo 跨域时解决拒绝访问的问题
dojo-release-1.9.1-src
dojo-0.3.1-ajax
dojo-release-1.6.1-src.zip
struts2-dojo-plugin-2.3.1.2.jar
struts2-dojo-plugin-2.3.8
dojo-release-1.12.2 开发包,搭建配置dojo,包含dojo开发时所需js文件
Struts2的使用中出现的版本不符合或者缺少struts2-dojo-plugin-2.3.16的问题,大家可以下载使用。
struts2-dojo-plugin-2.1.0的jar包,可以再struts中使用dojo......
struts2-dojo-plugin-2.3.24日期控件9-12月乱码解决后jar包
struts2-dojo-plugin-2.1.6.jar 解决了datetimepicker显示月份乱码的问题,显示9、10、11、12月份时出现乱码,本包修改了该bug
dojo是一个用javascript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些,长期...
dojo-release0.9 dojo-release1.0 dojo-release1.4
dojo-release-1.2.1dojo-release-1.2.1dojo-release-1.2.1