CKEditor 4

Upload File

A simple plugin that allows you to drag&drop a file into the editor. The editor will then automatically send the file to your pre-configured backend and convert it into a link.

Screenshots

carousel
carousel
carousel
carousel
Download Add to my editor
uploadfile

67,200 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 4.23.0-lts

Download• Release notes

First major release of CKEditor 4.23.0-lts

Version: 4.22.1

Download• Release notes

First minor release of CKEditor 4.22.1

Drag and Drop Image Uploads

Hey! 

This was supposed to be deleted, like, a year ago. Yet... still here! 

 

Stop downloadin' it, people.  It no work-y. 

Download Add to my editor
dragdrop

2,009 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 0.1.0

Download• Release notes

Release V.0.1.0

Drag and Drop uploading of Images

Currently Imgur and S3 are the two upload locations supported, but, since uploading files boils down to submitting a POST towards the general direction of a server, new backends are trivial to implement.

Imgur:

CKEDITOR.editorConfig = function( config ) {
  // rest of config
  config.extraPlugins = 'dragdrop';

  // configure the backend service and credentials
  config.dragdropConfig = {
      backend: 'imgur',
      settings: {
          clientId: 'YourImgurClientID'
      }
  }
});

AWS S3:

CKEDITOR.editorConfig = function( config ) {
  // rest of config
  config.extraPlugins = 'dragdrop';

  // configure the backend service and credentials
  // aws requires a few extra.. 
  config.dragdropConfig = {
      backend: 's3',
      settings: {
          bucket: 'bucketname',
          region: 'your-region',
          accessKeyId: 'key',
          secretAccessKey: 'secret-key'
      }
  };
});

Upload Image

This plugin enables support for uploading images that were dropped or pasted into the editor. See the live demo.

The upload is implemented in a non-blocking way, so while the image is being uploaded the user may continue editing the content.

This plugin can be combined with a file manager such as CKFinder to provide image storage, browser and editor capabilities.

This plugin is based on the Upload Widget plugin which allows to create more upload widgets, for example, for handling different file types.

Download Remove
uploadimage

1,317,751 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 4.23.0-lts

Download• Release notes

First major release of CKEditor 4.23.0-lts

Version: 4.22.1

Download• Release notes

First minor release of CKEditor 4.22.1

Upload Widget

This plugin implements a base class for creating non-blocking, live upload of files while the user is editing content.

See for instance the Upload Image plugin's demo. When you paste or drop an image, its preview is immediately inserted into the content allowing you to edit content while the file is being uploaded.

The plugin allows to create more upload widgets, for example for handling different file types.

This plugin can be combined with a file manager such as CKFinder to provide file storage, browser and editor capabilities.

Download Required
uploadwidget

1,298,742 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 4.23.0-lts

Download• Release notes

First major release of CKEditor 4.23.0-lts

Version: 4.22.1

Download• Release notes

First minor release of CKEditor 4.22.1

Extra Form Attributes

ExtraFormAttributes Plugin

The ExtraFormAttributes plugin for CKEditor extends the core Forms plugin adding the ability to specify the class & id attributes on various form elements.

Features Overview
  • Adds class and ID attributes to the following form elements / dialogs: textfield, select, button, textarea, radio, and checkbox
  • Adds class attribute to the following elements: form
Requirements
  • CKEditor version 4.4.7 or greater [http://ckeditor.com/](http://ckeditor.com/)
  • The Forms plugin for CKEditor (normally installed by default)
Installation Instructions
  • Extract the downloaded repository
  • Copy the **extraformattributes** folder to your **"ckeditor/plugins/"** folder
  • Open the **"ckeditor/config.js"** file in your favorite text editor
  • Add **extraformattributes** to **config.extraPlugins** and save your changes. If that line isn't found, add it. EX: config.extraPlugins = 'extraformoptions';
Credits / Tribute

This plugin was developed and is maintained by the [https://totalwebservices.net/](Total Web Services team).

A big thanks goes out to the following people & organizations:
WebsiteRelevance.com - for supporting the development of the plugin.
[http://www.ckeditor.com](CKEditor) - For providing CKEditor so we could build this plugin for it.

License

Licensed under GPL Version 3.0. For additional details please see the LICENSE.md file in the download.

Screenshots

carousel
Download Add to my editor
extraformattributes

15,099 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0

Download• Release notes

The Extra Form Attributes plugin for CKEditor extends the core Forms plugin adding an Extra Options tab onto several elements. This allows you to specify the HTML ID and CLASS attributes on your HTML forms in CKEditor.

  • CKEditor version 4.4.7 or greater [http://ckeditor.com/](http://ckeditor.com/)
  • The Forms plugin for CKEditor (normally installed by default)

Paste image as base64

This plugin adds the ability to paste images from clipboard as base64 strings using CKEditor.

The Browser must support the JavaScript File API. Only Chrome and Safari browsers has been tested for the moment.

 

Download Add to my editor
pastebase64

50,341 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0

Download• Release notes

Initial release.

inserthtml4x

A simple dialog to insert HTML directly from the Editor mode into the source code at the point selected in the editor. Save time hunting and pecking through the source code and do it the right way, wtih insertHTML.

Download Add to my editor
inserthtml4x

21,817 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 2.0

Download• Release notes

Updated the plugin for 4.x and renamed to remove plugin name clash.

Image Uploader and Browser for CKEditor

Image Uploader and Browser for CKEditor is a plugin that allows you to upload images easily to your server and add automatically to CKEditor. Since version 2.0 you can browse and manage your uploaded files online right in your browser - without using a FTP Client. The Image Browser is responsive and looks great on every device width.

Demo

The demo can be found here.

Features
  • Functionality: Upload, delete, download and view your PNG, JPG & GIF files.
  • Secure: Only you can access the image browser by a password protection since version 4.0.
  • Flexible: Do you already have your own upload folder? You can easily switch and create folders in the image browser.
  • Modern UI: The Image Browser is responsive and looks great on every device width.
  • Support: Regular updates and an always up to date documentation make it easy for you to install and use the browser.
Installation and Configuration

First extract the downloaded file into the CKEditor’s plugins folder. Then enable the plugin by changing or adding the extraPlugins line in your configuration (config.js):

Defining Configuration In-Page
CKEDITOR.replace( 'editor1', {
  extraPlugins: 'imageuploader'
});
Using the config.js File
CKEDITOR.editorConfig = function( config ) {
  config.extraPlugins = 'imageuploader';
};

Don't forget to set CHMOD writable permission (0777) to the imageuploader folder on your server.

How to useBrowse and manage files

Open the Image info tab and click Browse server. A new window will open where you see all your uploaded images. Open the preview of a picture by tapping on the image. To use the file click Use. To upload a new image open the upload panel in the image browser.

Change the upload path

Open the Image info tab and click Browse server. A new window will open where you see all your uploaded images. Open the Settings to choose another upload path.

Further questions?

Please read the Plugin FAQ.

Support

The support site can be found here. Before submitting a support ticket please read the FAQ.

Some of the features shown in the screenshots may not yet be available in the current version.

Screenshots

carousel
carousel
carousel
carousel
carousel
Download Add to my editor
imageuploader

124,195 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 4.1.8

Download• Release notes

I was asked to add a function to hide or show the settings button, so I released this update only five hours after the last one. If you appreciate my work don't hesitate to buy me a coffee (donate).

Version 4.1.8 - Release notes:

  • added option in pluginconfig.php to hide/show the settings button

Note PHP 5.2 or higher is required.

To show or hide the settings button open pluginconfig.php and modify the value of $show_settings. In case you have any questions or suggestions feel free to contact me using the Support Ticket System.

Images From Word

The Images From Word plugin adds to CKEditor the functionality to allow users to add the images included in their Word documents when they paste those contents into the editor.

With our plugin, after pasting some content coming from MS Word with one or more images, the users are provided a dialog and a simple procedure to use those images in your server, no need to find strange workarounds to export those images.

Please, open a document in MS Word with some images included, now try to copy that content into your editor and you'll understand the frustration that your users have to go through. Now paste that same content in our demo and you'll see how it's possible to make them happy.

Screenshots

carousel
carousel
carousel
carousel
carousel

Product Page

Image Crop and Resize

The "Image Crop and Resize" plugin adds to CKEditor the possibility to easily Crop and Resize the images when the user inserts them into the editor.

When the user adds a new image to the editor using any of the methods provided by the SimpleUploads plugin (toobar button, drag & drop, paste from the clipoard or quick upload tab) they will get a dialog to crop that image one set of dimensions that you have configured. This way those huge pictures that they upload from their cameras/phones now will fit correctly and will weight just a few Kb instead of several Mb.

In order to send the new images to your server, this plugin requires that you have correctly installed in your server the SimpleUploads plugin (can be purchased as a bundle with a discount)

Please, test the demo and read the full description about all the features in our page.

 

Screenshots

carousel
carousel
carousel

Product Page

Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check