Gossamer Forum
Home : Products : Gossamer Links : Development, Plugins and Globals :

How To :: Integrate HTML Editor into Text Areas for Public & Admin View

Quote Reply
How To :: Integrate HTML Editor into Text Areas for Public & Admin View

I noticed there are many users wanting to setup this feature within the GLinks Interface for both Admin and Public view. I have been successful in setting up such feature with very little effort and thought it could be useful to others too.

Demo on Live Site :
http://www.webhostingkit.com/a/cgi/page.cgi?p=addarticle (it shows different form, if user if logged in, however both are using same HTML Editor) to see the working example of this on our website.

In above example, we have very few functions, as we only allow limited formatting in the information being submitted.

Demo on Developers Site (Tiny MCE by MoxieCode)
http://tinymce.moxiecode.com/example_full.php?example=true

You will notice an HTML editor output with all-most all the options one can think of, along with allowing users to change the HTML Text Area size for their input.

Install Option 1
One way would be to simply download the zip file from TinyMCE website and follow the read me file. It took me less than 5 minutes to get everything working.

Install Option 2
If someone just want to get to the point and wants to know about the steps I took, here is the quick rundown:

  1. Upload TinyMCE in a sub-directory outside of cgi-bin
  2. Open the web page in your favorite editor for which you wish to have HTML Editor for text area. In that page add below lines of tag in between <head> .. </head> (Simply make sure to change the URL to exact location on your web site.)

    <script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
    tinyMCE.init({
    mode : "textareas"
    });
    </script>
  3. All Done.. Yeah it is that simple. Smile

Changing Formatting Options
Below are few already available options from MoxieCode website, you can use them or use below link to learn about configuration options, which you can use to create formatting of your own choice.

  1. Simple Theme: http://wiki.moxiecode.com/examples/installation_example_00.html
  2. Advanced Theme: http://wiki.moxiecode.com/...tion_example_01.html
  3. Advanced Theme Full: http://wiki.moxiecode.com/...tion_example_02.html
  4. Advanced Theme Simplified: http://wiki.moxiecode.com/...tion_example_03.html

To learn more about Configuration Options you can visit : http://wiki.moxiecode.com/index.php/TinyMCE:Configuration

Hope this information is as helpful to all of you, as it has been to me.

P.S. You can also setup different formatting options for different forms (both GLinks and Non Glinks Forms). Just change the header javascript for that pages.



Vishal
-------------------------------------------------------
Quote Reply
Re: [SWDevil.Com] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
How wonderful of you to share this with everyone, I am stopping everything today to get this added.

Thank you so very much :D
SandraR


Sandra Roussel
Chonsa Group Design - Fresh Start Housing
Quote Reply
Re: [SWDevil.Com] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
Can you provide an example of how you are adding this to the include_form.html template or are you using this as an external form?

Thanks
SandraR


Sandra Roussel
Chonsa Group Design - Fresh Start Housing
Quote Reply
Re: [SandraR] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
  1. Open up add.html file and input the javascript (any from option 1 to 4 or configured by you) between the head ../head tag.
  2. Save and upload to its location.

Hope this helps :)

Vishal
-------------------------------------------------------

Last edited by:

SWDevil.Com: Jan 27, 2007, 1:28 PM
Quote Reply
Re: [SWDevil.Com] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
OH MY gosh - this is absolutely awesome!

Thanks so much
SandraR


Sandra Roussel
Chonsa Group Design - Fresh Start Housing
Quote Reply
Re: [SandraR] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
Thank you!!
I am going to try this today.
Quote Reply
Re: [SWDevil.Com] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
Thanks SWDevil! Very cool Smile
Quote Reply
Re: [SWDevil.Com] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
Greetings All!

Does anyone have any ideas how this can be incorporated into the Add or Modify (from Admin)? I've successfully incorporated it into the validate new and modified listings, but it would be very handy to be able to also add it for when I manually add or need to modify a listing.

I don't believe it's in a template, but most likely in a .pm file - I just can't work out which one ....

Regards,


Clint.
--------------------------
http://AffiliatesDirectory.com
The Affiliate Programs Directory
Quote Reply
Re: [Clint] How To :: Integrate HTML Editor into Text Areas for Public & Admin View In reply to
Hi Clint,

You can do that too. However for that you will have to modify admin temples. I don't remember exactly which are they, but when I was doing the testing, I think I had to modify about 3 to 5 pages only and even on admin side this wysiwyg option was available. As a matter of fact, I was able to have even more advanced wysiwyg editor for admin to allow even better formatting.

Hope this helps

Vishal
-------------------------------------------------------