You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.1 KiB
98 lines
3.1 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Editor Custom Plugin Test/Tutorial</title> |
|
|
|
<script type="text/javascript" src="../boilerplate.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"> |
|
require([ |
|
"dojo/_base/declare", |
|
"dojo/dom-construct", |
|
"dojo/dom-geometry", |
|
"dojo/dom-style", |
|
"dojo/_base/lang", |
|
"dojo/parser", |
|
"dojo/sniff", |
|
"dijit/registry", |
|
"dijit/Editor", |
|
"dijit/_editor/_Plugin", |
|
"dijit/form/ToggleButton", |
|
"dojo/domReady!" |
|
], function(declare, domConstruct, domGeom, domStyle, lang, parser, has, registry, Editor, _Plugin, ToggleButton){ |
|
|
|
var MyPlugin = declare("MyPlugin", _Plugin, { |
|
buttonClass: ToggleButton, |
|
useDefaultCommand: false, |
|
name: "MyPlugin", |
|
|
|
_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.button.on("click", lang.hitch(this, "_toggleSource")); |
|
}, |
|
|
|
destroy: function(f){ |
|
this.inherited(arguments); |
|
if(this.sourceArea){ domConstruct.destroy(this.sourceArea); } |
|
}, |
|
|
|
_toggleSource: function(){ |
|
this.source = !this.source; |
|
if(!this.sourceArea){ |
|
this.sourceArea = document.createElement('textarea'); |
|
this.sourceArea.style.position = 'absolute'; |
|
this.sourceArea.setAttribute("aria-label", "sourceArea"); |
|
domConstruct.place(this.sourceArea, this.editor.domNode, "last"); |
|
} |
|
if(this.source){ |
|
this.sourceArea.style.display = ""; |
|
this.sourceArea.value = this.editor.getValue(); |
|
domStyle.set(this.sourceArea, "borderWidth", |
|
domStyle.get(this.editor.editingArea, "borderStyle") == "none" ? "0" : |
|
domStyle.get(this.editor.editingArea, "borderWidth")); |
|
domGeom.setMarginBox(this.sourceArea, domGeom.getMarginBox(this.editor.editingArea)); |
|
if(has("ie")){ |
|
//work around IE oddity with offsetParent mismatch |
|
var p = domGeom.position(this.editor.editingArea); |
|
domStyle.set(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 */ |
|
_Plugin.registry["MyPlugin"] = function(args){ |
|
return new MyPlugin({}); |
|
}; |
|
|
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro" role="main"> |
|
<div id="editor1" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"editorExtraPlugin",extraPlugins:["MyPlugin"], height: 150'><p> |
|
This editor should have my custom plugin |
|
</p></div> |
|
</body> |
|
</html>
|
|
|