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.

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.

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

Feb 04, 2013 Posted by CKSource

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.