I've taken some time to implement the first steps towards having Drupal plugin support for jWYSIWYG.
I've tested it with the Teaser Break plugin in Firefox 3 so far and it looks good.

There's no support for Dialogs yet (allthough the Image Assist button shows up if enabled, it does nothing).

I've stared myself blind at this and need someone else to look at it to see if I'm heading in the right direction.

The attach method is huge because everything needs to be done before jwysiwyg is initialized, and almost every setting is passed as a parameter.

I hope the code comments will give some pointers to what happens but if those are not enough, just ask away here or on IRC.


TwoD’s picture

new14.27 KB

Here's an update to fix buttons not being disabled properly along with a few more things.
I think the patch is almost done, considering what can be done at the moment.

I'd very much appreciate if anyone could help testing this, and perhaps review the code.

sun’s picture

Status:Needs review» Needs work


We need to get rid of "separator01" and "h2mozilla" buttons though. If those buttons are enabled by default, then we have to iterate over Wysiwyg.TOOLBAR to fetch all available buttons, and set their visibility to false (if not contained in our settings.buttons).

TwoD’s picture

Yes the separators and mozilla specific buttons are enabled by default, hence the big array defaulting to false in the code.
I'm not sure why they have mozilla specific buttons as I have not tested that yet, I just added things to that array until there were no visible objects left in the toolbar.

The separators are a nice visual addition IMHO, but they do clutter the Buttons and Plugins GUI...

sun’s picture

Note that we'll tackle button groupings, separators, and all related stuff in #277954: Allow to sort editor buttons. Separators have been intentionally left out from plugin/button registries, because they do not make sense without a GUI to customize placement of buttons.

sun’s picture

new14.15 KB

Hrm. I tried to help here, but I'm a bit puzzled with how jWysiwyg registers itself into jQuery — I didn't manage it to access its default properties in that magic "Wysiwyg()" function, which seems to be declared within the scope of jQuery, but not in the window...

Anyway, attached patch contains some code clean-up, as well as a PHP notice fix (enabling E^ALL highly recommended).

sun’s picture

uh oh - http://drupal.org/cvs?commit=222770 probably broke this patch. Sorry.

TwoD’s picture

The scope in which Wysiwyg is declared is exited and the only reference to that object is through the $.data function/method and the 'wysiwyg' key.
The registration happens by extending the jQuery object through $.fn.wysiwyg = function ..... When called it in turn calls the Wysiwyg function to return a new instance keyed to the current jQuery object, or call a method on an existing instance. This makes it a bit hard to figure out how everything is connected at first, and especially what this refers to all the time, but it's pretty efficient code.

Yeah the code needed some cleanups, thanks. I'll reroll the patch against the new code.

TwoD’s picture

new14.47 KB

I used sun's patch from #5 and added support for updating Drupal.wysiwyg.activeId when the editing area gets focus. (Clicking things in the toolbar does not count.)
The separators no longer show up under "Buttons and plugins", commented out the code for future reference. They will thus not show up unless in default mode.
I also fixed an issue where buttons would not be deactivated when clicking a Drupal plugin button.

I don't think we can remove the Mozilla specific header buttons. It seems that if I disable the Mozilla buttons and try to use the corresponding other button in Firefox, nothing happens.
Maybe we could hard-code connections between those buttons though, so that if I enable H1 the H1 Mozilla button is also enabled.

abraham’s picture


JohnnyX’s picture

I testet your patch with

wysiwyg api 6.x-2.x-dev
jwysiwyg 0.92

I modified jwysiwyg (version line to match search expression of wysiwyg api module, version number at end of line) and the button set of jwysiwyg within wysiwyg api module (http://wiki.github.com/akzhan/jwysiwyg/default-parameter-settings-visibl...).

Editor works if I disable all buttons and plugins (with default toolbar) or all enabled (full toolbar). If I mix up enabled and disabled button and plugin settings jwysiwyg breaks sometimes and the toolbar disapears.

A short test with wysiwyg_imageupload module fails (maybe a problem with dependencies of wysiwyg_imageupload module). I see a (I think) jquery Dialog for insert image but without upload and the dialog view isn't correct. Also link promt (error message) doesn't open if no text is selected.
This patch is my starting point for the next steps...

I hope I created the patch well. It's my first time I do so :)
And sorry for my bad english... ;)

JohnnyX’s picture

jwysiwyg works fine and it is already active in development (plugin api) but at the moment it isn't useable with wysiwyg (buttons and plugin settings and wysiwyg_imageupload are not supported).

Sadly I can't implement it because I haven't enough experience with javascript/ drupal modules at the moment... Is there nobody who would also use jwysiwyg and could do it?

JohnnyX’s picture

Ok, I tried to fix problems with wysiwyg plugins (wysiwyg_imageupload: edit an already inserted image is broken and button is invisible) but I have to give up... I don't understand where and what is to do and I haven't found a documentation how to integrate an editor to wysiwyg api :(

So maybe I have to remove wysiwyg editor/ api from my module list.

ckeditor -> generates strange source code and have no spoiler plugin I need
tinymce -> no spoiler plugin...
cleditor -> looks really good but isn't supported and only works with jquery 1.4
jwysiwyg -> doesn't support wysiwyg_imageupload/ imce and plugins

So - if nobody have a solution - I have to use bueditor instead? :(((
Or can somebody help to fix the imageupload support/problem with jwysiwyg?

Alan D.’s picture

Any update / progress? This is a show stopper when trying to use this editor with Insert module, which is a shame as it is a nice little editor :(

jonhattan’s picture

Version:6.x-2.x-dev» 7.x-2.x-dev
new11.87 KB

Updated patch in #8 to drupal 7 & jwysiwyg 0.97.2.

I'll comment on the changes I've made in the next comment once I have dreditor available :)

jonhattan’s picture

+++ b/editors/js/jwysiwyg.js
@@ -1,9 +1,145 @@
+    /*
+    if (Drupal.settings.wysiwyg.plugins.drupal[buttonName]) {
+      // This is a Drupal plugin and needs a custom function.
+      var pluginSettings = Drupal.settings.wysiwyg.plugins[params.format].drupal[buttonName];
+      if (pluginSettings.css) {
+        css.push(pluginSettings.css);
+      }
+      buttonSettings[buttonName].exec = function(fieldName, buttonName) {
+        // Use a closure to store the value of fieldName and buttonName.
+        return function() {
+          var $field = $('#' + fieldName);
+          if (typeof Drupal.wysiwyg.plugins[buttonName].invoke == 'function') {
+            var element = $field.data('wysiwyg').editor[0];
+            var selectedRange = Drupal.wysiwyg.editor.instance.jwysiwyg.getSelectedRange(element.contentWindow);
+            var selectedNode = (selectedRange.commonAncestorContainer ? selectedRange.commonAncestorContainer : selectedRange.parentElement());
+            var data = { format: 'html', node: selectedNode, content : $field.data('wysiwyg').getContent() };
+            Drupal.wysiwyg.plugins[buttonName].invoke(data, Drupal.settings.wysiwyg.plugins.drupal[buttonName], params.field);
+          }
+        };
+      }(params.field, buttonName);
+    }
+    */

Commented out piece of code.

Drupal.settings.wysiwyg.plugins.drupal[buttonName] is not avasilable. I don't know how it works.

+++ b/editors/js/jwysiwyg.js
@@ -1,9 +1,145 @@
+  // jWysiwyg only supports a single css file, so we'll change the template.
+  var htmlTemplate = '<' + '?xml version="1.0" encoding="UTF-8"?' + '>'
+   '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
+   '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'
+   '<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'
+   '<link rel="stylesheet" type="text/css" href="' + css.join('" /><link rel="stylesheet" type="text/css" href="') + '" />'
+   'STYLE_SHEET</head><body>INITIAL_CONTENT</body></html>';
+  settings.html = htmlTemplate;
+  settings.initialContent = '';

Ops. Not tested how css files area added in 0.97

OTOH initialContent needs to be reset.

+++ b/editors/jwysiwyg.inc
@@ -56,3 +66,138 @@ function wysiwyg_jwysiwyg_version($editor) {
+  // Disable all default buttons if we have a custom config.
+  if (!empty($config['buttons'])) {
+    $plugins = wysiwyg_get_plugins($editor['name']);
+    $button_statuses = array_fill_keys(array_keys($plugins['default']['buttons']), FALSE);

Avoid repeating all the buttons here again.


Those buttons where added since 0.95:

0.96: paragraph
0.97: highlight, code

Should we check button availability per version?

jonhattan’s picture

Status:Needs work» Needs review
new14.96 KB

So I think I've learned a bit more about wysiwyg and javascript but I'm probably wrong.

Here's an updated version of the patch.

* Teaser break plugin works... more or less.
* Added a new section to the settings page for editor specific configuration. For now it provides a checkbox for the user to choose whether jwysiwyg should use jquery ui dialogs.
* Implemented the resizing option (it uses jquery ui.resizable).
* Reset editor default buttons so if you haven't configured the editor instance buttons, you get no buttons.
* Defined some buttons as plugins because they need a js file to be loaded and didn't found other way to include it.

It still needs work but merits a review to confirm it is going in the right direction.

JKey’s picture

I`m apply patch in #16
and now i`m canno save text from jWysiwyg to site.
On save no changed send.

On click switch editor to siple text in console looked

[15:17:23.506] TypeError: pluginSettings[params.format] is undefined @ http://cluster.joxho.org/sites/all/modules/wysiwyg/editors/js/jwysiwyg.j...

in 83 line get error "pluginSettings[params.format] is undefined "

-------------------- -------------------- -------------------- -------------------- -------------------- --------------------
var oldGetContent = editor.getContent;
editor.getContent = function() {
var content = oldGetContent.call(this);
for (var plugin in pluginSettings[params.format].drupal) if (typeof pluginInstances[plugin].detach == 'function') { <= in this line error
content = pluginInstances[plugin].detach(content, pluginSettings[plugin], params.field);

-------------------- -------------------- -------------------- -------------------- -------------------- --------------------
use jWysiwyg - 0.98