jQuery & jQuery UI Plugin For Html Content Editing - Momonga.js

File Size: 7.46 KB
Views Total: 3766
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery & jQuery UI Plugin For Html Content Editing - Momonga.js

Momonga.js is a lightweight jQuery visual page editor plugin that makes your html content and content sections editable, draggable, sortable, duplicatable and deletable. Great for use in CMS or Blog system that allows the user to edit content and web layout easily and quickly.

Dependencies:

  • jQuery
  • jQuery UI for sortable and drag and drop.
  • CKEditor for content editing.

See also:

How to use it:

1. Load jQuery library and other required resources in the html document.

<link rel="stylesheet" href="/path/to/jquery-ui.css">
  ...
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-ui.js"></script>
<script src="/path/to/ckeditor.js"></script>
<script src="/path/to/ckeditor/adapters/jquery.js"></script>

2. Download and include the jQuery Momonga.js plugin's JavaScript and CSS in the document.

<link rel="stylesheet" href="css/momonga.css">
<script src="src/jquery.momonga.js"></script>

3. Add the CSS class 'momongaSortable' and 'momongaItem' to html content like this:

<div class="momongaSortable">
  <div class="momongaItem">
    ...
  </div>
</div>

4. Initialize the plugin and done.

$('.momongaSortable').momonga();

5. Possible plugin options.

$('.momongaSortable').momonga({
  connectionClass: 'momongaConnected',
  placeholder: 'momongaPlaceholder',
  handler: '.momongaDragHandle',
  cursor: 'move'
});

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