Is possible to use FCKeditor rather than HTMLArea ?

http://www.fckeditor.net

Comments

Rick Cogley’s picture

Now it is...

Rick Cogley :: rick.cogley@esolia.co.jp
Tokyo, Japan

tulula’s picture

Just had to say that! HUGE positive difference! YAY Drupal!

Lisa

jasonwhat’s picture

I asked this over here, http://drupal.org/node/16215 but didn't really get an answer. Does work with image.module to upload images,or something to upload images or is that not supported wit fckeditor. The main reason I'd like a good wsiwyg is to handle images in posts. Htmlarea is a bear but can be made to work with uploading images for immediate use. Will fckeditor do the same, or does it have any kind of built in support for image uploads?

inteja’s picture

And very nice it is too! Easy Drupal install. Easy config. Cross-browser compatible. Works a treat. What more could you want!?

Brian.

--
Brian.

jasonwhat’s picture

This module is taking much longer to load than htmarea did. When I type, the display lags far behind my typing, which doesn't happen in htmlarea. Also, I find no instructions on setting up the system for image upload. Also it didn't work in IE at all, only Mozilla.

Rick Cogley’s picture

Funny, but I had the same sort of experience with HTMLarea. Doesn't make sense. HTMLArea was taking forever to load.

There are problems right now with the image upload. Take a look at the bug and support list for the module, and, please add any details you can.

Rick Cogley :: rick.cogley@esolia.co.jp
Tokyo, Japan

mdroste’s picture

In my opinion, the best Editor we can use with Drupal is:
XStandard
The editor generates clean XHTML Strict or 1.1, uses CSS for formatting, and ensures the clean separation of content from presentation.

And XStandard loads very fast.

--
mdwp*

rkendall’s picture

...but it's not Open Source.

So while it may be possible to make it easy to integrate XStandard with Drupal, it can never be included with it.

Just because it has 'better' functionality doesn't make it better for Drupal. This is an Open Source project.

russd-1’s picture

Excuse me, but I don't understand not why you say HTMLArea and FCKeditor is open source. In IE, editor is just JavaScript wrapper. 99% off work is by IE control MSHTML and I think this like really old FrontPage. MSHTML is NOT open source. Microsoft own MSHTML. Logic says put JavaScript wrapper around any editor, make JavaScript open source and then use in Drupal?

rkendall’s picture

Glad you asked :)

from http://www.opensource.org/

The basic idea behind open source is very simple: When programmers can read, redistribute, and modify the source code for a piece of software, the software evolves. People improve it, people adapt it, people fix bugs...

Maybe your new to Open Source Software, that's fine - but I would encourage you to find out a bit more.

About the MSHTML, that is something that some users have installed on their computers. They get it from Microsoft, it's part of Windows (more or less), and there is no reason why Open Source Software can't interface with (run on) it. However, nobody is trying to include it in there Open Source Software.

I use Mozilla Firefox which gives much better results than IE with HtmlArea and FCKeditor. I run it on Linux :)

russd-1’s picture

Thank you, I am new to Open Source. So, you say it is OK for Open Source software to interface with commercial software. I OK with this idea. Firefox is Open Source, it run on commercial Windows. I do not dispute Firefox is Open Source because most code is behind Firefox is open. However, most code behind HTMLArea and FCKEditor is closed (MSHTML control is closed and not even update in many years). If you make open the JavaScript customization code, how many lines of JavaScript code around MSHTML does it take before HTML editor considered Open Source?

rkendall’s picture

Unless someone writes a program in machine code most of the work is already done. Most of the work in a piece of software happens in the methods and functions of the programming language and in the libraries it has access to.

You are correct in recognising that most of these so-called html editors are simply small javascript wrappers for HTML parsing libraries, however without such things the libraries are of no practical use.

I'd say one line of code is enough for something to be called 'software' (you would be suprised at how much one line of perl code can do :)

I'd say the same for commercial and open source software.

P.S welcome to the open source world :)

mdroste’s picture

That's right.

I dont't want to include it in Drupal.
But if it is a Drupal module with XStandard as the editor, one can use it or not.

So - it's the best editor on my own server and websites and especially
for my customers.

With XStandard they cannot write wrong HTML Code.
They even can paste Word Documents in the editor and XStandard cleans it up.

This is not possible with other Editors and therefore some day a corporate website is full of terrific HTML Code.

--
mdwp*

yossarian’s picture

in firefox it's very slow. in IE it works great.

Since HTMLarea often does not work in IE and more people use IE than firefox, FCKeditor is better.

Carlos Miranda Levy’s picture

Tried it with Mozilla and it was really scary.
And when typing it would redraw the screen with every letter.

With Explorer loaded a little faster.

The toolbar images never showed, even though I did a standard installation.

--------
Con paciencia y calma,
sube un burro a una palma

AndrewE’s picture

I was having all sorts of issues with HTMLarea especially when it came to indents and spacing it was out of control!

I'd love to try FCKeditor, I uploaded the module but then when I enabled it I get this message:

Not Found
The requested URL /modules/fckeditor/lib//editor/fckeditor.html was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

In the installation notes there is something about uploading the distribution files, but what are distribution files? Perhaps that is what's lacking??

FrancisQ

The Green Room

rkendall’s picture

New kid on the block...
Simple, light, bloatfree, works, although still a bit rough round the edges.

www.themaninblue.com/experiment/widgEditor/ (see it work)

www.themaninblue.com/writing/perspective/2005/01/27/ (read about it)

I like the approach - just add a class to any textarea to get it replaced with the editor.

(The guy says he'll make it open source as well)

Dublin Drupaller’s picture

Hi RKendall

That editor is superb.

Ideal for drupal with users who aren't that HTML savvy.

How easy is it to install/integrate into Drupal?

Dub

___________________________________________________
A drupal user by luck and a dubliner by the grace of god.
Using Drupal to help build Artist & Band web communities.

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

rkendall’s picture

I'm sure you could get carried away writing a module (like the HTMLArea one), which is great the way it gives precise control of which textareas are used as editors.

Including the javascript in your template would probably be all you need to do. (textareas have a class 'textarea' that could be used to trigger the editor - or maybe a small change to the javascript would let you use the 'id' instead of the class?)

JohnG-1’s picture

I'm very new to drupal and PHP so a module sounds much less intimidating and more flexible than a custom theme!

I've had problems with HTMLarea so I'm looking to WidgEditor for a more fool-proof WYSIWIG editor.

Also I wondered if a custom theme could integrate the WidgEditor 'inline image' function with the upload.module and or image.module? This seems to be quite an issue with HTMLarea (thread: http://drupal.org/node/10271) - damned if I can get it to work! - whereas WidgEditor seems to work very well at Bill's ASPX installation : http://www.model-sites.com/admin/welcome.aspx.

Can a theme integrate modules easily?

I know nothing of writing ASP or PHP scripts so I envisage a lot of slow trial and error in creating a custom theme ... It would just be nice to know before I start if it will work when I'm finished?

ben_’s picture

www.model-sites.com is my site! :)

I looked at a number of rich text editors before I finally opted to incorporate widgeditor into my works. FCKEditor and TinyMCE were crap. I found themdifficult to implement, slower to load and quite hard to modify. And I'm not new to web developing.

WidgEditor is a developers dreams. It's incredibly easy to modify and work with, the code is nice and clean and very well written.

The image work that I did was *not* fun. It involved a fair amount of trial and error. I couldn't believe how hard it was identifying where the tags needed to go :S.

But of course, once I figured it out it was a piece of cake. The JavaScript I modified is available for your perusal at:
www.model-sites.com/admin/we_scripts/widgEditor.js

If you'd like to see it in action login to the demo account at http://www.model-sites.com/admin and enter demo/demo as the username password.

I've also started incorporating it in the commercial cms I author for clients' sites, and they *love* it.

Ben

JohnG-1’s picture

You seem to have it working a treat.

Looking through you js script I can't make out any reference to the upload module / image archive ... am I missing something?

I haven't tried to implement the js, but it looks like only half the story :)

Ben, please could you say something about how you installed it to work with the upload or image modules - whatever you used? surely that needs some php script?

ben_’s picture

The uploading is actually handled by the popup window. It's done using a bit of c# and wrapped with some asp.net. The language used is really irrelevant - the same functionality could be provided by php or cf or whatever. Don't ask me to convert it to php heh.

Anyway. The pop-up window has the uploading and image browsing code, and it's own block of javascript.

http://www.intensewd.com/temp/image_browser.txt is the asp.net files source. Most of the javascript is just for the image previewing, except for the insertimage function which is what actually returns the image to the editor.

The parameter "rawimage" it passes back is the raw url of the image - either a fully qualified domain or a relative domain if it's a local image.

I've pasted the function from the editor javascript which actually inserts the image in that file as well, so you can see more clearly what happens.

The process really is:
Pop-up is launched
Various code drives the functionality in the pop-up
Pop-up calls a function in the window.opener and closes itself.

The actual server-side code for the pop-up window you can view here:
http://www.intensewd.com/temp/image_browser.cs.txt

It basically just:
Presents a list of images in their folders in the ListBox (select field)
Allows uploads of jpg/tif/png/gif and then converts uploaded file to jpg.

Ben

jasonwhat’s picture

Where is this, is it a module tha t can be uploaded? Tips on getting it to work?

Also, Ben, how did you get those rollover menus working? Are they within the theme or in blocks? If in blocks, how?

ben_’s picture

The rollovers are really clever. As I've mentioned before, the guy who wrote WidgEditor is pretty skilled.

The buttons use an image for a background. When they hit a :hover state it repositions the background. The actual images are like:

|-----------|
| |
| up |
| |
|-----------|
| |
| over |
| |
|-----------|

jasonwhat’s picture

Any thoughts? plans? Is it already possible and I'm just misunderstanding?

ben_’s picture

I haven't actually seen drupal, and I only noticed it when i was searching for my site to see if it had all been spidered yet.

Drupal is really irrelevant to implementing widgEditor. All you actually need to do is download and unzip it, then go through your files looking for the textareas you want to make rich text editors. Set the css class and you're done!

If you want to do what I did and get fancy with the image stuff, the easiest thing to do would be get someone who can understand asp.net/c# and php to go through the source I posted up above somewhere, and convert it to php.

Greg Delisle’s picture

I ran into this same problem when I tried integrating widgeditor and now I'm seeing it on model-sites. I'm using Firefox 1.0 Macintosh.

When I edit, it works great, submit, everything's fine, but when the page returns and shows me what I've typed, it's there for a moment and then disappears. So I type the word "monkey" and make it bold and click save, it saves and the page reloads. Then I see the textarea with my word in bold tags, there's a blink and it's replaced with the editor and I see my word in actual boldface, and then there's another blink and the text is gone, blank editor. If I look in the html source, I can see the text in the textarea tag, but in the iframe there's nothing.

PS - works fine on IE6 PC.

ben_’s picture

Heh. Lucky you're the only one using a Mac, FF and my site then! I would guess it's some bug with FF (yes, FF has bugs too) on Mac. There's some other issues with Mozilla-based browsers and widgEditor, like the history / back button being screwed with because of the iframe.

I don't know what's causing the bug, but since it works on FF on PC i'm going to assume it's the Mac port of FF that's the problem! :)

Greg Delisle’s picture

Heh indeed -- I doubt I'm the only one using a Mac and Firefox on your site unless you're getting very little traffic!

I downloaded FF 1.0.2 and the problem only got worse; I've posted to the discussion over at themaninblue.com and haven't heard from anyone yet. By the way, it isn't just your site/my site, the same thing happens at themaninblue.

What concerns me about this is really the same thing that concerns me about all of these editors, the inability to turn them off and/or launch them on command. Widgeditor does have that nice "html source" button which is part of the way there.

ben_’s picture

I stand by my original "blame firefox" argument. Firefox on pc handles it fine. Mozilla on pc handles it fine. Safari has craptacular implementation of designMode, and so does firefox on mac. It's either the platform or the browser.

Really the situation kind of sucks for rich text editor functionality + macs, since MS cut Mac IE development off, Safari doesn't do it properly and .. it seems FF doesn't either.

At the end of the day, Mac users don't make up enough traffic (on my site at least) to sacrifice the functionality and ease of use that widgEditor provides, or really to even bother worrying much about putting together a workaround for. I might put a note saying that if you're on Safari or FF on a Mac then the editor may suck, and to please use IE hehe.

Since launching on 6 Feb this year:
38,036 hits
4,239 uniques
125 Mac OSX Users
44 Mac PowerPC Users
614 Netscape users

Daily traffic is still a little slow, but MSN and Yahoo have been extremely slow deep-spidering the site. I'm still getting ~100 uniques a day without much from MSN or Yahoo. Once they get around to spidering the entire site I'm sure that'll pick up.

I don't know which % of those users on macs are also ff users, but since 6.9% of uniques are on a Netscape-based browser, and 3.9% are Macs, some assumptions could be made, like 3.9% of 6% might be on Macs and using FF (10 mostly whole people!). That's assuming the mac users aren't particularly biased to FF and all Netscape users are really FF. Worst case scenario there's still only 3.9% of mac + ff users.

Now. The real bit of the post:

I don't see why widgEditor couldn't be turned off or launched on demand? There are two things that make widgEditor create an instance of itself:
a required css class
a javascript function

Using javascript you could set the css class, call the function, and that's that.

I actually took the automatic-instantiating of widgEditor out of the code I used because certain pages I wanted to do specific things to in onLoad, so on my pages widgEditor is initialised by just calling Run();.

So, to force it to be optional:

[input type="button" value="Use widgEditor!" onclick="document.getElementById('sometextarea').className = 'widgEditor'; Run();" /]
[input type="button" value="Don't use widgEditor" onclick="document.getElementById('sometextarea').className = ''; Run();" /]

You'd need to check that entered text is retained switching between them though, and maybe set designMode off and manually remove the iframe when turning widgEditor off (or any other editor really .. ).

Ben

Greg Delisle’s picture

Very nice suggestion, using an input to change the class. Thanks a bunch! I suppose the main reason I want it to work so bad on Mac FF is because that's what I use, but then again, I would rather type my code by hand. But allowing an on/off switch lets me use widgEditor because I know I can switch it off if I want. I'll give this a test and get back with the results.

ben_’s picture

How'd you go with it?

droopy’s picture

Has anyone got widgEditor working on Drupal? I got it running OK, having changed 'textarea' to 'widgEditor' in the form-textarea function output, but it won't post the data - it just returns 'true'. Can widgEditor be changed so it is triggered by the default 'textarea' class and not by 'widgEditor'?

ben_’s picture

function widgInit()
{
    if (document.designMode != null )
    {
        var theTextareas = document.getElementsByTagName("textarea");
        
        for (var i = 0; i < theTextareas.length; i++)
        {
            var theTextarea = theTextareas[i];
            
            //if (theTextarea.className.classExists("widgEditor"))
            //{
                if (theTextarea.id == "")
                {
                    theTextarea.id = theTextarea.name;
                }
                
                
                setTimeout("new widgEditor('" + theTextarea.id + "')", 500 * (i));
            //}
        }
    }
    else
    {
        return false;
    }
    
    return true;
}

The commented out lines are what forces the widgeditor to only apply itself to textareas with the class "widgEditor".

droopy’s picture

Still got the same problem. I commented out the three lines in widgEditor.js and added these two lines to the theme head:

$output .= " <link rel=\"stylesheet\" type=\"text/css\" href=\"widgEditor/css/widgEditor.css\" />\n";

$output .= "<script language=JavaScript src=widgEditor.js></script>\n";

But it still fails to post the content of the textarea. On preview, for example, it posts 'true' and returns this also in the text editor window. I've tried this with both IE and Firefox on Windows. If anyone has got it to work, can they let me know what they did?

Greg Delisle’s picture

I got around this problem by deleting the hidden form field that widgEditor appends to the bottom of the form. I commented out this piece:

/* An extra input to determine if the submitted data is from the normal textarea or from the widgEditor */
this.theExtraInput.type = "hidden";
this.theExtraInput.id = this.theTextarea.id + "WidgEditor";
this.theExtraInput.name = this.theTextarea.name + "WidgEditor";
this.theExtraInput.value = "true";

That last value is where the "true" is coming from. I'm not sure why the thing posts that instead of the contents of the editor, but deleting that extra input made it start posting the editor.

droopy’s picture

Thanks. That works, but it looks like you also need to comment out

this.theContainer.appendChild(this.theExtraInput);

a few lines later. Otherwise a small input box appears below the editor. Am I right?

Greg Delisle’s picture

Ah yes, I forgot that line. Sorry. That line left in writes a blank input (blank because this.theExtraInput doesn't exist anymore).

Dave Cohen’s picture

I got around this problem a different way, before I noticed your post. I replaced the "[" and "]" characters in theExtraInput.name with "-".

I also created a module to use widgEditor within Drupal. Anyone interested can download it here: http://www.yogadex.org/node/35

Now so easy anyone can do it.

-Dave

ben_’s picture

Paste any events you've got set on your submit button - onclick or whatever, and any onsubmit events on your form tag.

wtrenker’s picture

Yes, widgEditor is very nicely done and the code lends itself to relatively straightforword enhancements. For example, here's a link about another developer's enhancement to widgEditor that adds the ability to select an image from an image gallery:
http://www.themaninblue.com/writing/perspective/2005/01/27/#comment126

This image selection enhancement illustrates the integration of a simple richtext editor with the inner workings of the CMS it is used in. Now we're getting somewhere.

By the way, notice how his smilies fit in too.

Bill

joho’s picture

OK; so has anyone actually gotten widgEditor integrated into Drupal with support for browsing uploaded images for insertion?

__
~/www.joho.se; @ the end of a smile, there's a laugh and a 1/2

Carlos Miranda Levy’s picture

It took me a while to tame it, but it does work fine and is very useful.

Just don't make the same mistake I did enabling all the features and plugins.

And remember to modify your input formats to support the formatting options you're using in HTMLArea.

It still gets a little confused sometimes with line breaks and paragraphs, but it beats all other options out there, and runs fine in Mozilla.

Take your time and trim your HTMLArea options and it will work just fine. (I know... I uninstalled, wrote bad things about it in my blog in the past and then came back crawling and activated it again after missing it so much and was finally able to get it to work without all the previous struggle).

------------------------
Con paciencia y calma,
sube un burro a una palma

Rick Cogley’s picture

Hi Carlos - could you tell us about some of the specifics of how you got it working well? For example, if you have blogged about it would you kindly point us to the location?

I'd like to know more, if possible.

Rick Cogley :: rick.cogley@esolia.co.jp
Tokyo, Japan

dan90@drupal.org’s picture

yes, i was also a bit befuddled by htmlarea... i don't realy understand how you select which textareas use it... I was trying to enable it for my newbie users but not in the admin interface and finding it very confusing.

does anyone have tips about easily instructing drupal which textboxes should use htmlarea?

the textareas config is, well, strange. why does the list of textareas to enable and disable grow over time? do i have to access every textarea in my new site before i let the users at it in order that they all show up in the textareas config so that i have the correct fields enabled? is there a systematic way of doing this?
How do you choose the default?

danformation: http://www.octapod.org/dan

Carlos Miranda Levy’s picture

Deselect
[ ] Default for New Textareas at yoursite/admin/settings/htmlarea

Its the first option on the page and it says:
"Default setting which determines if a new textarea will be converted into a htmlarea"

------
Con paciencia y calma,
sube un burro a una palma

Carlos Miranda Levy’s picture

Will try and document it during the week and post a url here.
I'll first do it in spanish at http://www.edestino.org/drupal/modulos/htmlarea (right now there just says that it's working fine)

------
Con paciencia y calma,
sube un burro a una palma

Carlos Miranda Levy’s picture

One thing that I think really made a big difference and got my HTMLArea going smooth was removing all codes/tags on the Page Style option at the beginning of the admin/settings/htmlarea page. It looks like this reduced greatly HTMLArea's possiblities for confusing and simplified its on-screen formatting.

------
Con paciencia y calma,
sube un burro a una palma

AndrewE’s picture

I noticed that to jump one single line in htmlarea you have to use ctrl+Enter
is there any way to modify the coding so just pressing Enter jumps one space instead of the current 2 spaces?

Thanks

FrancisQ

The Green Room