jQuery Based Content Editor and Layout Builder - KEditor

jQuery Based Content Editor and Layout Builder - KEditor
File Size: 6.69 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

KEditor is a simple yet robust jQuery plugin which provides inline content editing and drag'n'drop content building for your website.


  • Html content editing with CKEditor.
  • Builds html content with the use of jQuery UI sortable and drag & drop functionality.
  • Predefined html content snippets.

More Examples:

See also:

Basic usage:

1. Include the necessary jQuery, jQuery UI and CKEditor into your html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/ckeditor.js"></script>
<script src="/path/to/ckeditor/adapters/jquery.js"></script>

2. Include the Font Awesome for toolbar icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

3. Include the jQuery KEditor plugin's files after jQuery library.

<link rel="stylesheet" href="dist/css/keditor-1.0.1.css">
<script src="dist/js/keditor-1.0.1.min.js"></script>

4. Initialize the plugin with default settings.


5. Default plugin settings.

  btnMoveContainerText: '<i class="fa fa-sort"></i>',
  btnMoveComponentText: '<i class="fa fa-arrows"></i>',
  btnSettingContainerText: '<i class="fa fa-cog"></i>',
  btnSettingComponentText: '<i class="fa fa-cog"></i>',
  btnDuplicateContainerText: '<i class="fa fa-files-o"></i>',
  btnDuplicateComponentText: '<i class="fa fa-files-o"></i>',
  btnDeleteContainerText: '<i class="fa fa-times"></i>',
  btnDeleteComponentText: '<i class="fa fa-times"></i>',
  defaultComponentType: 'text',
  snippetsUrl: 'snippets/default/snippets.html',
  snippetsListId: 'keditor-snippets-list',
  onInitContentArea: function (contentArea) {
  onContentChanged: function (event) {
  onInitContainer: function (container) {
  onBeforeContainerDeleted: function (event, selectedContainer) {
  onContainerDeleted: function (event, selectedContainer) {
  onContainerChanged: function (event, changedContainer) {
  onContainerDuplicated: function (event, originalContainer, newContainer) {
  onContainerSelected: function (event, selectedContainer) {
  onContainerSnippetDropped: function (event, newContainer, droppedContainer) {
  onComponentReady: function (component) {
  onInitComponent: function (component) {
  onBeforeComponentDeleted: function (event, selectedComponent) {
  onComponentDeleted: function (event, selectedComponent) {
  onComponentChanged: function (event, changedComponent) {
  onComponentDuplicated: function (event, originalComponent, newComponent) {
  onComponentSelected: function (event, selectedComponent) {
  onComponentSnippetDropped: function (event, newComponent, droppedComponent) {

Change log:



  • v1.1.6


  • Enable user to view source in example


  • v1.1.5


  • Improve iframeMode


  • 1.1.4-final


  • fixed for touch devices.


  • v1.1.3


  • v1.1.2


  • v1.1.1: Iframe mode for keditor like CKEditor


  • v1.1.0: Fix bug "context for component type is window"


  • Support multiple types of component
  • Bugfixes


  • Update outline styles and fix bug getContent() method remove all class of data-type="container-content"

v1.2.0 (2016-02-02)

  • Fix bug can not drag n drop components between containers
  • Init existing container in content-area

v1.1.0 (2016-01-25)

  • Update sidebar


  • Update context for all callbacks
  • Prevent Default when click on Delete and Duplicate button

v1.0.2 (2016-01-23)

  • added onSectionReady callback


  • bugfix
  • Update selected css
  • user-select: none for snippet and snippet preview is displayed as block


This awesome jQuery plugin is developed by Kademi. For more Advanced Usages, please check the demo page or visit the official website.