Small WYSIWYG editor with delta save, inspired by Medium
JavaScript CSS
Latest commit 5cc08f5 Oct 14, 2014 @jdkanani Upgrade angular to v1.3.0
Permalink
Failed to load latest commit information.
dist
public
src
views
.gitignore
.nojekyll
Gruntfile.js
LICENSE.md
README.md
bower.json
index.html
package.json

README.md

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