API

This plugin provides APIs for other plugins to work with browser windows, dialog UI elements, media elements, htmlParser elements, URLs and XMLHttpRequests.

api

1,067 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

Browser

This plugin provides a simple and minimal browser API for other plugins to consume (almost identical to the mediabrowser plugin) as an alternative to the filebrowser plugin.

It does absolutely not care about advanced features like file uploads or the likes. If you need those features, stick with the filebrowser. It rather focuses on the easy integration of your application (CMS or whatever), which usually provides a means to upload files anyway.

Unlike the filebrowser plugin it does not use URL parameters to pass values between the editor and the browser windows, but uses the browser-native window.postMessage() functionality to communicate between both. This way you can easily pass more than just the URL of the selected element from the browser to the editor or even multiple elements at once.

Difference between browser and mediabrowser plugin

There is only one difference between the browser and the mediabrowser plugin:

Whilst the mediabrowser plugin offers a config option to set a global browser URL for all plugins that use it, the browser plugin does not have any config option at all, but your plugin surely could have. With the browser plugin you could configure the browser URL for each button individually, if you want.

Plugin Integration

To use the provided API in your plugin, you just have to define a callback function browser and browserUrl in the browse server button configuration of your plugin's dialog, p.e.

{
    id: 'browse',
    type: 'button',
    label: common.browseServer,
    hidden: true,
    browser: function (data) {
        if (data.src) {
            var dialog = this.getDialog();

            ['src', 'type', 'alt'].forEach(function (item) {
                if (!!data[item]) {
                    dialog.getContentElement('info', item).setValue(data[item]);
                }
            });
        }
    },
    browserUrl: '/url/to/browser'
}

Browser Integration

You can implement your browser as you wish, the only requirement is that your browser notifies the editor by posting a message p.e. like

window.opener.postMessage({
    alt: 'Optional alternative text',
    src: '/url/to/media'
}, origin);

The type and structure of your message is complety up to you, p.e. you can use a simple string if you are only interested in one value, an object or an array.

Demo

https://akilli.github.io/rte/ck4

Minimalistic browser example

https://github.com/akilli/rte/tree/master/browser

browser

357 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

Links Split - URL & Domain

Help you split domain name and url.

Install : 

  1. Download source and extract to "ckeditor/plugins" folder.
  2. in config.toolbarGroups (groups) add "HkUrlSplit"
  3. in config.extraPlugins add "hkurlsplit"

Screenshots

hkurlsplit

602 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.0

DownloadRelease notes

Work with Ckeditor 4x

HKemoji - custom emoji - smiley

This plugin integrates the custom png/gif emoji and smiley for ckeditor 4 (with exists 4 example emoji package)

  • If you want revenge "emoji dialog" auto close when clicked emoji, open "dialogs/hkemoji.js" and delete line 26: dialog.hide();
  • To add or remove smiley, read documentation.

Screenshots

hkemoji

1,381 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.0

DownloadRelease notes

Maybe work with older version (4.5)

Media Browser

This plugin provides a simple and minimal browser API for other plugins to consume (almost identical to the browser plugin) as an alternative to the filebrowser plugin.

It does absolutely not care about advanced features like file uploads or the likes. If you need those features, stick with the filebrowser. It rather focuses on the easy integration of your application (CMS or whatever), which usually provides a means to upload files anyway.

Unlike the filebrowser plugin it does not use URL parameters to pass values between the editor and the browser windows, but uses the browser-native window.postMessage() functionality to communicate between both. This way you can easily pass more than just the URL of the selected element from the browser to the editor or even multiple elements at once.

Difference between browser and mediabrowser plugin

There is only one difference between the browser and the mediabrowser plugin:

Whilst the mediabrowser plugin offers a config option to set a global browser URL for all plugins that use it, the browser plugin does not have any config option at all, but your plugin surely could have. With the browser plugin you could configure the browser URL for each button individually, if you want.

Plugin Integration

To use the provided API in your plugin, you just have to define a callback function mediabrowser in the browse server button configuration of your plugin's dialog, p.e.

{
    id: 'browse',
    type: 'button',
    label: common.browseServer,
    hidden: true,
    mediabrowser: function (data) {
        if (data.src) {
            var dialog = this.getDialog();

            ['src', 'type', 'alt'].forEach(function (item) {
                if (!!data[item]) {
                    dialog.getContentElement('info', item).setValue(data[item]);
                }
            });
        }
    }
}

Browser Integration

You can implement your browser as you wish, the only two requirements are that you configure the URL to your browser as mediabrowserUrl p.e.

config.mediabrowserUrl: '/url/to/browser';

and that your browser notifies the editor by posting a message p.e. like

window.opener.postMessage({
    alt: 'Optional alternative text',
    src: '/url/to/media'
}, origin);

The type and structure of your message is complety up to you, p.e. you can use a simple string if you are only interested in one value, an object or an array.

Demo

https://akilli.github.io/rte/ck4

Minimalistic browser example

https://github.com/akilli/rte/tree/master/browser

mediabrowser

1,858 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

Version: 1.1

DownloadRelease notes

Use window.location.origin as first fallback for Edge

Image, file, movie browser- uploader AND code editor AND Query executor

ZSManager ( ZmajSoft Manager) is able to UPLOAD and SEARCH for files, images, movies... with preview.
Also you can to EDIT Any code (html, php, js, mixed, text and anything else readable)
Also you can change file and folder permissions.
Also you can CREATE, DELETE, MOVE, RENAME And EDIT FILES.
ALL THAT DIRECTLY on your running site
Huh sound great...

This App is also and PLUGIN for CKEditor.. all versions.
Read "Read me" how to configure with CKEditor... It's standard.. just edit CKEditor config.js and add
"zsmanager" in plugin line.

OR Read complete documentation at

http://www.zmajsoft.zone/Editor_plugin/zsmanager/readme.html

DEMO URL is http://www.zmajsoft.zone/Editor_plugin/zsmanager/index.php

Warning, almost all what you done, you can not UNDO.

You can destroy your site with this Editor with easy.
 I do not give to you ANY GARANTIES. simple you MUST know what are you doing.
I am not responsible for ANY of your data,  site, or anything else.

This app is should have been free,but I expect that one who has to pay her and knows what he doing.

Screenshots

Product Page Commercial plugin

File Uploader

File Uploader is a versatile solution to upload files and images to the server and to embed them into the edited area. Besides uploading, it offers the most critical features, such as relocation from an external website by URL, resizing of pictures and inserting them as a preview or a link.

This one add-on encompasses functionality of these previously known add-ons:

  • Quick Image Upload
  • Quick Image Preview Upload
  • Quick File Upload
  • Easy Image Upload
  • Easy Image Preview Upload
  • Easy File Upload
  • Rehost Image

File Uploader is a standalone product, it has its own SDK and does not need third-party file managers.

The main features:

  • Automatically makes backup copies of original images before editing.
  • File sets are uploaded as transactions to avoid partial uploading.
  • Images can be renamed after uploading and before commit.
  • There are three templates for uploading files - as an image, as a preview and as a link to the file.
  • Resize all uploaded images at once. Just specify dimensions you want the images to fit.
  • JavaScript and TypeScript SDK. Use the API that allows to invoke a component of your application with specified parameters.

Learn how File Uploader works, to understand the philosophy we put as a base of the component, and to learn its features and capabilities.

Screenshots

Product Page Commercial plugin

Autoplaceholder

This plugin will add an inline editable widget to insert placeholder that work with autocompletion.

You have to pass the available token list (the list of key that autocompletion will match) inside condig option like this:

var tokenList = {
    'animals.cats.persian': {
        value: '27392032932'
    },
    'animals.cats.korat': {
        value: '51432132312'
    },
    'animals.cats.ragdoll': {
        value: '51212325242'
    },
    'animals.cats.bengal': {
        value: '8732523235'
    },
    'animals.dogs.corgi': {
        value: '241264343'
    },
    'animals.dogs.beagle': {
        value: '24212415156'
    },
    'animals.dogs.collie': {
        value: '64542124252'
    },
    'animals.birds.parrot': {
        value: '6112261235'
    },
    'animals.birds.pigeon': {
        value: '63243151224'
    },
    'animals.bears.grizzly': {
        value: '47328329832'
    },
    'animals.bears.brown': {
        value: '434838933'
    }
};


var editor = CKEDITOR.replace( 'editor' , {
    extraPlugins: 'divarea,autoplaceholder',
    autoplaceholder: {
        tokenList: tokenList,
        defaultText: 'Add Value'
    }
});

editor.on('autoplaceholderTokenMatched', function(e) {
    var $element = e.data.$element;
    var tokenData = e.data.tokenData;
    $element.attr('rel', '{' + tokenData.value + '}');
});

Like in the example, you can separate key values with dot to provide a guided suggestion on different steps.
In the example if you type inside the placeholder "anim" it will suggest just "animals". Then when you choose the "animals" option it will suggest "dogs, cats, and birds" and so on.

Customize default text

You can specify an optional the optional configuration property "defaultText" that will substitute the default value that will appear inside the widget.

Emitted events

When a token is matched by the autocomplation an event "autoplaceholderTokenMatched" in the editor is fired and will receive inside the data property of the event object the tokenData with everything you set in your custom list.

Screenshots

autoplaceholder

3,979 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.1.4

DownloadRelease notes

small fix in keyup function

Easy Image

The plugin lets you insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. All this with virtually zero server setup. It introduces a new type of a captioned image widget that has the following capabilities:

  • It allows for uploading images to CKEditor Cloud Services with a customizable upload progress indication.
  • It allows for adding image captions.
  • It supports drag and drop for changing the image position.
  • It provides image alignment options through the balloon toolbar attached to the widget as well as the context menu.
  • It allows for applying custom styles to the image.
  • It allows for changing alternative text for the image.

Screenshots

easyimage

18,343 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.11 4.10 4.9

Version: 4.11.4

DownloadRelease notes

The fourth bug fixing release for CKEditor 4.11.

Version: 4.10.1

DownloadRelease notes

The first bug-fixing release for release for CKEditor 4.10.

Version: 4.9.2

DownloadRelease notes

The second bug fixing release after the CKEditor 4.9 major release.

Video

A CKEditor plugin to insert HTML5 video

Screenshots

video

10,725 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.2

DownloadRelease notes

Fixed undefined CKEDITOR.lang.en.fakeobjects.video
Twitter Facebook Facebook Instagram Medium Google+ GitHub Arrow down Phone Menu Close icon Check