5 Second Rich Edit Control Integration on Any Website

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

5 Second Rich Edit Control Integration on Any Website

Post by volomike »

Check this out. Create a folder on your desktop called test. Drop a text file in called editor.html and make it look like this:

Code: Select all

<html>
<head>
<title>TinyMCE Test</title>
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "formatselect,fontselect,fontsizeselect,bold,italic,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,outdent,indent,blockquote,|,link,image,hr,|,code,removeformat",
theme_advanced_buttons2: "",
   theme_advanced_buttons3: ""      
});
</script>
</head>
<body>
<!-- form sends content to moxiecode's demo page -->
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
    <textarea id="content" name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
    <input type="submit" value="Save" />
</form>
</body>
</html>
Now download TinyMCE from http:///moxiecode.com. Unzip it such that you find the jscripts folder inside. Open that up and it contains "tiny_mce". Copy that "tiny_mce" folder into your "test" folder on your desktop. Now view editor.html in your web browser. Click Save. Watch it post to the moxiecode.com website. You could just as easily have posted that to your own PHP pages. Now open editor.html in any text editor. Note how few lines of code were used. The way I've got it set up is that it takes any textarea on the given page and converts it into a rich editor control.

Cool factor is high, right?

P.S. If you don't like the default font size, just edit the file in the path:

tiny_mce/themes/advanced/skins/default/content.css

Change the first line where it says 10px into 11 or 12px, or any font size you want.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: 5 Second Rich Edit Control Integration on Any Website

Post by alex.barylski »

Every WYSIWYG I've used has been pretty easy to setup. TinyMCE is a nice editor though, for sure.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: 5 Second Rich Edit Control Integration on Any Website

Post by Kieran Huggins »

I've had good-ish experiences with wymeditor as well, but it still has a ways to go before it gets my official seal of approval ;-)
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: 5 Second Rich Edit Control Integration on Any Website

Post by Christopher »

I think I have to agree with volomike ... of all that I have tried, TinyMCE has been the easiest for me to to both install and configure. There are some nice pages in the documentation that show how all the options work with demos of how they look. Both app and docs seems to be written for programmers.
(#10850)
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: 5 Second Rich Edit Control Integration on Any Website

Post by onion2k »

Does TinyMCE come with a file manager these days? It didn't last time I looked at it, so if you needed users to be able to upload and insert images you were looking at major hacks.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: 5 Second Rich Edit Control Integration on Any Website

Post by volomike »

onion2k wrote:Does TinyMCE come with a file manager these days? It didn't last time I looked at it, so if you needed users to be able to upload and insert images you were looking at major hacks.
Yeah, that's something I'm going to have to do. My only options are to create a "Media Gallery" thing as a separate part of the app, and then I can switch the URL field with a popdown listbox of items from the media gallery. But that's kind of tacky. It would be better to do a file upload technique, but like you said is a bit of work.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: 5 Second Rich Edit Control Integration on Any Website

Post by onion2k »

I think the last time we did this we used something called TinyFCK ... it's TinyMCE with the file manager from FCKEditor hacked on. It works but it's a pain to set up (relatively speaking... much easier than writing your own).
Post Reply