Get new jQuery plugins just once a week



September 12, 2014

smalleditor is a jQuery plugin to create a small WYSIWYG editor with delta save, inspired by Medium.

Created by Jaynti Kanani



smalleditor jQuery plugin

WYSIWYG editor


Small WYSIWYG editor with delta save

Inspired by Medium and MediumEditor.

Smalleditor uses model to save document - which makes autosaving, revisions and paragraph/word comments very easy to implement. If you are interested in its internals, read this -

For future developement please refer TODO section. If you need collaborative editor - I would suggest you to use quilljs.



Check out a sweet demo of smalleditor here:

How to use

Install using bower

bower install smalleditor

Include js and css

Dependencies: jQuery and angular.js

<link rel="stylesheet" href="bower_components/smalleditor/dist/css/smalleditor.css" type="text/css" media="screen" charset="utf-8">
<script src="bower_components/smalleditor/dist/js/smalleditor.min.js" type="text/javascript" charset="utf-8"></script>

Use smalleditor directive

<div smalleditor>



Add buttons attribute:

<div smalleditor buttons="b,i,u,h1,h2,blockquote">

Icon theme

<div smalleditor buttons="b,i,u,h1,h2,blockquote" icontheme='bootstrap'>

Smalleditor APIs

Use api attribute in directive:

<div smalleditor api='editorApi' ng-controller='EditorController'>

In controller use that API to control revisions:

angular.module('smalleditorDemo', ['ngRoute', 'smalleditor'])
.controller('EditorController', ['$scope', function($scope) {
  $scope.$watch('editorApi', function(editor) {
    // Get current data model
    var baseDataModel = editor.dataModel();

    // After editing for a while get new data model
    var currentDataModel = editor.dataModel();

    // Compute delta between baseDataModel and currentDataModel
    var delta = editor.computeDelta(baseDataModel, currentDataModel);

    // Apply that delta to any revision to get next revision
    editor.applyDelta(nRevision, nDelta);


Bind smalleditor model to div

//  Usage:
//       <div ng-model="story.content" smalleditor-bind></div>
angular.module('smalleditor').directive('smalleditorBind', [
  function(SmalleditorCore) {
    return {
      restrict: 'A',
      require: '?ngModel',
      link: function(scope, element, attrs, ngModel) {
        // Do nothing if no ng-model
        if(!ngModel) return;
        // Specify how UI should be updated
        ngModel.$render = function() {
          // Generate HTML from model and add it to element
          element.html(SmalleditorCore.generateHTMLFromModel(ngModel.$viewValue) || "");




Related posts:

simple Pagination
smalleditor jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas