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###

• Remove jQuery as dependency (WIP: different branch)
• Refactor grunt setup
• Support for more elements
• IE/safari support
• Test cases
• Docs
• Side comments

###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