Adding a CKEditor plugin to DotNetNuke 8.0.4

This is a little visual walkthrough to explain how to add a custom plugin to a DNN website. It might not be the optimal way, but it's simple and it works.

First, you have to extract the plugin to the ".\Providers\HtmlEditorProviders\DNNConnect.CKE\js\ckeditor\4.5.3\plugins\" folder, just like it's usually explained for any plugin.

Now we must instruct DNN to load it. The js settings come from DNN itself, so go to Site Settings

Now open Site Behavior, More, Open HTML Editor Manager

 

 Now open the Editor settings tab

 

Scroll down to the ExtraPlugins field,

 add the new plugin and save the changes

Now the plugin itself is enabled, although the toolbar doesn't show any new button because it uses the customized toolbars from DNN. I haven't been able to find out if there's a way to do this next step better, but what I've found that works is to edit ".\Portals\0\Dnn.CKToolbarButtons.xml" and then add your button(s) following the pattern

In the ToolbarName put the name of the command that you want to use (it should be the CamelCase name of the plugin, but there might be cases where a plugin has more than one plugin, so check that)
For the ToolbarIcon you can either copy it to the Images folder or reference it like I've done directly from the plugin folder

  <toolbarbutton>
    <toolbarname>ImageMaps</toolbarname>
    <toolbaricon>../plugins/imagemaps/icon.png</toolbaricon>
  </toolbarbutton>

Now load the Custom Toolbars tab from in the Editor settings and you should have the new button available for you

Put the button wherever you think fits better and save it.
Now when you load again the editor, the plugin should be ready to use

I hope that this is useful for anyone that is interested.

Getting a Google Maps API Key

On June 22th Google announced that from that day on, every new implementation of the Maps API requires the usage of an API key.

This is very important for anyone that wants to use my Google Maps plugin for CKEditor, because now you must get your key in order to use it.
The basic usage of the API allows 25.000 free maps loads per day, and you can have one key for each domain that you want to use. From that point you'll have to get a paid license. This is more or less the same, they have adjusted the way that somethings are counted but the important part is that previously the free usage encouraged signing the requests with an API key but now it's a forced requirement.

Getting an API key isn't too hard because the process has been streamlined and you mostly have to agree to the Terms and Conditions, you can find here their instructions, but I'm gonna provide some screenshots so you can view how easy it is.

Step by step guide

First, go to https://console.developers.google.com/flows/enableapi?apiid=maps_backend&keyType=CLIENT_SIDE&reusekey=true

You'll get a screen like this:

As this is probably a new project you just have to click Continue.
Now you'll get some notifications and progress and you'll end up with a screen similar to this one

This doesn't look right, the "You don't have permission to create an API key" message is strange, but the fact is that the "Create" button is enabled and it works, so you can define the allowed Referrer sites, or leave that blank now and adjust it later.
Click "Create" and then you'll get your API key

Click the Copy icon at its right side and you're almost done. If you have already the Google Maps plugin, then open the CKEditor configuration file, add a new entry "googleMaps_ApiKey" and then assign there the value that you got:

Now if you load CKEditor with the Google Maps plugin, the Maps dialog should work, but the static images will fail, this is because we have enabled the Google Maps API, but you need also to enable the usage of the Static Maps API with this key (and also the Street View API if you want to allow your users to use a StreetView image as the preview)

So open https://console.developers.google.com/apis/api/static_maps_backend?project=_  and this time, instead of creating a new project we will use the one that has been created previously:

Then click the Enable button

And this step is done, just repeat it for the Street View API in this link:
https://console.developers.google.com/apis/api/street_view_image_backend?project=_

Then the Geocoding so the searches also work in the dialog:
https://console.developers.google.com/apis/api/geocoding_backend?project=_

And this is over!

Summary

Please, keep in mind that these steps are the current ones as of July 2016, Google might change things or even depending on some settings on your account you might see different things, but the end goal is to get a Google Maps API key, enable also the usage of that key for the Static Maps and then put it in a googleMaps_ApiKey entry in the configuration of your CKEditor instance.

Additional notes

I think that the first time that you try to get an API key you'll get this screen:

and from them on when you try to get another key for a new domain, the dialog that it's used is the one that I've shown at first.

Also, at the top of the screen you might get a banner to sign up for Google Cloud, but if you plan to stay within the free plan limits you don't need that.

New plugin for CKEditor: ImageToolbar

Recently I've been working in order to create for Uritec a new plugin for CKEditor, it was needed due to the way that the Style system works in CKEditor.

First the Styles dropdown shows the styles that can be applied to the current element as well as its container(s); look at the official demo and select the image, now click on the Styles selector and you'll see there "Object Styles", "Paragraph Styles" and "Character Styles", something that it's not too user friendly if they just want to modify the image. The normal user wants simple things.

The second main problem is that even if they focus just on the Object Styles, you (as page author/designer) can't restrict the way that the styles work between them, so if you want to use a class to apply a 1px gray border, and a different class to create a slight rotation and shadow, the user can't apply both at the same time (unless you apply inline styles that we all know it's bound to fail).

So the goal was to allow to apply groups of classes that can be mixed so you set one group of classes to define different types of borders and another one to apply color filters, etc... Also, let's keep in mind that the align center has been disabled in CKEditor for those who prefer to use the classic Image plugin although it's easily done using display:block and margin:* auto, so one obvious group is alignment.

Putting all those buttons to show up always in the toolbar was considered a bad idea because most of the time they won't be used, and providing instead a "contextual" toolbar that shows only when an image is selected  was considered the best option.

Taking all of that into consideration ImageToolbar was born, designed to work in both classic (framed) editor as well as new inline mode, and compatible with the normal Image plugin and the Enhanced Image plugin. You can play at its demo with some predefined styles, but you can define whatever you want as long as you're able to do it with CSS classes. Or if you feel lazy today, check the 1 min. demo on YouTube.

If you use the Enhanced Image plugin you should know already that the way to define your CSS file requires taking some extra care, we have added some notes about it in a small guide about styling images in CKEditor, and due to those widget wrappers and upcast/downcast you'll find that it's much more powerful when you configure ImageToolbar with the classic image as you aren't restricted by the "Enhanced image" limitations.

Lastly, remember that unlike other plugins that claim to be free but then require you a monthly payment, this is a one time payment that will give you any future update.

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.

Images From Word

Another plugin created for Uritec SL.Whenever your users copy some content from MS Word (because it's an existing document, they prefer to create the content that way, etc...) the embedded images aren't copied along the content unless they use IE11. As not all the people enjoy being forced to use a browser, this plugin enhances the default Paste operation in CKEditor so it just ask the user for a couple of clicks to include the images into the content avoiding this way the frustration caused by the missing feature in Chrome and Firefox.

Images From Server

Another plugin created for Uritec SL. Copying content from one site to another one means that the images use the references to your old server, but with this plugin all the images are copied and your content is updated to use the new URLs automatically. Now you don't depend on the other server, you can edit the images in your server, embed them in your emails, etc...

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.

Images Toolbar

Another plugin created for Uritec SL. With this plugin a floating toolbar will show whenever an image is selected, allowing the user to easily change the styles in anyway that you want, without cluttering the main toolbar or the restrictions imposed by the Styles dropdown.

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.

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.

 

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.

 

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.

Updated SingleSite License price

Today I've changed the price of the Single Site licenses for the three CKEditor plugins from 15 to 10 euros.

The new price is already active, and I think that I've changed all the references to it.

Besides that, we all know that when you miss an offer by a few days it leaves a bad taste in our mouth, so I've opted to go ahead and I've refunded also those 5 euros to all the people that have bought a license in the last month == since 1st of January.

Let's call it a birthday gift :-D

I hope to finish some testing this weekend and release updated versions (mainly bugfixes and some little features) for all the plugins.

Validation of files with SimpleUploads

As a user is frustrating to upload a file and then after waiting a long time for it to finish get a message stating that your file isn't valid. That's why the SimpleUploads plugin for CKEditor allows to perform most of the validations before the upload starts and that way you'll have happier users.
In this post I will explain how to configure the most common options and you can test them in a demo page for validation of uploads.

Allowed extensions

This is the most basic check, a whitelist of extensions that the users can upload to the server

config.simpleuploads_acceptedExtensions = "jpg|png|zip";

By default the value is empty so no check is performed. You can add the the list of extensions separated by the pipe "|" and that will be used to check the filename. If the extension isn't allowed the nonAcceptedExtension message will be shown to the user (you can customize it in the lang file).
All the editors in the demo only allow to upload the files with a list matching the settings on the server, except the first inline demo. In that demo the list is set to an empty string so any file is uploaded and then you get the error message from the server (in this case an un-friendly "202 upload failed")

Denied extensions

This is the opposite of allowed, if the extension matches this list the file will be rejected. I only added this configuration option for parity, but everybody knows that a blacklist approach is not good for security. The demo page doesn't include this option.

Image extensions

This setting has two purposes.
The first one is that when you drop a file the plugin must decide if it should create an <img> or an <a> with the upload. The user can opt to press the Shift key while dropping the file to generate a link even if he adds an image file, but as a general rule you might want to allow only png and jpg files for example, or include .bmp and .tiff and then convert those files to other format at the server.
The second purpose is to restrict the accepted files when the user presses the "Add image" button as well as the uploads in the image dialog. If the selected file doesn't match this filter it will be rejected and the nonImageExtension message will be shown to the user (this feature will be included in version 4.1.1, the current one is 4.1.0).

config.simpleuploads_imageExtensions = 'jpe?g|gif|png|bmp';

The bottom editor in the middle is configured to only allow png files as images. You can check that if you drop a jpg is inserted as a link, and the toolbar buttons and image dialogs will reject anything that isn't a png.

File size

Obviously uploading a 100Mb file is usually a bad idea, but the users don't realize that and that's why you can easily set the maximum size that you allow them to use with simpleuploads_maxFileSize. The default value is empty so no check is performed, but you can set here the value that you want to limit (as an integer with the bytes, so 10Mb => 10*1024*1024
The inline editor at the top middle uses a limit of 100Kb, if the selected file is bigger, the fileTooBig message is shown to the user.

config.simpleuploads_maxFileSize = 102400;

As a side note, file size is a common problem and even if you don't bother to adjust this setting, the server might return a "413 Request Entity Too Large" status error, in that case the plugin handles that error and shows again the fileTooBig message to the user instead of just stating that the upload failed.

Custom validation

Maybe you think that you still want to do some other check like forcing the user to select a file with a custom pattern and a minimum file size, or whatever, ok, you can do that also.
The last editor at the bottom right only allows to upload files that start with "wall" by listening to the  "simpleuploads.startUpload" event.
The code in this example is quite simple

editor.on('simpleuploads.startUpload', function (ev) {
 // File name
 var name = ev.data.name;
 if (name.substr(0,4).toLowerCase() != "wall")
 {
  alert( "You must add here only wallpapers" );
  ev.cancel();
 }
});

We set the listener on the editor instance that we want and use the ev.data.name property to check the file name that the user has selected, if it doesn't pass our test we cancel the event and show a message to the user.
In fact most of the previous validations (except for identifying images) are performed using this event, the plugin adds a listener like that for each editor and uses the configuration values to verify if the file is valid or it should be rejected using the file name as well as the file object to check its size.

Server messages

Even after all these checks, there might be some other issues that can't be handled at the client side, in that case remember that in the response that you send from the server you can set an empty Url and the third parameter is a message that will be shown to the user.

Black Friday discount

During the rest of the month, I've reduced 20% off the price in the three plugins for CKEditor that I sell here

SimpleUploads,

Google Maps

Image Maps

That means that single site licenses now are 12€ and OEM licenses 40€. I still haven't modified the pages in this blog, but the prices in FetchApp are already adjusted, so right after clicking the first Pay button you'll see the correct price.

Remember that the three plugins are compatible with CKEditor 3.6 up to the current 4.3 and future updates to add new features or bug fixes are included, it's a one time payment. This offer will end on 1st of December.

(no, I don't really expect that anybody will care about this, but hey!, why not to offer this deal?)

 

 

SimpleUploads and the new image2 widget

CKEditor 4.3 has introduced a new image plugin that is a showcase of its widget system.

The problem is that any image that has been added through direct drag&drop or paste into the editor with the SimpleUploads plugin behaves like an image (big surprise), and it's not such a widget.

That means that after inserting it, you can't edit the image until you reload the content, and it's a little bit ugly that situation because you can't be sure if everything is working correctly or if your image will be gone or whatever.

So for the moment you can use this patch:

// Let's add this to every editor on the page. You can instead add it only to a specific editor.
CKEDITOR.on('instanceReady', function(e) {
    // the real listener
    e.editor.on( 'simpleuploads.finishedUpload' , function(ev) {
        var editor = ev.editor
        // workaround for image2 support
        if (editor.widgets && editor.plugins.image2) {
            var element = ev.data.element;
            if (element.getName()=="img")
                editor.widgets.initOn(element, "image2");
        }
    });
});

It's adjusted to work only with the "image2" plugin, if you want to use other plugin to handle images then you must replace the name of it in the call to initOn.

It simply uses the event fired after an element has been inserted to check first if your editor has the widgets and image2 plugins active, then verifies that the new element is an image, and in that case it manually inits the widget on that image.

 

Including additional data with the file in SimpleUploads

A question that many people have asked for a long time is how to include additional info (for example the state of a new checkbox in a dialog or some Anti-CSRF tokens) when a file is uploaded in CKEditor with the "Quick upload" option available in some of the dialogs.
Most of the time no one answered, or the answer involved modifying the core files of CKEditor. In any case, there isn't a simple solution available.
WIth SimpleUploads 4 that's a very simple task, just set a listener for the "simpleuploads.startUpload" event that it's fired and you can the modify the target URL if you want to change the Query parameters, or include an "extraFields" object to the event data and the properties of such object will be sent as additional fields in the POST request.
Let's see this with an example, for me it's the best way to understand things.
First, suppose that you have modified the image dialog to include a custom checkbox, and that in your page you have defined an object that provides some tokens that should be used on each upload to verify that it hasn't been tampered. That's not part of the exercise so I'm not gonna explain that here, the problem is how to add that data to the uploads, not the system that you're using.
You just need to write a listener for the editor, and you can even create a listener for any editor in the page.

// Let's add this to every editor on the page. You can instead add it only to a specific editor.
CKEDITOR.on('instanceReady', function(e) {
    // the real listener
    e.editor.on( 'simpleuploads.startUpload' , function(ev) {

// write code here...

    });
});

the inner event will be fired on each upload that it's started, we just have to check if it's fired while we are on the image dialog to add the checkbox, and always add the additional POST fields.
Remember that this is just a basic sample, you can decide to send all the info as POST, or include more fields, check other functions, this is just a sample about how to modify the URL and query String and include extra POST fields:

  var data = ev.data;
  // the context property provides info about where the upload is being used
  // var context = data.context;

  // Check if there's a dialog open:
  var dialog = CKEDITOR.dialog.getCurrent();
  if (dialog)
  {
   var name = dialog.getName();
   if (name=="image")
   {
    // Get the value of our new checkbox and if it's checked add it as a parameter to the URL
    var value = dialog.getValueOf("Upload", "chkCustom");
    if (value)
     ev.data.url += "&checked=on";
   }
  }

  // add CSRF tokens
  var extraFields = {
   // These is sample code, the CKEDITOR.config.action, CKEDITOR.config.formID and Core objects
   // are items specific to a custom implementation of CKEditor.
   // Fill the extraFields object with whatever you might need.
   "Action" : CKEDITOR.config.action,
   "FormID" : CKEDITOR.config.formID
  };
  extraFields[ Core.Get("SessionName") ] = Core.Get("SessionID");

  ev.data.extraFields = extraFields;

All of the code is up and running in a new demo.
As you can see customizing the uploads in CKEditor now it's a very simple task and you have full control about what happens.

PS: Although I've said that those POST fields are fictional, in fact they are based on the setup used by OTRS 3.2.9. In order to integrate CKEditor they are using a custom build to modify the file uploads, but with this plugin such custom patches are no longer needed.

Demo videos for the Google Maps plugin for CKEditor

I've realize that I haven't announced it here, but about a month ago I spent some time creating two videos showing most of the features available in the Google Maps plugin for CKEditor.

The idea behind the plugin is that although being able to play with the demo page and test the features by yourself, sometimes you might not be aware of all the available options, and despite my horrible pronunciation (I beg you pardon) i decided that it would be good to provide a video explaining the features available in the plugin.

Of course, creating such thorough explanation means that I found little issues, I used different browsers to test the features and record the video so in the end besides the videos I released a new version of the plugin with some improvements (and testing the dialogs was when I felt the need to improve the uploads in the CKEditor dialogs, it was a pity that some features like adding a KML file or a new icon couldn't been done by drag & drop from my computer)

The first video is available here:  Introduction to Google Maps plugin for CKEditor

It explain the main features of the two first tabs of the dialog, and how the map is rendered in the final page. Most of the options are just what you expect and you can see any change in the preview map of the dialog.

Some of the features that I added thanks to recording this video was the ability to start with the StreetView of a location or with a rotated map.

The second video is this one: Drawing shapes on Google Maps with CKEditor.

In order to record this video I finished an option that I've had in the works for some time but I never had the time to test it, drawing circles.

The video starts showing how to place markers, change the icon of the marker, how a simple CKEditor is embedded in the dialog to allow editing the popup that shows when you click on a marker, or how to insert a simple option so that the visitor can get driving directions from his location to that place.

Then it shows the other drawing options, lines, polygons and circles, all can be controlled to adjust the color, width, opacity; so you get the map that you want.

Please, keep the closed captions on and the volume low, but watch the videos and if you have some question about them or you think that I can explain something else that I've missed, then drop me a note.

Finally, SimpleUploads 4 is here

After a long time working on this upgrade, I've reached the point where I think that it's better to release it and write all the documentation that I had in mind afterwards, so expect more updates about all the features in the following days.

Since quite a long time ago I felt that the name "ImagePaste" wasn't correct for a plugin that allows to also drop files and since version 3.0 offered two buttons to upload files or images with just two clicks and get them inserted into CKEditor.

So with along a new feature set, the main change (meaning the change that will cause more problems for existing users because instead of just replacing the files now you have to edit again your config file) is the rename of the old "imagepaste" to "simpleuploads"

That name tries to explain better what it does, it's not only about "images" and not only about "paste", it's a set of features to offer the users a way to "upload" files in a "simple" way.

The best way to check how it works is to test the demo.

Skipping the explanation about the existing features, the new ones are focused on the dialogs of CKEditor and improving the upload progress:

When you upload a file in the editor, now you get a progress indicator and the option to cancel the upload. The existing progress for images has been improved to also include the cancel option.

The plugin now integrates into the CKEditor dialogs, if it finds a "quickUpload" button it will be replaced with its own one to offer the same simple upload (click button, select a file and you're done instead of having to press the "upload to server"), as well as progress information, cancelation option and the full control on the upload (modify the upload URL, check file size, extension, automatica validation with a whitelist or blacklist...)

And besides modifying the QuickUpload button, the dialog itself now becomes a drop target, you can drop a file from your computer on those dialogs (even if there's only a browse server button is enough) and it will be uploaded and the url of the dialog filled with the new URL.

Another improvement in this version is the inclusion of optional parameters in the upload data, for example if you want to use some anti-CSRF token, modifying the QuickUpload system in CKEditor required some tricks, but now it's a piece of cake. Ditto if you want to add for example a checkbox to scale the image to a maximum, just before the upload begins there's an event where you can control many features.

I'll try to provide examples about how to customize CKEditor with this plugin so you can easily upload files and do whatever you want with them, so keep an eye on the blog because I'll try to write new posts explaining different ways to use the plugin. I've created now a main page here to provide a central point for all the information about SimpleUploads.

PS: currently I really dislike the comment system in Blogger because I don't get any notification when someone comments a post, so I might move to another platform if this bug persists. Meanwhile, have a little patience if I don't reply, it's usually better to send me a mail or direct message by + me.

Cross domain file uploads in CKEditor

In version 3.4 of the SimpleUploads plugin I've added support to upload files across domains based on the CORS spec.

If you don't use multiple domains (one server for the uploaded files and another for the editing page) then this change shouldn't affect you. Otherwise you can enable this feature by modifying your uploader to send just two headers in response to an OPTIONS request.
Some simple PHP code:

if (isset($_SERVER["HTTP_ORIGIN"])) {
 // You must verify that the origin domain is on your white-list
 header('Access-Control-Allow-Origin: https://admin.example.com');
 header('Access-Control-Allow-Credentials: true');
}
if ($_SERVER['REQUEST_METHOD']=='OPTIONS')
 exit(0);

• First: check if the browser has sent an Origin header. That means that it's a cross domain request. You can check that domain with the list of domains that you want to allow. The usual behavior is to send back a fixed origin header like
  

  header('Access-Control-Allow-Origin: https://admin.example.com');

• Second: Send an Access-Control-Allow-Credentials header specifying that the browser is allowed to make a request that will use the credentials of the user at this domain. This means that if the user is logged in, the browser will send the cookies required to allow you check his/her identity.
• Last: as the OPTIONS request doesn't require more data in the response you can stop any further processing here. After this first request the browser will upload the file and you must send back again the two Access-Control headers as shown in the sample code.

You must be careful if you want to allow this feature, after all it opens the possibility of another attack vector.
If you're hosting the files in the same physical server, you might be able to get the same functionality by modifying just the URL that it's returned after you upload a file and keeping all your code in the admin.example.com domain.

Updating some plugins

Today I've been working on some issues on plugins for CKEditor.

As I've stated previously, I don't like Github, but I'm forced to use it and when people uses things that they don't like it's obvious that things are slower than when they are happy.

I'm always afraid that if I try to do things I'll have to waste a lot of time recreating again the branch, it will spit out errors saying that it can't merge and that I have to use the command line. I've been using Beyond Compare for so long that merging things on the command line seems like an impossible task to me and I don't want to learn the github commands because that's not my daily job and even if I waste time to learn them for one task, by the time that I have to use them again I will have forgotten everything about them.

So if you see that "I'm ignoring" your patch, the reason might be simply that I don't have the time and energy to fight against Github.

The first patch was a simple one-liner by bfavors on the configuration helper plugin.

First of all, thank you.

But please, next time try to provide more info to quickly understand how I should test to check the bug, the browser, some simple code that shows how to load the editor. There are so many options that without more info my first thought is "Ok, now I have to guess out how to reproduce that bug!" :-(

If you provide such simple patch and also a simple testcase it's really easy to test that and verify that it was broken and now it works. Otherwise I might think that I'll have to spend a lot of time like it usually happens with bugs in CKEditor.

Then I've been reviewing the suggested changes to the "background image" plugin.

Some months ago OFark provided a patch to add support for background-repeat and background-position, but after merging those changes I faced some issues and moved to do other things, creating a branch so that the code doesn't get lost.

More recently LazyHammer did provide a new patch and this time things looked better, so I've been checking that a little and although it is still not perfect (for example it leaves garbage styles after removing the background image on the table) it worked well enough for most of the people, so I've uploaded version 1.4

If you are interested in a plugin and there's something that you want to improve, please create a patch and I'll try to review it.
The better it works and the more info about what's the original problem, the faster the review :-)

Making the ImagePaste plugin compatible with IE11

Now that it's summer time and I have some free time I decided to take a look at the beta of IE 11 to check how well does it work with some of my CKEditor plugins.

The first thing to remember is that CKEditor itself isn't compatible with IE11 and if we are to base our guesses on previous history I don't think that they will really work on it until sometime after IE11 has been released and people start complaining seriously, but I prefer to look ahead and try to work now instead of having to rush later.

So I've focused my tests on the image paste plugin, specially because in their release notes they talk about the new ability to use the .files property in the clipboardData object as well as the base64 encoding performed by default (like Firefox).

Well, using base64 on the image is a nice little trick, but I think that it's really a bad option in the real world. I guess that if any performance guru would have been consulted they would have answered that this feature shouldn't have been added (at least not by default).

Testing IE nowadays it's much simpler than it used to be. Microsoft provides virtual machines ready to use with almost any combination of supported OS and IE as well as the virtual machine environment (at least I didn't miss anything). So after downloading the Win 8.1 preview and "installing" it, I was ready to test.

Ok, almost ready to test: no network connection. It turns out that the default network configuration is set up to work as a private network with the host. After changing it to my default bridged preference I had Internet again :-)

So I launched my demo with CKEditor 3 and... nothing. Nothing is pasted there. Not only the image is ignored from the clipboard, also any text can't be pasted. As the argument will be that CKEditor is "old" and it's not supported I moved then to the CKEditor 4 demo to check it, and yes, now it "works". The image is pasted but as base64 data. That means that neither my direct paste listener on the element is working to detect the files and the default CKEditor paste event is also failing to provide me the base64 so I could try to use the same Firefox trick.

A little debugging shows that the CKEditor paste isn't fired at all and my listener on the editable element works, but the event doesn't seem to include the .files property. Debugging that info isn't as easy as it seems, despite the claim that after pressing F12 the debugger is ready isn't true for me, breakpoints doesn't work, the files show up as a huge list of "plugin.js" files...

At this point a very important suggestion for Microsoft: Show folder names in the pane with the loaded scripts, having around 30 or 50 files named "plugin.js" and no way to tell them apart is not fun.

In order to debug correctly I restart the machine (maybe it's usual for people to start debuggin on the first IE & OS launch, but I don't see any other reason to fire up that VM, Win8.1 still tries to force "metro" too much so it doesn't fit my tastes) and now things seem to work a little better. To find the place for my breakpoints I search the files for the some function name specific to that file and that way I can avoid the mess of "plugin.js" .

And now looking at their documentation I notice something interesting, instead of using a clipboardData object on the paste event data, they are using one one the window object (like old IEs), so now it's obvious why this detection wasn't working. I add a workaround to try to use it and now when I copy an image from Paint I can detect and upload it like it happens in Firefox and Chrome. Due to the way that they have written their documentation I think that this feature isn't complete, after all I haven't managed to get an event if I try to paste a file from the desktop (like Firefox does) and if I create a document in WordPad with an image only the text is copied and no image is inserted, although given the way that they have chosen to write the documentation I think that some other feature should be available in the final version besides pasting a simple image from the clipboard.

After noticing that issue and given that this is a problem that shouldn't exist (providing files in the clipboard data is a feature that currently only Firefox and Chrome support, so if Microsoft want existing code to work they should use exactly the same APIs and objects) I filed a bug in their tracker to check if they care about compatibility or not. To my surprise this morning I had a reply, stating that obviously they can't reproduce the bug and the best course of action is to close it. I've replied providing the test file as a live url instead of an attachment (they didn't allow .html attachments so finding a .txt page might have been too hard for them). Of course this probably means the end of my efforts to report any issue in IE11 to Microsoft, if they don't care about something so simple and basic according to their goal of treating IE11 as any other modern browser then I'm not gonna waste my time trying to explain more complex things.

Back to my testings on IE11 and image paste, I noticed that dropping a file doesn't upload it and instead tries to open it as if I hadn't added any drop listeners. In this case the problem is that CKEditor at the moment detects IE11 as a gecko, but in this case Microsoft is aligning their behavior to old Chrome and requires that the drag over event is prevented. This is the kind of bug that Microsoft should also fix, but I don't have hope on them so I just add a line to detect "IEmodern" and it works (yes, this is the kind of bug/browser behavior that can't be changed based on feature detection but instead it relies on hardcoding which are the buggy browsers)

So now I tested again the CKEditor 3 demo and everything related to my plugin works. Images can be pasted, dragged, uploaded with the toolbar button... CKEditor itself has its own set of bugs (like not being able to paste at all in 3.6 or that the paste event isn't fired in 4.2) but that's outside my control. I could try to debug and provide patches if I really cared, but given that some of the patches that I provided for CKEditor have been ignored for years I prefer to not waste the time that way.

BTW, soon I might replace all the CKEditor 4 demos with the "Moono color" skin, being forced to see those black and white icons is really depressing.

 

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

Edit June 2016:
Let's try to provide some extra info for the SimpleUploads plugin:
The main difficulty for this plugin with regards to other plugins is that it requires a server side script to save files. By default you won't get that with Drupal in the way that it's required, you can use for example IMCE to upload, manage and browse your files, but it lacks a method to save files posted directly from the editor.

You can look at this guide for file uploads in CKEditor as it's the basis for the next instructions:
If you haven't configured the file uploads then the Image dialog won't have the Upload tab and it will be like this image:

Now open your ckeditor.config.js and add a URL for the uploads:

config.filebrowserUploadUrl = '/simpleupload';

Save the changes and load a page with the editor and now it should have the upload tab (but obviously it won't work correctly)

Now it's the time to add our file uploader for Drupal, you can use this simpleuploads module for Drupal and take a look at its install instructions (don't focus on the comments about how to install CKEditor because you should already have it running, or adding the simpleuploads plugin because it's better to do it once the uploads are working)

Follow the instructions, if you have problems don't forget to review the doc about how to configure the file uploads for CKEditor in a generic way.

When you can upload images using the Upload tab in CKEditor you're ready to use the SimpleUploads plugin, it's the proper time to buy it because you know that you have the server ready.

Now extract the SimpleUploads files in the plugins folder for your CKEditor, this depends on how you have installed and configured CKEditor, it can be /sites/all/libraries/ckeditor-plugins or /sites/all/modules/ckeditor/plugins it depends on how you have installed CKEditor, but you should be able to find out in your admin pane. Check this guide about how to install plugins for CKEditor in Drupal, you can read also this guide for Drupal 7  if you're still having troubles to find info

At this point everything should be ready, just save the changes and test. If there are problems look at the browser console for any kind of error

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.