You are not logged in.
Pages: 1
I found Xinha a while ago. I love it, just what I was looking for, but plugin construction details are a little more than lacking. This makes a wonderful product almost impossible to support.
Maybe this could be a "sticky" in order to get a definitive list of what to do in order to create a plugin. As there is little documentation, having something that can be built on (this thread) to show how to create a plugin will encourage more plugins to be written. Eventually, it could go into your WIKI.
Here is what I have so far...
To write a plugin...
Assume plugin is called UploadPicture
1. Create the new plugin folder UploadPicture under the plugins directory.
2. A JS file needs to be created in the new folder. It appears that the JS file needs a hyphen at the middle upper case character.
e.g. Folder is UploadPicture, JS file will be upload-picture.js
3. Add an entry to xinha_plugins in your myconfig.js file to point to the directory. 'UploadPicture'
4. Copy and change the code below...
(UploadPicture will need to be editted as needed)
function UploadPicture(editor) {
this.editor = editor;
var cfg = editor.config;
var self = this;
cfg.registerButton({
id : "uploadPicture",
tooltip : this._lc("Upload Picture"),
image : editor.imgURL("ed_image.gif", "UploadPicture"),
textMode : false,
action : function(editor) {
self.buttonPress(editor);
}
})
cfg.addToolbarElement("uploadPicture", "inserthorizontalrule", 1);
}
UploadPicture._pluginInfo = {
name : "UploadPicture",
version : "1.0",
developer : "David Colliver",
developer_url : "http://www.revilloc.com/",
sponsor : "MyLocalFOCUS.com",
sponsor_url : "http://www.MyLocalFOCUS.com/",
c_owner : "David Colliver",
license : "whatever license you want to give"
};
UploadPicture.prototype._lc = function(string) {
return HTMLArea._lc(string, 'UploadPicture');
};
UploadPicture.prototype.buttonPress = function(editor) {
var uiurl = _editor_url + "plugins/UploadPicture/uploadpicture.aspx";
var win;
if (HTMLArea.is_ie) {
win = window.open(uiurl, "UploadPicture",
"toolbar=no,location=no,directories=no,status=no,menubar=no," +
"scrollbars=no,resizable=yes,width=600,height=450");
} else {
win = window.open(uiurl, "UploadPicture",
"toolbar=no,menubar=no,personalbar=no,width=600,height=450," +
"scrollbars=no,resizable=yes");
}
win.focus();
};
Now, let me explain the problem I am having. Perhaps some kind soul can expand on what I have worked out here and help me to further my project. I have spent days now trying to understand this. It is the way that the developers have written their highly optimised JS that I cannot understand.
My problem is that when I click my OK button on my pop-up (I took one of the image popups as inspiration). I am trying to put image properties back into the parent xinha window. In my onclick, I have...
__dlg_close("<img src=" + document.getElementById("f_url").value + ">");
(This is just to see what is going on...). When using firefox, I can see the javascript errors. The error that is being returned is...
opener.Dialog._return is not a function (which points into the __dlg_close function in popup.js)
So, not sure what is happening, I open superclean to try and copy the dialog stuff. All to no avail.
Here is what I have.
In my UploadPicture.js file, below the code (above) is...
UploadPicture.Dialog=function(_24){
var _25=this;
this.Dialog_nxtid=0;
this.UploadPicture=_24;
this.id={};
this.ready=false;
this.files=false;
this.html=false;
this.dialog=false;
this._prepareDialog();
};
UploadPicture.Dialog.prototype._prepareDialog=function(){
var _26=this;
var _27=this.UploadPicture;
if(this.html==false){
Xinha._getback(_editor_url+"plugins/UploadPicture/uploadpicture.aspx",function(txt){
_26.html=txt;
_26._prepareDialog();
});
return;
}
I really do not understand what this code is even meant to do. In my experience of web development (and I have tons of experience), I have never seen before a function like...
UploadPicture.Dialog=function(_24){
What on earth does this line do? What is the _24? I have tried putting in UploadPicture in place of the _24 to no avail.
All I want to do is to return a value to my xinha with my image.
I look forward to this thread building up a definitive guide for plugin construction.
Offline
Hhhmmmmpppphhhh!!!!
Solved it now.
My code...
I will try and comment where I can. I hope it is of use. I would welcome more comments in order to make this better for everyone.
function Uploader(editor) {
this.editor = editor;
var cfg = editor.config;
var self = this;
cfg.registerButton({
id : "uploader",
tooltip : this._lc("Upload Picture"),
image : editor.imgURL("ed_image.gif", "Uploader"),
textMode : false,
action : function(editor) {
self.buttonPress(editor);
}
})
cfg.addToolbarElement("uploader", "inserthorizontalrule", 1);
}
Uploader._pluginInfo = {
name : "Uploader",
version : "1.0",
developer : "David Colliver",
developer_url : "http://www.revilloc.com/",
sponsor : "MyLocalFOCUS.com",
sponsor_url : "http://www.MyLocalFOCUS.com/",
c_owner : "David Colliver",
license : "whatever license you want to give"
};
Uploader.prototype._lc = function(string) {
return HTMLArea._lc(string, 'UploadPicture');
};
Uploader.prototype.buttonPress = function(editor) {
// Notice that the _popupDialog below is not closed off completely, i.e. a bracket is missing from the end. This bracket is actually after the closing curly brace.
// The popupDialog can take a "plugin://" parameter. That expects your plugin to be in a popup folder within your plugin folder.
// I have virtually set it up here to take an absolute path to my file. The function(_b) is what is launched in your pop-up.
// This will ultimately give you the return from your popup.
// NOTE: Where I use "editor" will depend on your own function. This word is set up in my first line of "uploader" function above.
editor._popupDialog(_editor_url + "plugins/Uploader/uploader.aspx?upload=phwysiwyg&phid=",function(_b)
{
if(!_b)
{
return false;
}
if(HTMLArea.is_ie)
{
editor.focusEditor();
}
// editor.insertHTML(_b) is what you want to put into your editor. Prior to your insert, you could do all sorts
// of formatting of the information held inside _b. The last command would be insertHTML.
editor.insertHTML(_b);
})
};
Offline
** BUMP **
Since I wrote the above, I have had a little while away from the project, but have come back to it now.
The documentation on creating plugins is quite weak, which is why I created this thread. It is a shame that no-one else has contributed to it to make a thread that can be used as a reference.
I have the code above working and uploading an image. (the uploader is actually a .NET app, but the above JS puts the uploaded image into my Xinha editor).
However, I now have two buttons on my toolbar for image management and want just one. The second button is the default one (insert_image) where you have to provide a URL and not really suitable for uploading images.
So, if I remove the second button, I still need to get at the properties. So, I select an image and want to press my image uploader button and display all the image properties in my window.
How do I receive the properties. I have tried copying the Xinha.prototype._insertImage(_2) but due to the way the javascript is optimised, struggle to understand it. I have tried putting the code from this function in my Uploader.prototype._lc in the code above, but this just fails. I have then tried to create a new function, Uploader.prototype._uploader and also Xinha.prototype._uploader, but netiher of these work (I don't know how these are being called.)
Any ideas on how I can create a function to receive the properties of the selected object in the editor? All I need is the function declaration and how I get the properties of the selected object. All the rest, I can manage myself.
I have spent ages trying to understand and get it to work. All help will be very much appreciated.
Offline
How do I use the Subversion repository? (I assume this is the SVN???)
What software do I use to access it? I have never done any web based source control (if that is what it is). (Ah, just searched google about svn, found http://en.wikipedia.org/wiki/Subversion_(software) . This may help.)
What I would like to do is use this thread to document the steps to write a plugin. This is obviously an area of concern for ALL plugin writers.
If plugin writers each add their little bits of information to this thread about writing a plugin, we could have a very useful reference thread. I have started the ball rolling by writing what I know and have learnt along the way, and looking at the read count of this thread, gets read fairly frequently.
Offline
You can browse the repository at http://xinha.webfactional.com/browser. Look in the 'trunk' folder.
Offline
Looking for a tutorial on creating the plugin?
I have created a tutorial. It is located at http://xinha.webfactional.com/wiki/PluginTutorial
Offline
Pages: 1