Jen Lampton's talk; thoughts on editor-related features

gwideman's picture

At SandCamp 2012, I attended Jen Lampton's excellent talk on WYSIWYG editors for Drupal. She's clearly looked at this topic deeply over several years and Drupal versions, and has considerable and valuable experience configuring, deploying and supporting WYSIWYG and related features like image handling.

After digesting the session I realized there were a few additional WYSIWYG features about which I'd like to hear Jen's thoughts.

Despite having presented on this topic numerous times, she seems to have escaped being video'ed, though outline notes from the recent presentations are available, for example .

Anyhow, she's kindly offered to comment on my additional topics, so long as the discussion can benefit others as well... so here's the invitation.

  1. Autosave: -- ajax to periodically save the text being edited to the server. Is there a module that helps with that, or news on progress? [previous thread]

  2. Jen spoke of favoring TinyMCE over CKEditor for use with the WYSIWYG API. I'd like to hear more about that, so as to factor that in when assessing other editor features.

  3. Image zoom-on-mouseover capability. I often encounter the situation where I need to include a detailed image (such as a screenshot) which needs to be large to be fully readable, but which looks goofy (or just plain doesn't fit) if rendered at that size in the middle of the surrounding text. One solution is to have the image rendered smaller, but then zoom on mouse-over (CSS+javascript etc etc). This is primarily an output issue, but intersects with editing because you want the image insertion feature and backend image handling to prepare and insert the image appropriately.

OK... let's see what Jen has to say!

-- Graham


Hi Graham

jenlampton's picture

I haven't completely avoided being recorded, they got me at DrupalCamp Austin, and I've posted the video on my site incase anyone else is looking for a video also. (They also got the first few minutes of my presentation in Paris too, but this information is very out of date!)

To answer your questions:

1) Autosave isn't so much a WYSIWYG problem as a Drupal problem, and there's a module for that I haven't used it yet myself, but I'd start here.

2) My preference for TinyMCE is personal. I like it for several reasons: First, TinyMCE has a mature, thriving Open Source community of its own. Every time I've needed a plugin for something that wasn't already included (for example: a youtube button, spellchecking, or HTML templates) it's always already existed for the TinyMCE editor. TinyMCE also has really great documentation, something our community might learn something from :) WordPress also uses the TinyMCE Editor, and we can't ignore the amount of work that community is putting into the development and improvement of TinyMCE as well. I expect faster progress of TinyMCE because lots of people are using it, and lots of developers are working on it. There also seem to be a lot more plugins that are already included for TinyMCE. (You have access to these via the list on the WYSIWYG profile configuration screen.) The TinyMCE editor also integrates really well with the WYSIWYG module, I've run into problems using CKEditor when I needed to do things like allow HTML comments, but for TinyMCE that's as easy as checking a checkbox. My clients also prefer using the TinyMCE editor. No WYSIWYG editor is going to make creating tables in your content easy, but I find it less painful with TinyMCE than with others. One of my favorite modules for use with WYSIWYG is the caption_filter module, and what that module does (allow you to float the caption right or left along with the image) is technically impossible using the CKEditor. Because of this last limitation, I suspect TinyMCE will be the editor that gets into Drupal 8 core.

At the end of the day, everyone should choose the editor that's best for them, their clients, and their needs. If you prefer the CKEditor, or another, then by all means, do what makes you happiest :)

3) There are a lot of modules that can allow smaller images to enlarge, either on mouse-over or on click. My personal favorite is the colorbox module but there is a great comparison of all these modules if you'd like to find your own favorite. Most of these modules work nicely with WYSIWYG already, but some of them will require custom code (HTML, CSS, and sometimes jQuery) to work exactly how you want them to (for example, to get them to play nicely with insert module you often need to override the inserted image template file). Another note: If you configure the insert module to allow the original, or large-sized images to be inserted into the post and don't enable the image resize filter module, then you'll have very large images available in your HTML to manipulate in whatever other ways you see fit.

I'd love to hear what other people's favorites are, so if anyone else has an opinion, please post below!

Thanks Jen!

gwideman's picture

I especially appreciate the detailed rationale regarding TinyMCE vs CKEditor. The suggestion for image enlargers and pointer to the comparison will also save a lot of time and toil as well.

A couple more notes for others:

  1. On Jen's video, you'll probably want to watch full-screen, and check that Vimeo's HD is on (button blue = on, grey = off) for best resolution, which you'll probably want for viewing what Jen's doing on screen.

  2. You might want to grab the associated PDF to follow along with Jen's notes at hand.

  3. Jen had been maintaining a tutorial at She explains that this has been out of action since she moved to a new server, and she's still considering how to reinstate it, in the face a considerable public clamor for its return.

-- Graham

WYSIWYG step-by-step tutrorial

jenlampton's picture will be back, as soon as I get some time. So, not this week ;)

Applying the CSS style sheet

chrisPerkins's picture

Thanks first of all for a great presentation. It's a much better set up than the one I'm currently using and I really appreciate you sharing all of your knowledge.

I am struggling how ever with getting my custom wysiwyg.css style sheet to be picked up by the the editor. Do you have any advice or know of any common problems?


Cancel that last comment

chrisPerkins's picture

I've just gone back to it and it's working.

I think the problem was that I hadn't put the path to the wysiwyg.css style sheet in correctly was trying to use %t. In stead I changed that to the full path from the drupal root: /sites/all/themes/mytheme/wysiwyg.css, but then forgot to clear all the caches.


How to see styles in text field

arnemaine's picture

Jen's presentation video was very helpful, and thorough. Being able to set up a site for editing by clients of selected content in a simple, friendly UI is sorely lacking in Drupal. I've heard comments from others that they shy away from using Drupal because of this. The work that Jen is presenting is a step in the right direction.

The one thing I seem to have missed, which I believe she mentioned in the video, was being able to set things up so you can actually see the styles while you are editing in the text field of the content type.

Right now I have everything working except this. So what I'm seeing are the basic changes to the appearance of text, such as H2 text being larger and bold, links being purple and underlined, etc. But I'm not seeing the actual styles of text while editing, that I see when I view the page.

Am I correct that this is possible? Can anyone explain what steps to take?

Answering my own question

arnemaine's picture

Of course, I just found the answer, as soon as I posted my comment. What was happening was that I wasn't using the complete styles in the custom style sheet I had set up for the wysiwyg editor. Once I started making the style sheet have all of the styles for my theme it seems to be working. I went back to Jen's video. Around 40 minutes into the presentation she talks about this.

Hope my confusion helps anyone else trying to set up better wysiwyg editing.

How to get web fonts to work in iframe area

arnemaine's picture

As I mentioned in answering my own question, I now have the styles showing up inside the iframe while editing. However I'm using web fonts on this site, which are hosted through Typekit.

I've copied all of the basic font styles used on my site into the wysiwyg.css stylesheet. But I'm not seeing these in the iframe. I am getting a basic serif font showing for the serif web font and a basic sans serif font showing for the web font that is sans serif.

So! Again, anyone have any experience setting this up using web fonts?