Editors - CKEditor

Plugin Information

The best web text editor for everyone.

Plugin Name: CKEditor
Author: Frederico Knabben
License: MIT licensed
Website: http://ckeditor.com/
Git Branch: ckeditor/ckeditor5-core
Dependencies:
None Required
<script src="vendor/plugins/ckeditor/ckeditor.js"></script>

Basic Editor

Copy 

<textarea id="ckeditor-basic" name="ckeditor-basic" rows="6">
This is a basic <b>Ckeditor</b> Instance...
</textarea>
Copy 

// Init Ckeditor
CKEDITOR.replace('ckeditor-basic', {
    height: 210,
    on: {
        instanceReady: function(evt) {
            $('.cke').addClass('admin-skin cke-hide-bottom');
        }
    },
});

Inline Editor

Edit in Real Time - Inline Editor!

Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.

Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum nisl nulla sem in metus. Maecenas wisi. Donec nec erat volutpat.

Copy 

<div id="ckeditor-inline" contenteditable="true">
    <p> Editable Inline Text Here... </p>
</div>
Copy 

// Init Inline Ckeditor
CKEDITOR.inline('ckeditor-inline');

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://docs.cksource.com/
Advanced Examples: http://ckeditor.com/demo

Editors - Summernote

Plugin Information

A Super Simple WYSIWYG Editor for Bootstrap.

Plugin Name: Summernote
Author: Multiple
License: MIT licensed
Website: http://summernote.org
Git Branch: summernote/summernote
Dependencies:
<link href="vendor/plugins/summernote/summernote.css" rel="stylesheet" type="text/css">
<link href="vendor/plugins/summernote/summernote-bs3.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/summernote/summernote.min.js"></script>

Basic Editor

This is the Summernote Editor...
Copy 

<div class="summernote" style="height: 250px;">This is the <b>Summernote</b> Editor...</div>
Copy 

// Init Summernote
$('.summernote').summernote({
    height: 255, //set editable area's height
    focus: false, //set focus editable area after Initialize summernote
    oninit: function() {},
    onChange: function(contents, $editable) {},
});

Inline Editor

Highlighting a section of text will bring up the editor toolbar./p>

Highlight this text to Inline Edit!

Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.

Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum nisl nulla sem in metus. Maecenas wisi. Donec nec erat volutpat.

Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.

Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.

Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.

Copy 

<div class="summernote-inline">
	<p>Editable Inline Text Here...</p>
</div>
Copy 

// Init Inline Summernote
$('.summernote-inline').summernote({
    airMode: true,
    focus: false //set focus editable area after Initialize summernote            
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://summernote.org/jsduck/
Advanced Examples: http://summernote.org/#/example

Editors - Markitup

Plugin Information

A universal markup jQuery editor.

Plugin Name: Markitup
Author: Jay Salvat
License: MIT licensed
Website: http://markitup.jaysalvat.com
Git Branch: markitup/1.x
Dependencies:
<link href="vendor/plugins/markitup/skins/simple/style.css" rel="stylesheet" type="text/css">
<link href="vendor/plugins/markitup/sets/default/style.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/markitup/jquery.markitup.js"></script>
<script src="vendor/plugins/markitup/sets/default/set.js"></script>

Method 1: From an HTML element

Copy 

<form>
	<textarea id="markitup" name="content" rows="10"> This is the MarkItUp Editor...</textarea>
</form>
Copy 

// Init Markitup Editor
$("#markitup").markItUp(mySettings);

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://markitup.jaysalvat.com/documentation/
Advanced Examples: http://markitup.jaysalvat.com/examples/

Editors - XEditable

Plugin Information

In-place editing for use with Twitters Bootstrap 3

Plugin Name: XEditable
Author: Vitaliy Potapov
License: MIT licensed
Website: http://vitalets.github.io
Git Branch: vitalets/x-editable
Dependencies:
<link href="vendor/plugins/xeditable/css/bootstrap-editable.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/moment/moment.min.js"></script> <script src="vendor/plugins/xeditable/js/bootstrap-editable.min.js"></script>
XEditable has many addons, check official documentation for detailed usage of what's required

Basic XEditable

Editable Field
Copy 

<a href="#" id="xedit-basic" data-type="text" data-pk="1" data-title="Editable Data" class="editable editable-click">Basic Editable Field</a>
Copy 

// Init Basic XEdit
$('#xedit-basic').editable({
    type: 'text',
    pk: 1,
    name: 'editable',
    title: 'Editable Data'
});

Inline XEditable

Inline Editable Field
Copy 

<a href="#" id="xedit-inline" data-type="text" data-pk="1" data-title="Editable Data" class="editable editable-click">Inline Editable Field</a>
Copy 

// Init Basic XEdit
$('#xedit-basic').editable({
    type: 'text',
    mode: 'inline',
    pk: 1,
    name: 'editable',
    title: 'Editable Data'
});

Textarea XEditable

Inline Editable Field
Copy 

<a href="#" id="xedit-textarea" data-type="textarea" data-pk="3" data-title="Editable Data" class="editable editable-click">Inline Editable Field</a>
Copy 

// Init Textarea XEdit
$('#xedit-basic').editable({
    type: 'textarea',
    pk: 1,
    name: 'editable',
    title: 'Editable Data'
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://vitalets.github.io/x-editable/docs.html
Advanced Examples: http://vitalets.github.io/x-editable/demo-bs3.html
Return to Top