How could I add html WYSIWYG editor in Gallery2?

huangxiaohua

Joined: 2006-08-12
Posts: 2
Posted: Sun, 2006-08-13 07:40

The default editor in G2 is too simple and not user friendly, how could I integrate a html WYSIWYG editor like tinyMCE in Gallery2?

Thanks
Bill

Login or register to post comments
Milan_Knizek

Joined: 2006-09-03
Posts: 2
Posted: Thu, 2006-09-07 18:23

I would be interested in this, too. I am trying to setup drupal + g2 and it would be fine if users can use the same interface for comments in drupal and the embedded g2.

Login or register to post comments
sergii

Joined: 2006-10-29
Posts: 16
Posted: Sat, 2006-11-04 12:38

Integrating TinyMCE is pretty trivial.
MarkupBar.tpl can be modified to provide a drop-in replacement to bbcode markup buttons.

Drop the attached file into modules/core/templates/local/MarkupBar.tpl
and TinyMCE will be used for all input elements that were using bbcode buttons before.
(assuming the editor is in /tinymce/jscripts/tiny_mce/tiny_mce.js)

You need to to configure the Gallery to use bbcode markup.

You won't be able to use advanced TinyMCE features, of course - you'll still be limited to bbcode markup.

I didn't bother to create a style for TinyMCE to mimick old interface
(buttons looking as buttons, editor looking like input/textarea)

AttachmentSize
MarkupBar.tpl_.txt3.74 KB
Login or register to post comments
james789

Joined: 2005-11-10
Posts: 96
Posted: Sat, 2007-01-20 13:51

Sergii, this is brilliant, thanks. I got it set up and working very quickly and without any problems. But I didn't really want TinyMCE on the Subject input element (in fact I don't really think I want a subject at all) so I removed the lines

{include file="gallery:modules/core/templates/MarkupBar.tpl" viewL10domain="modules_core"
element="comment"}

from the Subject part of AddComment.tpl

The trouble now is that it's stopped showing up anywhere on the forms.

See e.g. http://www.whatsthatpicture.com/?q=gallery&g2_itemId=2467

In fact I've just put it back in, deleted the template cache, and it's still not there!

Initially I was getting error message that "tinymce/jscripts/tiny_mce/tiny_mce.js" could not be found, but I've changed your MarkupBar.tpl code to point specifically to the location of this .js in my Drupal installation. But rather oddly, when I am testing I am now not getting this message, but I've just seen it again in the logs from someone browsing my site anonymously.

Does any of that make sense, or have I done something daft?!

On a final note, is there any way of getting a g2image button into the TinyMCE on image comments, in the same way it's working on e.g. Drupal forum comments - see http://www.whatsthatpicture.com/?q=node/30

Thanks, James

Login or register to post comments
sergii

Joined: 2006-10-29
Posts: 16
Posted: Sun, 2007-01-21 20:49

You quoted above the lines that would add TinyMCE (or BBCode toolbar) to comment textarea - note element="comment". You need to remove the lines:

Quote:
{include file="gallery:modules/core/templates/MarkupBar.tpl" viewL10domain="modules_core"
element="subject" firstMarkupBar=true}

Actually, I guess you did that (and simply pasted wrong lines in your posting), otherwise you wouldn't get the effect you've got (stopped showing up anywhere on the forms). See, the first include of MarkupBar.tpl must have firstMarkupBar=true.

Don't ask me why Gallery has this stupid requirement, and why MarkupBar.tpl cannot figure out automatically when it's included for the first time. This is the way it is. So when removing the first {include} don't forget to add firstMarkupBar=true to the second one (new first).

Error message - no idea, I don't have drupal installed.
g2image button - basically the same answer (no drupal here), but if you use TinyMCE from Drupal, and it has some tweaks as compared to the original TinyMCE, in particular, this g2image button, then all you need to do is to edit MarkupBar.tpl, the line with theme_advanced_buttons1 and specify what buttons you want to see.

Login or register to post comments
james789

Joined: 2005-11-10
Posts: 96
Posted: Thu, 2007-01-25 14:53

Sergii, you're a genius! It's so obvious once it is pointed out to you, but as someone who can't even cut & paste the right bit of code into a comment ;-) I'd never have spotted it!

I have now fixed the comments form to remove the subject input box but have TinyMCE on the main comment box. I'll take a look at getting the g2image feature into MarkupBar.tpl when I get a moment.

Thanks again, James

Login or register to post comments
james789

Joined: 2005-11-10
Posts: 96
Posted: Thu, 2007-01-25 23:02

I have been looking at getting the g2image button into image comments.

In drupla to get the button to appear on page/forum comments I had to add the lines

Quote:
$plugins['g2image'] = array();
$plugins['g2image']['theme_advanced_buttons2'] = array('g2image');

to a plugin php config file.

I have tried the following mod of sergii's code

Quote:
theme_advanced_buttons1 : "bold,italic,separator,bullist,indent,outdent,separator,link,unlink,separator,image,separator,charmap",
theme_advanced_buttons2 : "g2image",
theme_advanced_buttons3 : "",

and variations thereof, but all I get is an extra small grey area underneath the existing TinyMCE buttons :-)

Login or register to post comments
james789

Joined: 2005-11-10
Posts: 96
Posted: Tue, 2007-01-30 21:54

I've got a problem with formatting of 'special' characters in album/image info and comments - see e.g.

http://www.whatsthatpicture.com/?q=gallery&g2_view=comment.ShowAllComments
http://www.whatsthatpicture.com/?q=gallery&g2_itemId=1975

I can't be certain, but I have a hunch it only started after I installed this TinyMCE patch/fix.

I have also been having other problems, such as form elements that are pre-filled with a <br /> tag.

That said, I am also having some layout problems with TinyMCE in Drupal, which this gallery is embedded in.

Login or register to post comments
sergii

Joined: 2006-10-29
Posts: 16
Posted: Wed, 2007-01-31 07:42

1. Closing </br> tag - I didn't see it before, not in mozilla anyway, so my html-to-bcode conversaion function doesn't replace it
(of course there is html-to-bbcode conversion - TinyMCE is HTML editor :).

Try to change in valid_elements line br/p to +br/p (which according to TimyMCE docs mean "Makes the element open if no child nodes exists". If that won't help, then add to gmHtmlToBbcode function something like

Quote:
// remove </br>
html=html.replace(/<\/ *br>/gi, '');

2. Upper case <BR> and entities, like &#39; - ok, looks like I fixed in my local copy this after uploading the file here :)

I'll attach a corrected file.

AttachmentSize
MarkupBar.tpl_.txt3.59 KB
Login or register to post comments
james789

Joined: 2005-11-10
Posts: 96
Posted: Thu, 2007-02-01 12:55

Thanks Sergii. The revised code has fixed the special characters issue. As for the <br /> tags etc I'm not sure as it was difficult to replicate in the first place, but I'll keep my eyes open. It was a far more minor issue anyway. James

Login or register to post comments