Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/test_CustomPlugin.html
+++ b/master/examples/test_CustomPlugin.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>Editor Custom Plugin Test/Tutorial</title>
+
+	<style type="text/css">
+		@import "../../themes/claro/document.css";
+		@import "../css/dijitTests.css";
+	</style>
+
+	<!-- required: a default dijit theme: -->
+	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
+
+	<!-- required: dojo.js -->
+	<script type="text/javascript" src="../../../dojo/dojo.js"
+		data-dojo-config="isDebug: true"></script>
+
+	<!-- not needed, for testing alternate themes -->
+	<script type="text/javascript" src="../_testCommon.js"></script>
+
+	<style>
+		.customIconHtmlToggle {
+			background-image: url('customIcon.gif'); /* custom editor icons sprite image */
+			background-repeat: no-repeat;
+			width: 18px;
+			height: 18px;
+			text-align: center;
+		}
+	</style>
+
+	<script type="text/javascript">
+		dojo.require("dijit.dijit"); // optimize: load dijit layer
+		dojo.require("dijit.Editor");
+		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
+
+		dojo.require("dijit._editor._Plugin");
+		dojo.require("dojo.string");
+
+		dojo.ready(function(){
+			dojo.declare("MyPlugin",
+				dijit._editor._Plugin,
+				{
+					buttonClass: dijit.form.ToggleButton,
+					useDefaultCommand: false,
+	
+					_initButton: function(){
+						this.command = "htmlToggle";
+						this.editor.commands[this.command] = "View HTML source"; // note: should be localized
+						this.iconClassPrefix = "customIcon";
+						this.inherited(arguments);
+						delete this.command; // kludge so setEditor doesn't make the button invisible
+						this.connect(this.button, "onClick", this._toggleSource);
+					},
+	
+					destroy: function(f){
+						this.inherited(arguments);
+						if(this.sourceArea){ dojo.destroy(this.sourceArea); }
+					},
+	
+					_toggleSource: function(){
+						this.source = !this.source;
+						if(!this.sourceArea){
+							this.sourceArea = dojo.doc.createElement('textarea');
+							this.sourceArea.style.position = 'absolute';
+							dojo.place(this.sourceArea, this.editor.domNode, "last");
+						}
+						if(this.source){
+							this.sourceArea.style.display = "";
+							this.sourceArea.value = this.editor.getValue();
+							dojo.style(this.sourceArea, "borderWidth", dojo.style(this.editor.editingArea, "borderStyle") == "none" ? "0" : dojo.style(this.editor.editingArea, "borderWidth"));
+							dojo.marginBox(this.sourceArea, dojo.marginBox(this.editor.editingArea));
+							if(dojo.isIE){
+								//work around IE oddity with offsetParent mismatch
+								var p = dojo.position(this.editor.editingArea);
+								dojo.style(this.sourceArea, { left: p.x, top: p.y });
+							}
+						}else{
+							this.editor.setValue(this.sourceArea.value);
+							this.sourceArea.style.top = "-999px";
+							this.sourceArea.style.display = "none";
+						}
+	
+						this.button.set('label', this.source ? "View WYSIWYG" : this.editor.commands["htmlToggle"]); // note: should be localized
+					}
+				}
+			);
+	
+			/* the following code registers my plugin */
+			dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){
+				if(o.plugin){ return; }
+				if(o.args.name == "MyPlugin"){
+					return new MyPlugin({});
+				}
+			});
+			
+			dojo.parser.parse();
+		});
+	</script>
+</head>
+<body class="claro">
+	<div id="editor1" data-dojo-type="dijit.Editor" data-dojo-props='extraPlugins:["MyPlugin"], height: 150'><p>
+	This editor should have my custom plugin
+	</p></div>
+</body>
+</html>