dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
99 lines (88 loc) • 3.22 kB
HTML
<!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>