CKEditor Textarea Width/Margin Customizations

CKEditor is hands down the best WYSIWYG editor for Drupal. It has the most features and the best integration. Implementing it can be tricky. Check out this link for a summary of all the posts that I have written about making this excellent text/HTML editor work for you.

One of the cutomizations that I wanted to make was the reclamation of wasted space in the margins of the editor. In one of my sites, I had a textarea that is rather narrow due to the nature of the layout. And it seems that the defined margins of CKEditor are pretty narrow wheen it comes down to brass tacks. I began to search through the config.js file, looking for the area where I could adjust the margins or the indentation. But what I actually needed was a simple CSS change.

.cke_editable {/*reclaims space on the research textarea from the ckeditor default*/
cursor: text;
margin-left: -50px;
margin-right: -43px;
}

This is the overriden selector that I used to make this happen for me. It ended up being a lot easier than I thought it would be.

CKEditor – quirks and customizations

CKEditor is the best choice out there for WYSIWYG editing in the Drupal world. But there are some quirks that I am working through.

If you can’t get a custom text format to save to a textarea field of a custom content type, try adding a little whitespace to the default value of the field. Just a couple of carriage returns should do. I had to do this to get it to work for me.

Adding customizations to CKEditor. 4.x.

there are a few customizations that can be done for CKEditor from within Drupal. But some of the best ones need to be configured in the ckeditor.config.js file.

Use the link above to find many of the easter eggs in CKEditor.

Here is a good example of how to expand the editor area on your site:

*****************THIS IS FROM CKEDITOR.CONFIG.JS*****************

* Append here extra CSS rules that should be applied into the editing area.
* Example:
* config.extraCss = ‘body {color:#FF0000;}’;
*/
config.extraCss = ”;
config.height = 350;
/* A list of plugins that must not be loaded. This setting makes it possible
* to avoid loading some plugins defined in the {@link CKEDITOR.config#plugins}
* setting, without having to touch it.

*****************END OF EXAMPLE********************************

the config.height that you see makes my editor area taller.

don’t want the strange little HTML tags in the bottom left of your editor? You can’t get rid of them in Drupal, you get rid of them from ckeditor.config.js

****************************************************************

* **Note:** Plugin required by other plugin cannot be removed (error will be thrown).
* So e.g. if `contextmenu` is required by `tabletools`, then it can be removed
* only if `tabletools` isn’t loaded.
*
* config.removePlugins = ‘elementspath,save,font’;*/
config.removePlugins = ‘resize,elementspath’;
/** @cfg
*/
/**

*****************END OF EXAMPLE********************************

the line in bold rids you of TWO things, the resize grippie in the bottom right and the HTML elements on the bottom left. There are many other things that you can specify here. See the extensive CKEditor docs for more.

More… Custom Styling with CSS

I have been doing a lot of CSS work and it is all going pretty well. The main thing to do is:

  1. read up on a LOT of CSS to find out what your options are.css2
  2. use firebug to track down what needs to be changed and test how to change it.
  3. alter the css file or the inline css. inline css can often be changed from within drupal if you have a content type with some text. The title text on the SS below uses inline css that i added via the “source” button of the CKEditor module on that particular piece of content.
  4. subtheme all your css files by copying the ones you need into your subtheme directory, making sure to note their existence in the .info file for your subtheme.

 

CKEditor – Final Post on this

I have worked with all sorts of different editors and I have decided to go with CKEditor. If you start down the WYSIWYG Module path, you might think that there are so many options that this is the best way to approach it. I disagree. Most of the  editors offered there are not too good. Use the KISS rule and go with the CKEditor module.

It can a little confusing to setup (at least for those with double digit IQs, like me) at first but I believe that it offers the best integration (IMCE Image) and the most plugins.

This is a great video by Philip Gledhill showing you how to do the complete install, with IMCE. Here is the long and short of it too.

  1. Don’t use the WYSIWYG Module; Use the Drupal CKEditor Module.
  2. Place the CKEditor Library (Different package, get it here) inside the CKEditor MODULE folder and not in the libraries folder. This is where you can get tripped up. This is the normal place for code libraries to go, but not in this case.
  3. Don’t put the CKEditor Module software in the CKEditor subfolder of CKEditor. This will trip it up too. 

If you have problems, watch the video. That will nail it down for you.

Add CSS Inline Elements to Drupal

So in my last post, I was trying to track down and change one CSS element in Drupal. Specifically, the text that I use in the header of my site. This header is actually a node from a Custom Content Type That I added to the page via Panels. This may get a little confusing, so I am going to try to be thorough.

Since the text is a node, I can edit it via the CKEditor, which I have covered previously. What this means is that the styling of the node can be edited directly within the editor. This will add the styling as an Inline CSS element. So, using Firebug, I can see the styling, but there is no CSS file reference. Makes sense because it is Inline.

So, how do I edit it? I really want to avoid making this complicated and getting into the TPL files, messing with the themable functions and all that. I do want to be able to do those things but I want to KISS – Keep It Simple Stupid. So, if I go to the actual piece of content in CKEditor and click the Source button, I can see the inline CSS! Awesome. And, I can edit it. This is where it gets quirky.

I add this CSS to the source on the CKEditor screen. The added parts are bolded:

<p><span style=”font-family:trebuchet ms,helvetica,sans-serif”><span style=”color=white”><span style=”font-size:36px”>DOCResource.org</span></span></span></p>

I then save and check the page. And the changes are there. Great! In Firebug, I see the new CSS with no reference to a CSS file, Great! BUT, when I go back to CKEditor and look at the source of that piece of content again, there is nothing listed for the color. And I believe this is because the Colorbutton option in CKEditor has an issue. The button doesn’t show up and actually, when the option is checked (I have the proper library installed) in the CKeditor setup (under configuration in the Drupal Admin) the CKEditor breaks and won’t show the content at all. This is an issue that others have run into before. But, I DON’T want to spend a whole lot of time running down yet another Drupal Quirk. So, I just work around it. At least I understand how it all works. And why it doensn’t.

<p><span style=”font-family:trebuchet ms,helvetica,sans-serif”><span style=”font-size:36px”>DOCResource.org</span></span></p>

This is what I see when I go back to the content that is now appearing in white. as you can see the color:white css reference is gone. Without the library working properly, you can’t even see the reference in the editor. But the editor does allow you an easy way to add the inline css anyway. WHEW!

UPDATE – If you edit that piece of content again, the change will have to be readded or it will disappear. Ug. That means I have to fix CKEditor…..

 

Rich Text Editors in Drupal

Ug. This has been a real pain. But I believe that I finally have things sorted out. To get CKEditor working, and I mean really working in Drupal, I uninstalled the WYSIWYG mod and started over.

  • I installed the actual CKEditor module from Drupal.org.
  • I reinstalled the ckeditor library into sites/all/libraries
  • i changed the content types to use the new editor
  • i moved the iframe plugin library to the ckeditor/plugins folder
  • i enabled the now-present iframe option in the ckeditor setup

there were still errors present in the CKEditor version from WYSIWYG. i think that WYSIWYG just has issues. I’m sure that there are ways to work around them but this is working for me and there are no errors. Much Better.

CKEditor could not be detected – resolution

Well, I had trouble installing the CKEditor so I went with TinyMCE. But I began to get errors from that as well. And I don’t really like using a solution because I didn’t take the time to figure out what was wrong. So I went back and made CKEditor work. There is a patch for those of you using WYSIWYG 7.x-2.0 and CKEDITOR 7.x. You may receive an error that CKEditor cannot be detected.  This fixed it for me in sand and prod.

http://drupal.org/node/1161738#comment-6814058

Here’s another Patch

Posted by sakseiw on December 5, 2012 at 1:50pm

In …/modules/wysiwyg/editors/ckeditor.inc change line from function wysiwyg_ckeditor_version($editor)

if (preg_match(‘@version:'(?:CKEditor )?([d.]+)(?:.+revision:'([d]+))?@’, $line, $version)) {

to

if (preg_match(‘@version:”(?:CKEditor )?([d.]+)(?:.+revision:”([d]+))?@’, $line, $version)) {

This changes version number search from single quotes version: ‘4.0’ to double quotes version “4.0”

It worked for me on Drupal 7.17 and wysiwyg 7.x-2.2

Rich Text Editors

I have been struggling with CKEditor for hours now. I have it installed, I have it configured properly as far as I can tell but I couldn’t get it to work. So, I uninstalled it and installed WYSIWYG from Drupal.org. This is really just a framework for managing the real editors. I then downloaded TinyMCE from this site. I then uploaded it to the libraries folder on my server and launched the WYSIWYG config again. The Tiny stuff was right there. So, forget CKEditor and go with Tiny.

CKEditor Module

I have decided to dump the route using WSIWYG API and the CKEditor library together. I really shouldn’t have posted so soon. I didn’t have all the info about the choice. Maybe I still don’t but I don’t think so. I have dumped the WYSIWYG module and downloaded the CKEditor Mod here. You still have to have the library. I actually tried to make the API work but kept receiving an error about the library not existing even when i know for a fact that I had it in the right location.

so i downloaded and installed it, leaving the CKEditor library in the same, correct place and it seems to be working properly.

BTW, the CKEditor is still the choice for drupal 8’s core editor.

WYSIWYG Module -with CKEditor as the library

I’m surprised at myself for this; that i waited this long.

I need to put a WYSIWYG editor in place. and the module to use is, WYSIWYG. Here is the link. it’s an API and you have to use a library to go along with it. that library for me will be CKEditor. Read the whole post: that’s what is going into drupal 8 core.

http://drupal.org/project/wysiwyg

http://ckeditor.com/download

You’ll need an editor to allow your users an easier way to add html content. it has a sponsor in http://www.unleashedmind.com/. there is a link where you can make a donation to this group. drop by and give them a buck or two. they do good work.

I’m installing this in sand and will install it in prod later today. I’ll post some notes about it later.

back at this now. but I have concerns about these types of editors and mobile devices. and the download of the scripts that the editors require. doing more research….

http://drupal.org/node/1260052 – read this for a great view of the drupal 8 gurus on editors to replace textareas.

CKEditor Joins Drupal

View0

Great news for CKEditor and its community: Drupal, one of the most used CMS platforms in the world,decided that CKEditor will be the editor included inside Drupal 8, which should be hitting the market by the end of 2013.