2014/10/19

List of plugins for CKEditor

This is a list of the public plugins that I've created for CKEditor, you might find some of them interesting. I've added here a small description and in some cases a suggestion to use it or not, just to help yo understand faster what's the reasoning behind each one.

As you can see most of them are free, so if you want to support my work, you can buy any of the commercial ones and add a note in the payment so I can know that it's worth to keep publishing free stuff. Or at least say "Thanks" in this post or the pages at CKEditor, it's cheap and at least I'll know that someone has used successfully the plugins.

Some plugins are very simple and perform just a basic single operation, others are huge beasts that provides lots of functionality like the HTML buttons or SimpleUploads, take the time to read the linked page for each one.

Allow Save

The default "Save" plugin for CKEditor 4 is quite restrictive and it doesn't enable the button unless you're using the "replace textarea" mode AND you're in Wysiwyg mode. This plugin removes those restrictions and allows you to do whatever you want when the "save" event is fired on the editor. Remove the default "Save" plugin and use this one.

Background Image for Tables and Cells

Sometimes you have to deal with a client or a project where the final user is supposed to be able to set a background image for tables or cells. You might not want to do it, but if you have to, with this plugin you'll get in those dialogs the options so that they can do whatever they want

Configuration Helper

This plugin simplifies some configuration options in CKEditor like hiding/removing dialog fields, and it also provides a HTML5 like 'placeholder' when the editor is empty (eg: 'Type here the description of the product') that goes away as soon as the user focus the editor

Google Maps

If you want to insert a Google Maps into your site you can use the simple embed code that they provide. That's fast and free, but other times you want the ability to provide more configuration options, to integrate it better into your site, create an image to send in an email... In those cases you should check the Google Maps plugin for CKEditor, because it provides a simple interface to control many options of the Maps without any requirement to understand the underlaying behavior.

HTML Buttons

This is a very powerful plugin as it allows you to create any number of toolbar buttons or even drop down lists to insert whatever piece of HTML that you want into CKEditor or even wrap the current selection with this HTML. If you are searching for a simple way to add a button that inserts a snippet or a combo box with a list of options to insert, then grab this plugin and you'll be able to finish your work in a few minutes without the need to read any complex manual.

Image Crop and Resize

This is a plugin that I've created for Uritec SL. It uses the SimpleUploads API to allow the users to perform basic editing (crop and resize to desired set of dimensions) of their pictures before they are uploaded to the server, or even to edit those images after they have been uploaded. For further details, check the ImageCrop page. This is a big productivity enhancer because it simplifies so much the process of cutting out the undesired parts of the pictures and then resize the selection to match the image sizes defined for the site, and it's God's sent gift for those users that barely understand how to use any image processing program.

Image Maps

This is a plugin built to use the ImgMap library by Adam Maschek into CKEditor. This way your users can mark the active hotspots in any image and create the standard <map> and <area> elements on them that can work on any browser without any special restriction. For further details, look at the ImageMaps page.

Image Paste

Simple plugin that allows to upload to the server the images pasted from Firefox. You should use this one only as a test case to check that you can install custom plugins into your server and handle uploads, the SimpleUploads plugin covers this use case and many other things.

No ABP

This is a very simple plugin that it takes care only of removing the "abp" attributes that the AdBlock Plus extension for IE inserts into the content. It's only a few lines of code and it doesn't do anything special if the user isn't using IE with AdBlock Plus, so you should just install it by default as it will help to avoid garbage.

Non-Breaking Space

It's laughable, but a smart guy provided a vote of 2 because the idea is old. Yes, nothing ground-breaking but at the same time it's the kind of little things that are good to have because we're used to them and CKEditor lacks: Press Ctrl+Space and you get a non-breaking space. Nothing less, nothing more.

onChange

Currently you shouldn't use this plugin as is. Since the CKSource team introduced a similar functionality into the core I stopped updating it, although you might want to look at its code to fix the problems that they didn't care about despite the availability of this plugin that shows how to take care of.

SimpleUploads (file and image upload options)

This plugin adds a whole set of enhancements and new features so that the users are able to upload files and images from their computer as easy as possible and it provides you as a developer with a full API to go far beyond what it's possible with the default CKEditor API or any other plugin.
With this plugin you'll have the ability to paste files into CKEditor, drop them from your computer, avoid uploads of files that have the wrong extension or are too large, use APIs different than the one suggested by CKEditor, you must read the SimpleUploads page and the linked posts to get a glimpse of all the things that are possible with this plugin and the API that it provides.

StyleSheetParser (Fixed)

The current version of the StyleSheetParser has a bug that has been lying around for years and that they don't care enough to fix, so here is the fixed version that works correctly when the cache is empty and it also works with inline-editing. Remove the default StyleSheetParser from your build and add this one instead.

XML Templates

The Templates plugin for CKEditor requires that you create the templates data in a JSON format that can be quite hard to create and debug for non-developers. This plugin adds the option to use a XML format just like the old FCKEditor did. This plugin extends the default Templates functionality, you must have both plugins installed together.

Zoom

This is a half usability-half sample plugin. I don't see much benefits to use the zoom in a web editor, but others do so here's a simple combo box that changes the zoom of the content. Nothing changes in the content it only provides a control like other desktop word processing editors to zoom-in and -out the content.

2014/10/18

Editing images for CKEditor

Besides allowing to upload images to their server, one of the main problems that users have with the images is the size of the pictures. Even for seasoned users, sometimes it's hard to calculate how to correctly crop a part of the image and then resize it to the final desired dimensions.

Using the features provided by the SimpleUploads plugin for CKEditor, you can now make this a very simple task so that they upload to the server the images exactly as desired, without any extra images laying around, and without worries that if the image is automatically cropped, the heads will be cut off or any strange thing like that.

The process is as simple as you can expect, once you have used it you'll never want to go back:

  1. First add the image to the editor, usually the simplest way for the users is to just drop them from another window with the local file system (Explorer, Finder, etc...), but using the toolbar button to launch the file picker works as well.
  2. Then a dialog launches showing the selected picture and the user is asked to select which preset sizes (that you configure in CKEditor) he/she wants to use.
  3. Upon clicking on one of them, a selection appears over the image, and that selection can be resized and moved to focus on the interesting parts of the image.
  4. Now the user can just click OK on the dialog and the image will be saved that way
  5. Otherwise, if he clicks Crop then the options will ask which image quality should be used, and changing them modifies the preview as well as the size that it's shown that will be used for the new image.
  6. Clicking OK will work like in step 4, the image is uploaded to the server and inserted into the content.

But there's even more:

If the image is already on the server, a new context menu option is added to show the same crop&resize dialog, so the user can opt to use existing images on the server and then adjust them when a thumbnail is required for example.

To get those features, check the demo for the image crop and resize plugin for CKEditor.

 

2014/09/19

Future plans for SimpleUploads

I've wanted to write this post for a long time, but I'm usually a little busy and things didn't look to be quite ready, and it's better to not scare people out if it isn't needed.

The future of SimpleUploads

If you follow the development of CKEditor you should know that for a long time they have been planning to add support of image pasting as well as drag and drop in the next version of CKEditor. Initially it was planned for CKEditor 4.4, but soon they realized that it required much more work than originally planned so it was delayed for the next version. CKeditor 4.5 was supposed to be released next week, but they have announced that the whole release will be delayed by an unspecified amount of time.

I can't state how the planned features will work, as it seems that at the moment it's still a work in progress, but I really expect that their code will make quite hard the upgrade of my SimpleUploads plugin to keep all its current features because the browsers are quite frail in these kind of operations. The correct solution would be to use the new APIs that they are creating (at least I hope that they provide some API) and add the missing bits to provide again everything that they have skipped.

But the fact is that like any previous release I expect that it will wreak havoc with my code and it will require lots of changes and some parts might be incompatible with their code so this will require a compromise and I will work to try to bring everything back to work as soon as I can.

Of course such rewrite will be incompatible with the previous versions of CKEditor, and I plan to provide two versions from that point:

  • The current one, compatible with CKeditor up to 4.5
  • Next version, only for CKeditor >= 4.5

The current version is highly polished and I will keep on working on fixing any minor issues that might appear. The focus of my work will be the next version in order to make it work at least as good as the current one.

Currently drag&drop and pasting are just only a part of the whole feature set of SimpleUploads, so adding them to CKEditor doesn't really mean an end to this plugin, only an adjustment about which parts are handled in CKEditor and how to make the whole upload experience as easy and simple as possible for the end user.

What does this means to you?

If you're currently using my plugin, you should delay the upgrade to CKEditor 4.5 until I release something that works at least with the features that you need. If you don't plan to upgrade to CKEditor 4.5 as soon as it's released then this shouldn't be a problem, afterwards, please check if I've managed to fix everything besides whatever I might write as required changes for the upgrade.

If you're interested only about the drag and drop or paste of images into CKEditor and you're OK with waiting a little while and then using that CKEditor version, then you shouldn't buy my SimpleUploads plugin . Just keep on waiting and you'll be ready to go.

Of course, waiting might not be an option for you as you need a solution right now, or you are already using a version of CKEditor and you don't plan an upgrade in the foreseeable future, or more probably, you want more features than those available in the plan CKEditor (like single click uploads). In that case you can use my plugin if you're willing to pay just a little money; if you want a free solution my plugin shouldn't be a concern to you: I don't have any plan to release it for free or to drop it. People have paid for it and I will try to support it for as long as I can.

Please, don't write me in a hurry as soon as CKEditor 4.5 is released, this is my warning that I expect things to break and I will try to put everything into working form again, but I think that it might take at least two weeks until I'm able to release a new version that works and maybe a whole month at least to keep on fixing all the breakage caused by the changes. I have a life and a full time job and even if I don't waste my time with Ingress, time passes flying by and I can't sit the whole day working on these plugins unless I'm on vacation.

 

2014/04/06

Resizing images with SimpleUploads

One of the recent additions to the SimpleUploads plugin is the ability to process the images on the client before they are uploaded to the server.

At the moment I've added two options to allow automatic conversion of bmp images as well as rejecting images that are bigger than the defined dimensions, but it's easy to customize your page so that you can for example resize the images on the client and that way it will be much faster.

Of course this isn't a magical solution: the resizing is done using a canvas, so if any animated image will lose the animation, and I'm not sure about transparency in gif and pngs.

Anyway, I've created a Sizing demo showing the different options:

1) Don't restrict the uploads in anyway

2) Use only a server-side script. If you want to limit the size of images you should always use this kind of setup as a last option so that even if the image isn't resized on the client it's correctly processed and validated on the server.

3) Check the size and reject them

4) Reescale the image on the client, that way it's uploaded much faster.

I might add this option directly in the plugin, but for the momento I think that it's good to have the option to use your own code and that way you can tweak it to better fit your requirements.

The code itself is simple, this is it:

function scaleImage(ev)
{
 var data = ev.data,
  editor = ev.editor;

 var img = data.image;

 // maximum size allowed for images
 var maxX = 400;
 var maxY = 300;
 var imgX = img.width;
 var imgY = img.height;

 if (imgX == 0 || imgY == 0)
 {
  alert("Ops, the image doesn't seem to be valid");
  ev.cancel();
  return;
 }

 // if it's smaller, get out
 if (imgX <= maxX && imgY <= maxY)
  return;

 var ratio = imgX / imgY;
 if ((maxX / maxY) > ratio)
  maxX = Math.round(maxY * (ratio));
 else
  maxY = Math.round(maxX / (ratio));

 var canvas = document.createElement("canvas");
 canvas.width = maxX;
 canvas.height = maxY;

 var ctx = canvas.getContext('2d');
 ctx.drawImage(img, 0, 0, maxX, maxY);

 if ( /\.jpe?g$/.test(data.name))
 {
  // You could adjust here the quality of jpg
  evData.file = canvas.toDataURL("image/jpeg", 0.9);
 }
 else
  data.file = canvas.toDataURL("image/png");
}

2014/02/15

How to launch the ImageMaps dialog with your own code

If you have some code outside of CKEditor that inserts an image into its content and then you want to automatically launch the ImageMaps dialog on that image, you can use simply this two lines of code:

First, select the image using the CKEditor API:

editor.getSelection().selectElement(editor.document.getById("myImageID"));

"editor" is a reference to the editor instance that contains the image, and "myImageID" is the id attribute assigned to that image.

It first gets a reference to the element with editor.document.getById and then tells the selection system to select that element.

Then launch the dialog:

editor.openDialog("ImageMaps");
It's just that simple, use the name registered for that dialog and tell editor that you want to open it :-)
 
I hope that this can be helpful for someone.

2014/02/08

How to insert a new "Browse page" button in the ImageMaps plugin of CKEditor

In this post I'll provide a simple code that inserts a new browse button in the ImageMaps dialog that allows the user to browse existing pages in your CMS besides the normal browse button used to browse for files.

The code can easily be reused for other dialogs like the link or image, you just need to check the name of the elements and then test that it works as expected.

The main idea is to use the "dialogDefinition" event to modify the definition of the dialog on the fly and then create a new button that we will insert besides the existing one. You can check other uses in the samples folder of your CKEditor, there's an "api_dialog" file that shows some of these ideas.

The code is as simple as this:

CKEDITOR.on( "dialogDefinition", function( ev ) {
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

   //Customize "Image Map" dialog 
    if ( dialogName == "ImageMaps" ) {

  var infoTab = dialogDefinition.getContents('info');
  // get the existing "browse" button, adjust its position
  var browseFile = infoTab.get('browse');
  browseFile.style = 'display:inline-block;margin-top:15px; ';

  // Create a new "Browse page" button, linking to our custom page browser
  var browsePage = {
   type : 'button',
   id : 'browsePage',
   hidden : true,
   style: 'display:inline-block;margin-top:15px; ',
   filebrowser :
   {
    action : 'Browse',
    target: 'info:url',
    url: '../intLinks2.aspx'
   },
   label : 'Link to CMS Page or Form'
  };
  // Create a container for the two buttons and replace the existing browse button with this one
  var hBox = { type :'hbox', widths: ['120px', '120px'], children : [browsePage] };
  infoTab.add( hBox, 'browse' );
  infoTab.remove( 'browse' );
  infoTab.add( browseFile, 'browsePage' );

  // Force a better width for the href field
  var txtHref = infoTab.get('href');
  txtHref.style = 'width:200px';
    }
});

I hope that someone finds this useful :-)

2014/02/02

Upgrading to a SSD

Whenever I get a new computer I don't go for the top of the line, I usually prefer to just get one with some nice specs and then one or two years later upgrade some of its components.

This year I realized that I have kept this one for too long :-) and that I should have bought a SSD a little while ago. So I looked up some reviews and one of the main ideas in "Tom's Hardware" talking about which one to pick is:

No matter which one, any SSD is a huge improvement over traditional disk, so I decided that I wouldn't spend too much time researching marks and models, instead I calculated how much space I would need for C: if I move the movies/music/pictures to the existing disk after formatting it as "Data", and it seems that 128Gb is all that I need.

Then I ordered the one that came out as a good option in the reviews that I had found, together with an adapter to use the 2.5" in a 3.5" slot. Fortunately I opened up the tower and as I noticed that there was no empty power connector I ordered also one, I had one SATA cable around so I didn't need that :-)

When setting up the new disk everything was quite easy, except the 2.5" to 3.5" adapter, the fact is that I didn't have a free 3.5" slot so I had to just let the drive laying over an empty space, I guess that this isn't a huge problem as that little disk doesn't have a motor like the old ones.

The performance change is great, the windows evaluation for the disk states that it gets a 7.4 despite the fact that so far I haven't been able to enable the AHCPI that it's supposed to provide even greater performance.

Windows starts up faster, programs load faster, Visual Studio works much faster, but I still keep typing as slow as always :-D

If you still have an old disk go ahead and get a SSD, it's certainly worth it, but you can skip the 2.5 to 3.5 adapter.