Uploading files to CKEditor the easy way

It's been some time since I published an improved version of the original ImagePaste plugin for Firefox. In that version I included the option to upload files by drag&drop from the desktop and that feature was supported by the latest versions of all the browsers.

Since then I've been polishing the plugin, adding little details, fixing whatever bugs appear and recently I've added a major new feature that I had in my head for a very long time but I never took the time to write it.

Finally I thought that enough is enough and that it's better to get that idea out of my mind and so we have now version 3 of the ImagePaste plugin, with two toolbar buttons to upload files or images without any extra dialog, just a click on the button, select the file and it's uploaded and inserted into the content.

Features of the plugin

In all the browsers you can upload a file or an image by clicking the addFile or addImage buttons. All the browsers means that even IE8 is supported for this option and it's just the simplest way for everyone to add files without having to deal with all the options in the default image or link dialogs.

If you use a modern browser (current versions of Firefox, Chrome, Opera and Safari, as well as IE 10) you will be able to upload an image or file just by dropping it into the editor.

With Chrome and Firefox, you can copy an image or part of it to your clipboard in a program like Photoshop, Paint.Net, etc... and then paste it into the contents with Ctrl+V.

With Firefox, you can select a file in your desktop, copy it to the clipboard (Ctrl+C) and then paste it into the editor with Ctrl+V.

Demo

This is a demo with CKEditor 3 and there's another demo with just the same plugin but using CKEditor 4, including some zones in "inline editing"

Getting the plugin

If you want this version, you can get it under the same terms that my other plugins: the license for a single site is 15 euros and the OEM license for any site that you create is 50 euros.

In order to verify that this version will work correctly for you, please install first the public version, and test it with Firefox pasting an image from your clipboard into CKEditor. If the image is converted into an uploaded file then you have everything ready, if you can't make it work then look carefuly the install instructions before spending any money: you must add the plugin to your list of extraPlugins, and you must have already configured properly the urls to handle image and file uploads. This plugin doesn't include any server side script to handle that part, you can use any script that it's compatible with CKEditor: CKFinder, other existing ones (just google a little for your server environment), or adjust your own one. I even explained some time ago how to do it.

So after having that basic version working, if you think that it's worth to pay a little to get the enhanced version or just a sign of gratitude for any other plugin that you have found useful, select an option and I'll be grateful for your support.

Single site license: 15 euros

OEM License to use it in any site that you create: 50 euros

 

I'm testing now selling the plugin through FetchApp to avoid any delays between the moment that you pay the money and when you get the file, so I would like to know if you have any problems in order to change the seller to another one.

Of course, verify that the mail account that you use is correctly configured, In theory you should get the file right after the payment, but it's better if you receive any mail correctly because I'll use that for future updates (all updates are included as you can see)

No more releases for the onChange plugin

I know that the current version doesn't work correctly with the inline mode of CKEditor 4, but after reading some long threads it seems that some people doesn't like to use a third party plugin for this behavior and CKSource might release their own version, so I don't see any reason to keep updating my own one, specially due to the time that it can take to do a full review of all the ways that v4 can work in all the browsers.

If someone provides patches, I'll release those versions, but I just won't bother to test them (at least until I start using CKEditor 4, but I can't be sure when it will be ready to replace CKEditor 3 for me)

Updates for the GoogleMaps plugin

It seems that I haven't write here anything about the Google Maps plugin for a whole year, and so some people might think that this is a dead project but it's far from that! it's alive and under continuous little improvements.

A summary of the new features since 3.1 (one year ago):

• 3.2:
  • It's possible to delete single points in lines and areas.
  • Enabled Traffic and Weather layers.
• 3.2.x:
  • Option to use custom icons in the markers.
  • It's possible to edit lines and areas.
• 3.3:
  • Button in the editor for markers to insert a "Destination" link.
• 3.3.x
  • Compatibility with CKEditor 4.

Besides that list, there are other adjustments to improve performance, add new translations, and of course fixing all the reported bugs but that list is boring :-)

A quick review of those new features:

Editing of lines and areas

Version 3.1 finally brought back the option to create Lines and Areas but the options to edit them or remove some points wasn't possible at the moment. Fortunatelly after some time those features were available and I added them to the maps editor.

New Layers

Sometimes Google adds a new option in the map, the Traffic layer allows to show the state of the road traffic in the map and the Weather shows the the typical sun/clouds/storm... icons overlayed if the zoom isn't too close.

Directions

This as a common request: an option to set in the window of a marker a link that provides the driving directions to arrive to a place. Now there's an icon in the embedded editor that inserts such a link for the current marker and when clicked it will launch Google Maps with the requested data.

CKEditor 4

This is the latest "feature" that I've added. Although most of the code of v4 is backwards compatible with CKEditor 3.x there are some changes that required some debugging to find out a solution to understand the problem and also the excesive padding in the default skin for v4 means that the contents of many fields were not correctly displayed.

At the moment I think that everything is working correctly, but I still want to perform more tests before being confident that I've tested everything (and so far I'm already getting tired of the problems caused by the dialogs in v4).

Anyway, here's a new demo to test Google Maps in CKEditor 4.

 

Installing a CKEditor plugin inside Drupal or Joomla

This post is meant to be a compilation of notes about how to install a "CKEditor plugin", in a CKEditor installed in Joomla or Drupal. That means: you have CKEditor already installed inside your Drupal or Joomla and now you want to add a new third party plugin, and trying to follow the normal guidelines don't work because the integration with those CMSs means that the usual config.js isn't used.

Let's pick just for example this one: HTML5 Video Plugin, these are part of the install instructions that includes:

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='video';

3. Add it to your toolbar

In your toolbar configuration, add a new 'Video' item in the place where you want the button to show up.

So, name of the plugin: "video", toolbar button: "Video"

Drupal

Let's build upon this guide.

You have to extract the plugin under sites\all\modules\ckeditor\plugins and then verify that the folder has full permissions (I guess that full read permissions should be enough, but I'm not sure)

If this is done correctly and you are using the default configuration then the plugin should show up in the list of plugins and you can enable it. Then you should be able to customize the toolbar with the new button.

Joomla

In the ckeditor folder there's a config.ini and config_src.ini , edit them ( I guess that maybe the changes are required on only one of them) and add a new block, like this:

[Video]
pluginName = Video
image = video/images/icon.png
title = Html5 Video

Hopefully this shold be enough and now you should be able to handle the plugin from the Drupal administration.

 

As you can see these steps are quite rough and I might be wrong about some of them but I don't use those CMSs and I'm writing this down only to have something to refer to when someone asks how to install a plugin there.

If you have any suggestions (I'm quite sure that this should be explained quite better), then please add a comment, send me a mail, whatever and I'll be glad to improve the post.

Adjusting a CKEditor plugin to be compatible with v3 and v4

Recently CKSource announced the first beta of the new CKEditor 4, and along the improvements, it also brings some changes of the API. You can read about those changes in the included API-CHANGES.md file (open it with any text editor, I don't know if there's an easier way to read it correctly)

I'm gonna record here the changes that I have to go through to update my plugins when I touch them (although I'm not gonna try to do full testing until it goes out of beta).

Translations

The first breaking change is that CKEDITOR.plugins.setLang has changed, so now when you pass the object with the translations it must not include the "parent" object, as the doc says:

So, in v3 we had:

    CKEDITOR.plugins.setLang( 'myplugin', 'en',
    {
        myplugin :
        {
            title : 'My Plugin'
        }
    });

In v4 it should be changed to:

    CKEDITOR.plugins.setLang( 'myplugin', 'en',
    {
        title : 'My Plugin'
    });

That's good if you want to release a plugin only for v4 or you plan to ignore it, but if you want to be ready to upgrade and try to make your code compatible with both v3 and v4 you now have a problem because the name of the function hasn't changed but the expected parameters have done so.

So my solution is to create a new helper function and call this one instead of CKEDITOR.plugins.setLang:

CKEDITOR.addPluginLang = function( plugin, lang, obj )
{
    // v3 using feature detection
    if (CKEDITOR.skins)
    {
        var newObj = {};
        newObj[ plugin ] = obj;
        obj = newObj;
    }
    CKEDITOR.plugins.setLang( plugin, lang, obj );
}

This way, we use the new format for the obj parameter, but if the function detects that it's running in v3 it adds the plugin name as the root of all the strings

CKEDITOR.addPluginLang( 'myplugin', 'en',
{
        title : 'My Plugin'
});

Spacer image

Another change is that they decided that leaving the images/spacer.gif file there was polluting the global scope, so now you just have to copy that image in every plugin to be sure that it's included in the install and then adjust the paths in your code to use this copy of the image. It's not a big deal, but certainly to me it doesn't seem a big problem to leave that simple image in a common place so it can be easily reused.

Adding CSS

The doc explain this about this change:

The "additional CSS" feature provided by `CKEDITOR.editor::addCss` is now moved
to a global `CKEDITOR.addCss`, with specified style rules applies **document wide**.

Thus the proper way for a plugin to style it's editable content is to call `CKEDITOR.addCss`
inside of the plugin's `onLoad` function, rather than it's `init` function in v3.

So in order to make your code work in both versions you have to use something like this:

...
    getPlaceholderCss : function()
    {
        return 'img.cke_video' +
                '{' +
                    'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
                    'background-position: center center;' +
                    'background-repeat: no-repeat;' +
                    'background-color:gray;'+
                    'border: 1px solid #a9a9a9;' +
                    'width: 80px;' +
                    'height: 80px;' +
                '}';
    },

    onLoad : function()
    {
        // v4
        if (CKEDITOR.addCss)
            CKEDITOR.addCss( this.getPlaceholderCss() );
    },

    init : function( editor )
    {
....
        // v3
        if (editor.addCss)
            editor.addCss( this.getPlaceholderCss() );
...

 

 

So this is all for the moment. I'll keep editing this post in the future as I upgrade more code.

 

 

Image Mapping plugin for CKEditor

Long time ago I cooperated with Adam Maschek to finish and polish the plugin of his imgmap library for FCKeditor.

Time passed by and people only bothered to request help with private mails instead of saying "Thanks" and even a little donation if the plugin was helpful.

So things go on that way and then I ported it to work for CKEditor when I needed it, but I decided to not publish it again as open source, supporting those request again was something that I didn't want to do.

Sometimes people contacted me asking for the plugin and those that behaved properly and also were willing to pay a little got the plugin. In order to make this step easier for anyone else, I'm publishing now a demo page to test the plugin, and a paypal button.

As you can see in the demo, the dialog is similar to the FCKeditor plugin, but I didn't want to fully match the previous one, so I've added only the features that made sense to me.

Price and availability

Like the other non-open source plugins that I've published, this plugin is available for a single site for 15 euros, and 50 euros in OEM license so you can use it in any site that you've created.

Remember that this payment is only for my work on the CKEditor plugin, check the license of the  imgmap library

Single site license

OEM License

EasyUpload for CKEditor

Most of the people think that the most commonly used dialogs in CKEditor are too complex for the average user. They show lots of options, and all the info at the same time.

This has always lead to people asking how to change them or how to achieve some feature to simplify that process: I have an image here and I want it there, don't ask me lots of questions and force me to get a degree on HTML in order to understand what's the meaning of all those fields.

So a long time ago I created a simplified version for FCKeditor and now it's the time to show an updated version for CKEditor.

Bear in mind that right now the demo is still half done, I want to show how to use it in different ways so you can get the code to configure it the way that you like just by looking at the demo; and of course, while I polish that part I'll find some adjustments for the plugin.

So you can start testing it in the demo page for Easy Upload for CKEditor. If you have some comments about what you think it's missing you can add them here and I'll try to address them.

Price and availability

Like the other non-open source plugins that I've published, this plugin is available for a single site for 15 euros, and 50 euros in OEM license so you can use it in any site that you've created.

License type

Single Site License€15,00 EUROEM License€50,00 EUR

Sending back the file isn't automated, so allow me some time until I can get back to the computer and reply to the email.

Before clicking that Pay now button

This plugin doesn't include any file browser for the files existing on your server or even a server script to upload your files. You can use any script that it's compatible with CKEditor: CKFinder, other existing ones (just google a little for your server environment), or adjust your own one. I even explained some time ago how to do it.

In order to check that this will work, you should already be able to upload or browse files with the default image and link dialogs, and then when you install this plugin those dialogs will change as follows:

What's different from the usual dialogs?

You can check the demo by yourself, but some highlights are:

• If there's no image selected, the user is shown a simple page allowing him to choose the source of the image.
• The extension of the image is validated before uploading it to the server
• While uploading a file from his computer an animation is shown to signal the user that he must wait
• When the image is ready, a simplified dialog is shown