Making a WYSIWYG Editor

[excelsior9]

Ok, I'm about to go insane with this one.

I'm developing a website where users can upload poetry and creative writing. I want to have a form where they can type in their poem and the line breaks and paragraph breaks are recognised by a wysiwyg editor. I've basically got this far on my own - but there's a massive problem which I can't find an answer to anywhere!

Basically, the editor uses an iframe where users type text and format it - but how do you get the resulting text with tags to be delivere when you click 'submit'?? It works fine with a textarea, but the iframe seems to be invisible to the PHP. I just want it to take whatever the user typed in, with the appropriate tags, and put it in a database.

Please help, I'm really stumped. Am much more accustomed to PHP and MySQL than Javascript.

 

[BabyJeffy]

Look at using the likes of FCKEditor or TinyMCE - both these should take care of all this for you.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[trollacious]

Why not use one of the free HTML Rich Text editors on your page, and skip the iframe?

Lee

 

[excelsior9]

*groan*

I've had a look at both those editors - but they don't help me because A) I only want to provide users with a few options for formatting text (basically bold, italics and underline as well as the line breaks - that's it) and B) they don't explain how to solve my very specific problem of passing data from an iframe to a database.

Does no-one know how to do this????

 

[trollacious]

Why are you using an iframe? If you want to do that, you should put the form and submit button in the iframe rather than in the parent window.

Lee

 

[excelsior9]

I'm using an iframe because I thought that's the only way you could affect the text with javascript - it wouldn't work with a normal textarea when I tried it. Basically, all I'm looking for is a way to take what's typed into the iframe to and send it to the database... is that possible?

here is the page I'm working on:

http://www.littleheadlines.com/etcetera/uploadpoem.php

 

[countdrak]

I use FCKEditor and its really easy to give the user the buttons they want.

Go to fckeditor.js file and you can configure the buttons you want to display. Its really easy and will save you a ton of time.

 

[trollacious]

Do a Google search for HTML Rich Text editor.

Lee

 

[j4606]

Hi there, the suggestions posted are nothing to groan at.

I've had a look at both those editors - but they don't help me because A) I only want to provide users with a few options for formatting text (basically bold, italics and underline as well as the line breaks - that's it)

You can edit tinyMCE to only allow a few options easily by passing in arguments to it's init function.
example

tinyMCE.init({
relative_urls:false,
elements:'elm1',
[COLOR=red]theme_advanced_fonts:'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace',
theme_advanced_toolbar_align:'left',
theme_advanced_buttons4:'',
theme_advanced_buttons1:'spellchecker,bold,italic,
theme_advanced_buttons2:'pasteword,bullist,numlist,outdent,indent,undo,redo,preview',
theme_advanced_buttons3:'',[/color]
encoding:'xml',
plugins:'-spellchecker,
mode:'exact',
language:'en'
});

and B) they don't explain how to solve my very specific problem of passing data from an iframe to a
database.

TinyMCE replaces a text area with an iframe to work it's magic. It's doing exactly what your are asking for. Getting data from tinymce to a db is simple. Its as easy as subimitting a form and accessing it's value. In C# for example I a have control linked to my text box and just use the id of the control to reference the value

tinyMCETextarea.Value;

. I'm sure the other editors mentioned all have the functionality you asked for.

 

[excelsior9]

Getting data from tinymce to a db is simple. Its as easy as subimitting a form and accessing it's value. In C# for example I a have control linked to my text box and just use the id of the control to reference the value"

Ok, but however 'simple' it is, I don't know how to do it - that's why I'm asking. I have tried the method I've used before - <form action="handleform.php" method="post"> and a corresponding $data=REQUEST_['data'] on the handleform.php page - but it simply will not collect any data from the iframe.

That's what I'm having trouble with - the iframe has an id and a name value, but it won't carry that across to handleform.php!!

(Also, as you can see from the link I posted, writing an editor with just a few formatting buttons isn't really the main issue anymore - I was just saying that that's why I didn't need FCKEditor)

 

[trollacious]

But you're talking about reinventing the wheel. There are some pretty simple HTML Rich Text editors that you can subnmit to your PHP page in a form just like any other form.

Lee

 

[trollacious]

In the time you've gone back and forth here with insisiting on using an iframe, you could have used one of the ideas you've been given and have the page up and working.

Lee

 

[excelsior9]

But I have said that I already downloaded FCKEditor and had a look at the code, but couldn't work out the answer I wanted!!!

Even if I installed FCKEditor I don't know how to make it pass the information (from its own iframe...) to a PHP handleform script. I couldn't work it out from the package. So if it makes anyone feel any better about helping me they can view this as a difficulty with installing a ready-made HTML Editor.

I'm sorry if this shows up ignorance on my part, but I'm having real trouble here with what must be a simple solution - if anyone could just humour me and tell me how to make the page I've already started to script (

http://www.littleheadlines.com/etcetera/uploadpoem.php)

work (surely this must only require a few lines of code - that's all I'm asking for).

 

[BabyJeffy]

Regarding your difficulty in installing the FCKEditor - I suggest you take a look at these links:

- Installation Instructions (specifically note the suggestion to look at the _samples directory. For PHP examples look in the php directory).

- The PHP integration documentation (from the FCKEditor documentation guide).

If you can't get the sample files working, then you have other things to worry about.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[trollacious]

I would recommend AGAIN getting rid of the iframe, and would guess that is the root of the problems you have.

Lee

 

[excelsior9]

Ok, getting rid of the iframe, sounds great in principle - but have you looked at the page I'm working on? How else would I get that formatting to work without an iframe??? Like I said, it doesn't work with a normal textarea.

 

[starsky51]

The example at

http://wiki.moxiecode.com/examples/tinymce/installation_example_00.php

looks very similar to your current setup.

 

[excelsior9]

Thanks for that starsky but unfortunately it does nothing to alleviate the problem I'm having

 

[tsuji]

Can you summarily re-state the problem - the problem corresponding to the page, what functions and what not - nothing else and re-state brief the page structure relevant to the page? It is hard to make a sense out of those exchanges!

[1] A brief look at the page show you name the submit button "submit". At least you can immediately name it something else. That is a "sure way" but not necessarily to get yourself into trouble.

[2] Are you debugging the functionality associatd to the iframe named "iView" or that part of the script? If so, what is it a form within the iframe? The form or anything should be in the src php page, I would say.

 

[trollacious]

Why is this

<table id="Table_01" width="961" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7">

on your page above the opening <html> tag?

Lee