Gossamer Forum: Products: Gossamer Links: Development, Plugins and Globals: Trying to get WYSIWYG editor to work with my description field

Sep 11, 2011, 2:31 PM

mongoman

Novice (17 posts)

Sep 11, 2011, 2:31 PM

Post #1 of 4

Shortcut

Trying to get WYSIWYG editor to work with my description field

Can anybody help me set up a Wysiwyg editor for my description field in the admin browser section, browser_link_add_form.html template?

The way these things work (tinymce or openwysiwyg) is really placing a Javascript call in the header section,
such as:

<script language="JavaScript" type="text/javascript" src="/your_directory_path/openwysiwyg/wysiwyg.js"></script>

Problem being, as soon as I add this to my browser_link_add_form.html template, the system dies on me. This is what my add link page looks like as soon as the javascript call is in there:

# This file is a compiled version of a template that can be run much faster # than reparsing the file, yet accomplishes the same thing. You should not # attempt to modify this file as any changes you make would be lost as soon as # the original template file is modified. # Editor: vim:syn=perl # Generated: Sun Sep 11 23:08:37 2011, using GT::Template::Parser v2.159 local $^W; { files => [['browser_link_add_form.html','/www/htdocs/w00db062/domains/star/cgi-bin/admin/templates/admin/../browser/browser_link_add_form.html',1153437778,1134]], parser_version => 2.170, code => \>::Template::parsed_template }; sub GT::Template::parsed_template { local $^W; # Get rid of warnings. This won't work for Perl 5.6's -W switch my $self = shift; my $return = ''; my $tags = $self->vars; my $escape = $self->{opt}->{escape}; my $strict = $self->{opt}->{strict}; my ($tmp, $tmp2, $tmp3); $return .= q{Add Link to: }; $return .= $tmp if defined($tmp = $self->_get_var(q{Name}, { escape => $escape, strict => $strict })); $return .= q{

Add Link to: }; $return .= $tmp if defined($tmp = $self->_get_var(q{Name}, { escape => $escape, strict => $strict })); $return .= q{

}; $return .= $tmp if defined($tmp = $self->_get_var(q{navbar}, { escape => $escape, strict => $strict })); $return .= q{

_get_var(q{enctype}, { escape => $escape, strict => $strict })); $return .= q{action="}; if ($self->_get_var(q{is_admin}, { escape => 0, strict => 0, merge => 0 })) { $return .= q{admin.cgi}; } else { $return .= $tmp if defined($tmp = $self->_get_var(q{db_cgi_url}, { escape => $escape, strict => $strict })); $return .= q{/browser.cgi}; } $return .= q{" method="POST" onSubmit="parent.CAN_UPDATE = 1;"> }; $return .= $tmp if defined($tmp = $self->_get_var(q{form}, { escape => $escape, strict => $strict })); $return .= q{

}; return \$return; }

So I'm sure I'm messing something up here.

And yes, I realize the full extent of the irony composing this post in a WYSIWYG editor EXACLTY like the one I would like to have for my link description field in Links 3.3.0!

Any help is greatly appreciated.

Sep 12, 2011, 12:25 AM

Andy

Veteran / Moderator (18441 posts)

Sep 12, 2011, 12:25 AM

Post #2 of 4

Shortcut

Re: [mongoman] Trying to get WYSIWYG editor to work with my description field In reply to

Hi,

I would use CLEditor: http://premiumsoftware.net/cleditor/

Code:
 <link rel="stylesheet" type="text/css" href="/cleditor/jquery.cleditor.css" /> 
    <script type="text/javascript" src="/jquery.1.4.4.js"></script> 
    <script type="text/javascript" src="/cleditor/jquery.cleditor.min.js"></script> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
        $("textarea[name=Article_Content]").cleditor( { width: 700, height: 400 } );  

      }); 
    </script>

Then obviously make sure the file are uploaded to that location. I think thats all I did last time to get it working in there (trying to get them working in the Database > Links > Add/Modify function is much harder - as its all non-template based)

Hope that helps

Cheers

Andy (mod)
andy@ultranerds.co.uk

Sep 14, 2011, 7:45 PM

mongoman

Novice (17 posts)

Sep 14, 2011, 7:45 PM

Post #3 of 4

Shortcut

Re: [Andy] Trying to get WYSIWYG editor to work with my description field In reply to

Andy,

Thank's - I'll try that right now. I tried the demo on the CLeditor website - and not only does it exactly what I need (retaining the word format) - I could even copy the text fragment back into word and still get the same formatting and numbering. That's amazing. All I need is to get it to work now.

Also, it's a pity that I can't fit this into the admin interface with the Browse Section - that would be even better.

The only thing that's left for me to figure out is how to get CLeditor pulled up on the HTML page where the users would access my text area....

Thanks for the hint!

Sep 18, 2011, 3:17 AM

Clint

User (387 posts)

Sep 18, 2011, 3:17 AM

Post #4 of 4

Shortcut

Re: [mongoman] Trying to get WYSIWYG editor to work with my description field In reply to

Hi Mongoman:

I imagine you want to use the editor to manage your verifications, additions and modifications etc. I use tinymce and this works well. I actually use an older version in my admin interface than I am using on the main site because the 'ask' feature was removed from later versions.

You don't need to edit any of the browser_* templates.

You need to edit the following admin templates (place these in templates/admin/local:

tools_validate.html
tools_validate_changes.html
tools_validate_reviews.html

I put the following in the <head> section:

Code:
<script type="text/javascript" src="/path/to/tinymce/tiny_mce_gzip.js[/url]"></script> 
<script type="text/javascript" src="/path/to/tinymce/tinymce_config.js[/url]"></script>

As you can see I use the gzip module to load tinymce - as it loads faster. I also keep all my configuration settings in the config.js file - which makes it easier than modifying multiple files.

You also need to edit the following file:-

In the admin/GT/SQL directory:-

Admin.pm - make the following changes.

Code:
<head> 
<title>$title: $self->{record}</title> 

<script type="text/javascript" src="/path/to/tinymce/tiny_mce_gzip.js"></script> 
<script type="text/javascript" src="/path/to/tinymce/tinymce_config.js"></script> 

</head>~;return qq~\n<body $BODY>\n~; 
}

Don't forget to make backups of your original files. I also keep a copy of the amended file - in particular the PM file - in case it gets changed during updates.

I think this is all the files I needed to change - but I first did this a couple of years ago ... so I may have missed one.

Regards,

Clint.
--------------------------
http://AffiliatesDirectory.com
The Affiliate Programs Directory