First of all, great editor. Really loving it. Specially the lightness and clearity of the code. Awesome really!
But to the problem.
I browsed the code and found out, that when a button on the toolbar is clicked, it executes the exec function (WYMeditor.editor.prototype.exec).
And in that function there is a switch block to open dialogs for specific things and default is execCommand.
I'm not very familiar with the execCommand, but as I understand, it calls specific actions that are defined by the language (or browser?).
What I want is to add a new button that opens a dialog with some custom markup.
Do I really need to write a "case myButtonName" block in the code, or can I extend or do something without touching the WYMeditor code itself?
Forum closed. New forum available at http://community.wymeditor.org/
Adding a new button to the toolbar
6 posts • Page 1 of 1
Adding a new button to the toolbar
by mikovali on Wed Jul 29, 2009 1:42 pm
- mikovali
- Posts: 2
- Joined: Wed Jul 29, 2009 1:29 pm
Re: Adding a new button to the toolbar
by Nico on Fri Jul 31, 2009 3:42 pm
Hi,
You can add a new button without touching the wymeditor's code.
What I recommand is to build a plugin for your fonctionality, and than you include this plugin, and you call it in the skin you use, or in the postInit function.
This is an exemple of code you could use as a base to make your dialog plugin. I extracted this from a plugin I made, but my plugin was much more messy, so I can't publish it all :
Nico
You can add a new button without touching the wymeditor's code.
What I recommand is to build a plugin for your fonctionality, and than you include this plugin, and you call it in the skin you use, or in the postInit function.
This is an exemple of code you could use as a base to make your dialog plugin. I extracted this from a plugin I made, but my plugin was much more messy, so I can't publish it all :
- Code: Select all
;window.jQuery && (function($) {
var html = '<body class="wym_dialog wym_dialog_myplugin"'
+ ' onload="window.opener.WYMeditor.INIT_MY_DIALOG(window, ' + WYMeditor.INDEX + ')"'
+ '>'
// The HTML code here for the dialog
+ '</body>'
WYMeditor.INIT_MY_DIALOG = function(wdw, index) {
var wym = WYMeditor.INSTANCES[index];
var doc = wdw.document;
var selected = wym.selected();
//add css rules from options
var styles = doc.styleSheets[0];
var aCss = eval(wym._options.dialogStyles);
wym.addCssRules(doc, aCss);
// ....... Any code you want. You can take exemple on WYMeditor.INIT_DIALOG
// Handle here events like form submition for exemple.
};
$.extend(WYMeditor.editor.prototype, {
// Function to be called for initialisation in the skin init, or in postInit
MyPluginInit: function() {
var dialog = (function(wym) {
return function() {
wym.dialog( 'Dialog Title', html );
return false;
};
})(this);
// Insert a button in the toolbox after the link button
$(this._box)
.find('.wym_tools ul .wym_tools_link')
.after(
$(
'<li class="wym_tools_myplugin">'+
'<a title="Insert what I want" href="#">'+
'Insert what I want'+
'</a>'+
'</li>'
)
.mousedown(dialog)
);
}
});
})(window.jQuery);
Nico
- Nico
- Posts: 19
- Joined: Tue Jun 23, 2009 6:49 pm
Re: Adding a new button to the toolbar
by mikovali on Tue Sep 01, 2009 12:09 pm
Well my problem is that when I user clicks my new button on the toolbar, how do I add a listener to it. How does it opens the dialog that I've specified in the first place.
The onload for the dialog doesn't help if the dialog itselt does not open.
I'm really sorry, if this is very easy and staring me right at my face.
The onload for the dialog doesn't help if the dialog itselt does not open.
I'm really sorry, if this is very easy and staring me right at my face.
- mikovali
- Posts: 2
- Joined: Wed Jul 29, 2009 1:29 pm
Re: Adding a new button to the toolbar
by mr_lundis on Mon Oct 05, 2009 3:22 pm
If you look in Nico's code, it's all there.
Nico defines an event handler that opens up a new dialog and injects a reference to the WYM instance into it's scope:
Then Nico adds a new button to the toolbar and binds the dialog function to the mousedown (click) event.
In other words, you cant modify the dialog function to do whatever you want when a users click your button. And you you need to access you button again you could store a reference to the jQuery object or access it using it's class (wym_tools_myplugin).
Cheers!
Nico defines an event handler that opens up a new dialog and injects a reference to the WYM instance into it's scope:
- Code: Select all
var dialog = (function(wym) {
return function() {
wym.dialog( 'Dialog Title', html );
return false;
};
})(this);
Then Nico adds a new button to the toolbar and binds the dialog function to the mousedown (click) event.
- Code: Select all
$(this._box)
.find('.wym_tools ul .wym_tools_link')
.after(
$(
'<li class="wym_tools_myplugin">'+
'<a title="Insert what I want" href="#">'+
'Insert what I want'+
'</a>'+
'</li>'
)
.mousedown(dialog)
);
In other words, you cant modify the dialog function to do whatever you want when a users click your button. And you you need to access you button again you could store a reference to the jQuery object or access it using it's class (wym_tools_myplugin).
Cheers!
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
- mr_lundis
- Posts: 335
- Joined: Sun Dec 02, 2007 10:59 am
- Location: Sweden
Re: Adding a new button to the toolbar
by murphy on Wed Mar 10, 2010 1:02 pm
I use following code for create plugin. It is add a new button and opens a dialog with title. But content of the dialog "undefined", and there are no javascript errors.
And init it:
What I doing wrong?
- Code: Select all
; window.jQuery && (function($) {
var html = "<body class='wym_dialog wym_dialog_video'"
+ " onload='WYMeditor.INIT_MY_DIALOG(window, ' + WYMeditor.INDEX + ')'"
+ ">"
+ "<form action='/index.php/upload/video?wym="+WYMeditor.INDEX+"' method='post' enctype='multipart/form-data'>"
... // dialog html
+ "</body>";
WYMeditor.INIT_MY_DIALOG = function(wdw, index) {
var wym = WYMeditor.INSTANCES[index];
var doc = wdw.document;
var selected = wym.selected();
//add css rules from options
var styles = doc.styleSheets[0];
var aCss = eval(wym._options.dialogStyles);
wym.addCssRules(doc, aCss);
// ....... Any code you want. You can take example on WYMeditor.INIT_DIALOG
// Handle here events like form submition for example.
};
$.extend(WYMeditor.editor.prototype, {
// Function to be called for initialisation in the skin init, or in postInit
VideoInit: function() {
var dialog = (function(wym) {
return function() {
wym.dialog('Upload video', html);
return false;
};
})(this);
// Insert a button
jQuery(this._box)
.find('.wym_tools ul')
.append(
jQuery(
"<li class='wym_tools_fullscreen'>"
+ "<a name='Video' title='video' href='#'"
+ " style='background-image:"
+ " url(" + this._options.basePath +"plugins/video/icon_video.gif)'>"
+ "Video"
+ "</a></li>"
)
.mousedown(dialog)
);
}
});
})(window.jQuery);
And init it:
- Code: Select all
jQuery(function() {
stylesheet: '/css/wymeditor.css',
jQuery('.wymeditor').wymeditor({ lang: 'ru', stylesheet: '/css/wymeditor.css',
postInit: function(wym) {
wym.VideoInit();
}
});
});
What I doing wrong?
- murphy
- Posts: 1
- Joined: Wed Mar 10, 2010 12:45 pm
Re: Adding a new button to the toolbar
by mr_lundis on Thu Apr 01, 2010 12:58 pm
Changing
to
will probably do the trick. Cheers!
- Code: Select all
wym.dialog('Upload video', html);
to
- Code: Select all
wym.dialog('Upload video', '', html);
will probably do the trick. Cheers!
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
- mr_lundis
- Posts: 335
- Joined: Sun Dec 02, 2007 10:59 am
- Location: Sweden
6 posts • Page 1 of 1
Who is online
Users browsing this forum: No registered users and 2 guests