I'm a freelance Drupal developer who loves enabling organizations switch to free and open source software.
About Wim Mostrey
Recent posts
-
38 weeks 5 days ago
-
1 year 2 weeks ago
-
1 year 10 weeks ago
-
1 year 15 weeks ago
-
1 year 34 weeks ago
What you see is not always what you get
Aug 14, 2010 in drupal, wysiwyg
As I've mentioned before setting up a Wysiwyg in Drupal has become a straightforward job. A popular method is using the Wysiwyg module in combination with CKEditor. Enable the module, install the editor library and make sure to allow the <img> tag in your input format and you're good to go, right? Sadly, this is not always the case. It's important to note that as a security measure all input formats except the 'Full HTML' format remove all attributes from an html tag. This means that even though the image option in your favorite Wysiwyg editor allows you to align an image to the right and setting a margin, your input format will remove these attributes. Here's a clean example of CKEditor using the standard align and margin functionality:
Using the default 'Filtered HTML' input format and allow the img tag, this renders the following output:
What we saw in the Wysiwyg is definitely not what we see in the actual output because the input format removed the attributes that we set to style and position the images.
So how can we fix this? In Drupal core, we can not: the only option you have is to enable the 'Full HTML' filter, which is not advisable. Your best option is to install the Wysiwyg Filter module which enables a whole range of extra settings for input formats, allowing you to select which attributes, classes and properties should be allowed for which html tags. Such as the 'align' attribute and 'margin' property for images.
Tweet
Comments
align deprecated
The align property is actually deprecated.
What I do is I'll include a list of CSS styles with generic left/middle/right. I enable the 'format/styles' button and the editor can just choose the style he needs to position an element within the text.
I'm trying to keep that list of CSS styles generic enough so I can reuse it on each new project. Adding only project specific CSS where needed (coloring, bullets,...).
I used the same approach as
I used the same approach as the previous commenter, but still, I'm moving away from WYSIWYG editors, I think. IMHO, people who write article-style entries are not the right people to burden layouting upon. Also, WYSIWYG editors with advanced capabilities can, and quite probably will, lead to problems regarding font styles, floating, pasted text from other rich text, clientside scaled images, etc. pp. I prefer a slimmed down editor (only bold, italic, underline, links and lists) and seperate fields for other stuff. In my experience, this is enough for most cases and saves you a lot of support for messed up HTML and browser / javascript problems.
I think it would be nice if there was an UI to present the editor some pre-defined node layouts he could choose from after writing (in the preview stage), but I didn't find a convincing solution for that yet.
When a client is used to
When a client is used to having a Wysiwyg and really wants one, providing a solution like BUEditor with a preview mode just does not cut it. Especially when migrating from another platform. And although Matthias provides a solution for the align issue, a simple width/height function would still not be possible.
Very limited styles work fine
I prefer a slimmed down editor (only bold, italic, underline, links and lists) and separate fields for other stuff. In my experience, this is enough for most cases...
That's the ticket! Very limited choices to mark up the text - I'd add CKeditor's formats menu to enable headings and call it good. Then add images in fields and use predefined CSS and imagecache settings to size and style them. The field placement decides image placement. What you get is a predictable layout and reusable image fields for views. The less code/markup is stored in your nodes, and the more Drupal "knows" about your images (fields add a ton of metadata), the better you can work with your content and mash it up in various surprising ways.
There's an interesting new module, wysiwyg imagefield, which aims to marry fields and wysiwyg editing. I haven't tried it yet, but am intrigued by the possibilities.
Wysiwyg imagefield
I'm currently testing Wysiwyg imagefield, it drew my attention as well. I'll be writing about my experience later this week.
Full control over files is a must for me so I don't allow files to be uploaded directly in the imce that's attached to the Wysiwyg. I currently offer filefield + filefield_sources + imce to select new and existing files, and insert + imagecache to insert those files in the Wysiwyg. This combo has worked perfectly for me so far and I'm curious to see how Wysiwyg imagefield will play into this.
Christoph, yes, this was what
Christoph, yes, this was what I meant. I totally agree.
...
Enter Drupal 8: R.I.P. text formats.
I'm pro Drupal all the way,
I'm pro Drupal all the way, it's a great CMS/Framework. But it's also the only one where you need at least 20 different modules to add and align an image in a text area. There really should be a more 'light weight' way of accomplishing this.
20 different modules???
You really don't need the 20 different modules.
I get by using CKEditor and CKFinder. To align photos and add margins, I select the options within the Image Properties feature within CKEditor, and the Advanced tab for adding margins to the bottom, left or right, depending on where the image is placed, ie. margin-bottom: 0.3em; margin-left: 1em; for right aligned photos. This is probably more complicated than necessary for the average user, but it works when push comes to shove.
You will have to enable extra tags with your Input Filter or enable Full-HTML for the content type and deal with the potential problems that may generate.
The point of the article
The point of the article seems to be that you can't just add the image tag to the Filtered HTML filter, you need another module.
CKFinder isn't open-source and will cost at least $59 per website. So you'll need some way to upload images. Most people use CCK, FileField and ImageField modules. If you want file browsing you might need to use the IMCE module and if you're using the Wysiwyg module, you'll need the IMCE Wysiwyg bridge module.
In addition, many sites use 3 of the ImageCache group of modules for image resizing.
All of these make it easy for normal (non-specialist) users to add images to content. I'll admit that 20 was an exaggeration but the module count does add up.
I have to agree. My current
I have to agree. My current favorite combo is filefield + filefield_sources + imce + wyswiyg (with the ckeditor library) + Wysiwyg filters + wysiwygcck (which requires jsalter, jquery_form_update and jquery_aop) + insert + imagecache (which requires imageapi and transliteration). All in all that's 13 modules and one external library.
ckeditor, wysiwyg, wysiwyg_imageupload, htmlawed
I have been using a combination of ckeditor, wysiwyg, wysiwyg_imageupload, htmlawed (to help w/ filtering the dangerous stuff) for my wysiwyg needs. HtmLawed took a little configuring at first, but now that I have it the way I like it, I will probably never need to mess with it again.
Note that you probably don't
Note that you probably don't want to allow untrusted roles to enter img (or embed, or object) tags. Doing so they can spam you with porn or, perhaps worse (because they are harder to notice), tracking images.
What's about for Drupal 7?
What's about for Drupal 7? This module don't work with D7. Any other solutions?
Work on the Drupal 7 port
I would advice to work on the Drupal 7 port at http://drupal.org/node/865034. Drupal Gardens for example also still has the same issue.
Post new comment