WYSIWYG editor question

cutesneakers · December 26th, 2004, 07:55 AM

Hi,
I'm making a backend for my friends to put in reviews on music,books and films on my site. (in PHP + MySQL).
I dont want them to put in HTML tags everytime they have to insert a linebreak.Or,for that matter,I want to create a very very BASIC browser based WYSIWYG HTML editor (a toned down version of what u guys have made for us to post our queries). I found some totally nice code. But it's exasperating;I dont want so many options.Can u guys guide me?

I have another doubt.
I want the people posting the reviews to upload a pic corresponding to the review to my database. How do I do that?

Snib · December 27th, 2004, 03:44 PM

Search the web for 'PHP file upload' to find tons of tutorials on how to upload a file.

If you just want to automatically replace linebreaks with <br/> you can use nl2br() function: http://www.php.net/nl2br

hth,

-Snib - http://www.snibworks.com
Where will you be in 100 years?

richard.york · December 28th, 2004, 09:30 AM

I personally use HTMLArea 3.0.

It's a fully-featured WYSIWYG that works with Mozilla and IE. It replaces the textarea fields you specify with WYSIWYWG editors. (You just place whatever HTML you want to edit in that textarea field, and the HTMLArea JS does the rest).

I've been on a project for about three months now, and this is what we use for content management for the non-technically inclined employees here.

It is fully customizable, in that you can define the toolbar buttons and what, if any, plugins you want to include. It's also pretty easy to write plugins for. You do need some familiarity with javascript in order to customize it though, but the customization is relatively easy, since it is designed with this in mind.

Just a few caveats: I've had to manually find and implement several bug fixes for certain things that ail both Mozilla and IE. Chances are if there's something wrong with it, or something you want to do with it, someone else has already posted the bug fix to the HTMLArea forums, in fact I found all the bug fixes I was looking for that way. But if you're motivated, it isn't that difficult to do. It's just time consuming and requires lots of patience.

http://www.htmlarea.com

Read the htmlarea.js file carefully, and you will get an idea of how customization is done as well as other aspects of the HTMLArea API, there are also working example files included with the package, that show how to implement it.

I do recommend using version 3 though, version 2 produces horrible HTML, only works in IE and has some not so obvious bugs that makes it difficult to work with. Even as beta software v3 is far more superior to v2.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

cutesneakers · December 28th, 2004, 12:32 PM

Hey Mr. York,
Thanks for the comprehensive information.It's really nice to know that you've understood my problem.
I want one small tool to let my friends edit and format the review content that they would be adding to my portfolio site. I've implemented a small editor using:

1. the execCommand
2. Javascript
3. <iframe>

There are functions to render text bold,italic,underline,etc.
Now i face another problem:
I have included the <iframe> inside a <form> </form> tag,because
there are other details,such as the name of the author,the name of the content reviewed,which have to be filled in.
Along with the review content, of course (which goes inside the <iframe></iframe>)
I can't figure out how to PASS this HTML formatted content to the form handling script.
Is there a way to collect this data in a normal PHP variable?
Just like I do for the other form elements???

Thank you Sir,for replying my query
But one problem lead to a bigger one.
I await your reply.
Thanks again.

richard.york · December 28th, 2004, 01:31 PM

You need to get the content of the iframe using JS. I recommend getting the innerHTML of the <body> element of the <iframe>, and placing that value in a hidden form field in the parent document.

Though there are some things to keep in mind.

1. You can't just place HTML in a hidden field, you'll first have to convert the HTML and special characters into entities, e.g. a double quote becomes ", a left angle bracket becomes <, an amphersand becomes &, etc. Then once passed to PHP you have to decode the HTML entities back into the original characters. This might not be a problem if you are populating the hidden field's value via Javascript and not hard-coding it through PHP, but it's something to keep in mind.

Again, I suggest just using HTMLArea, there are lots of things to consider when writing your own WYSIWYG, HTMLArea handles these things for you. It replaces textarea fields in forms, so whatever name you give a textarea that is replaced with HTMLArea is the name of the variable passed to PHP through POST when the form is submitted.

You might access the iframe DOM like this...

function getWYSIWYG()
{
    // set the name and id attributes of the <iframe> element, fill in that value here.
    var iframe = document.frames[0]; //offset of frame here

    // set the id attribute of the <body> element in the inline frame
    // reference that id here to get the HTML inside of the iframe.
    var wysiwyg_value = iframe.getElementById('body id name').innerHTML;

    // Place the value in a hidden field of the current form.
    document.getElementById('hidden field id').value = wysiwyg_value;

    // Submit the form.
    document.getElementById('form id').submit();
}

Then add an onclick handler for the submit button of the form.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

cutesneakers · January 2nd, 2005, 12:27 AM

Hey Mr.York,

I think you are right,I took your advice to heart and I have deicided to use HTMLarea. It looks exasperating to learn,but I guess it'll be worth the effort.

Thanks a lot.
regards.