N1ED block by block content builder (+ file manager, image editor)

N1ED is free addon for CKEditor, transforming it into modern block-by-block page builder with many widgets, templates and mobile support.

You can add blocks to your content from the gallery, insert grid (column) mockups and also define your custom blocks for reusing (N1ED will create screenshots of them for your block collection automatically!).

Mobile devices simulation is essential built in feature required to create correct webpages. Semantic breadcrumbs are irreplaceable when editing complex content with lots of nested elements as they allow to quickly select any given widget or an HTML element.

Flmngr File Manager is embedded into N1ED so you will get simple toolset to work with media: from uploading files and images to managing them and editing using also Image Editor.

N1ED powers up your standard CKEditor with a lot of widgets that cover almost any task you may have: find and embed YouTube videos, insert image galleries and slideshows with Bootstrap carousel, styled alerts, budges, tabs and accordions, Font Awesome icons, and also basic components such are tables, links, buttons, etc.. You can also create your own widget templetes right in the editor.

Screenshots

N1ED-editor

2,588 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 2023.8.1

DownloadRelease notes

Debug version info added

Bootstrap 3 Editor

Create responsive content in CKEditor like a pro thanks to this powerful content editor based on the native Bootstrap Grid-system. Manage all standard Bootstrap elements like containers, columns and rows in a simple visual way to create any responsive layout of the web page in minutes, completely without code editing.

To make sure the responsive content looks correctly on different devices, use the “on the fly” preview. And thanks to the File Uploader plugin tightly integrated into Bootstrap Editor you can add images to the page in one click.

Bootstrap 3 Editor is absolutely compatible with Foundation and can work in the Foundation-compatibility mode.

If you use Bootstrap 4, we recommend using Bootstrap 4 Editor instead.

Screenshots

API

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

Demo

api

4,139 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 2.11

DownloadRelease notes

Adjust origin check

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

browser

1,267 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 2.10

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

3,025 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

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

6,766 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

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

 

mediabrowser

2,737 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 2.10

DownloadRelease notes

Technical release

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

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

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

8,705 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.2.4

DownloadRelease notes

Ensure upcasting has only plain text content to avoid error with only space content

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