Get new jQuery plugins just once a week

×

smalleditor

September 12, 2014

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

Created by Jaynti Kanani

Download

Example

smalleditor jQuery plugin

WYSIWYG editor

Smalleditor

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 - https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480

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

TODO

Demo

Check out a sweet demo of smalleditor here: http://jdkanani.github.io/smalleditor

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>
</div>

Docs

Buttons

Add buttons attribute:

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

Icon theme

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

Smalleditor APIs

Use api attribute in directive:

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

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);
  });
}]);

Utility

Bind smalleditor model to div

//
//  Usage:
//
//       <div ng-model="story.content" smalleditor-bind></div>
//
//
angular.module('smalleditor').directive('smalleditorBind', [
  'SmalleditorCore',
  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) || "");
        }
      }
    }
  }
]);

LICENSE

MIT

smalleditor

Related posts:

Amplify JS
Mason js
Grid Manager
smalleditor jQuery plugin

http://jquer.in/wp-content/uploads/2014/09/smalleditor.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever