dojo1.1.0学习总结--在线编辑器案例
前台页面部分：
<%@ 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属性设置编辑器功能
<%@ 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属性设置编辑器功能