Integrating a WYSIWYG Editor and databases

Radon3k

I want to install a WYSIWYG editor onto a form on my website. I can get everything working except the database part. I want to be able to have the formatted text be displayed as it should be but instead it just appears as normal text. What do I need to do to make sure this works? It's just a standard textarea form that I'm using. The WYSIWYG editor I'm using is openWYSIWYG. I'm not sure if I need to use htmlspecialchars() or something like that but any advice would be appreciated. Thanks! 🙂

leatherback

You might want to check whether the formatted text is actually arriving at your database handling routines with HTML in them. (Print_r($_POST) will give you an excellent idea). Then check what is sitting in your database, and then what is retrieved. That will give you an idea in which step the formatting is lost.

Radon3k

When the form is submitted the text is entered into the database and when it is displayed it is displayed as normal text. Looking at the database via phpMyAdmin I don't see any kind of HTML formatting things in the text. Is that what you meant?

leatherback

Yes.
Do you do some processing to your data before inserting it into the database? This can easily be stripping out your HTML..
Or is the data coming from the form without HTML formatting?

Radon3k

From the looks of it, it has no HTML formatting. I'm not sure what type of formatting to use or where to use it. I suppose if I got that figured out that may solve the problem. Any ideas?

leatherback

I am a bit confused.. I thought you have an editor, which you use to create the code? So if the editor doesn't create the HTML formatting, something must be going wrong there. If you loko at the HTML interface side of openwysiyg, do you see HTML formatting there?

Radon3k

To integrate the WYSIWYG editor onto the page you add a small JavaScript which calls on the JavaScript file which is where the code for the editor is stored.

I was browsing the openWYSIWYG forums looking for an answer to this and the closest answer I could find was this post here. I'm assuming the second poster meant that you needed to use HTML formatting? If so, what would that be and where would I put it?

leatherback

Dear Radon,

Lets start from the beginning:
1) Do you see the editor when you open the page with the editor on it (So, the buttons for font, size etcetc) or do you see a plain text-input box?
2) Have you create a form & form action to submit the text-editor content to the processing script?
3) Do you get the data from the POST array.

If either of these is "No", we'll start from there.

Radon3k

1.) Yes
2.) Yes
3.) I get plain text, not the formatted text as it should be.

leatherback

Hm..
If you do not get HTML formatted data in your posted variables, but you do get the editor working fine, and you use a form to get the data across to the processing script.. I think it must be some setting in the editor itself (e.g., a list of allowable HTML and to-be-stripped elements), which is not configured properly. I noticed on their website that they have a forum too. They probably can pinpoint the problem much more quickly, and I think it prudent to post your question there. Without actually downloading the package it will be very dificult to figure this one out. (ANd nope. I will not downlaod / install it). If you fail to get it working: I use tinyMCE, by moxiecode. They provide several configuration & installation examples..

mrfritz379

Here's my guess w/o seeing the code.
You have a textarea form field that is being submitted to the php processor, but the WYSIWYG editor is probably not using the textarea field at all. More often than not those editors use an iframe or some other element to contain the html code as you write it.
So what you need to do is make sure that there is some kind of javascript that will assign the value of the WYSIWYG editor to the textarea, including the html. check the onSubmit function- it should go something along the lines of

var frm = document.getElementById('form');       //get the form
var ed = document.getElementById('wysiwyg');  //the editor node
var txt = document.getElementById('textarea_field');   //the textarea field

var frm_text = ed.innerHTML.replace(/</, '&lt');     //html encode the wysiwyg text
txt.value = frm_text.replace(/>/, '&gt');               

frm.submit();

leatherback

mrfritz379 wrote:
Here's my guess w/o seeing the code.
You have a textarea form field that is being submitted to the php processor, but the WYSIWYG editor is probably not using the textarea field at all. More often than not those editors use an iframe or some other element to contain the html code as you write it.
So what you need to do is make sure that there is some kind of javascript that will assign the value of the WYSIWYG editor to the textarea, including the html. check the onSubmit function- it should go something along the lines of
var frm = document.getElementById('form');       //get the form
var ed = document.getElementById('wysiwyg');  //the editor node
var txt = document.getElementById('textarea_field');   //the textarea field

var frm_text = ed.innerHTML.replace(/</, '&lt');     //html encode the wysiwyg text
txt.value = frm_text.replace(/>/, '&gt');               

frm.submit();

Sorry, but I highly doubt it, this is what the siteadmin og the wysiwyg editor has to say:

Hi DBloecher,

Actually it's passing the changes made to the wysiwyg back to the textarea (the textarea the WYSIWYG originally replaced).

So when you submit your form, just pass the values of your textarea field to your PHP script.

I hope this makes sense. Let me know if you have any other questions.

Cheers,
Steve

openwebware.com

mrfritz379

leatherback wrote:
Sorry, but I highly doubt it, this is what the siteadmin og the wysiwyg editor has to say:

Hi DBloecher,

Actually it's passing the changes made to the wysiwyg back to the textarea (the textarea the WYSIWYG originally replaced).

So when you submit your form, just pass the values of your textarea field to your PHP script.

I hope this makes sense. Let me know if you have any other questions.

Cheers,
Steve
openwebware.com
---

That's what I said to make sure it is doing.

mrfritz379 wrote:
make sure that there is some kind of javascript that will assign the value of the WYSIWYG editor to the textarea, including the html.

It seems that the problem is that the editor is passing the text value of the editor w/o the markup. There should be a javascript function assigned to the save/submit button in the form. Check the javascript to be sure that it is retrieving the innerHTML of the editor, not just the text value.