107 lines
3.5 KiB
HTML
107 lines
3.5 KiB
HTML
<!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>
|