Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Small WYSIWYG editor with delta save, inspired by Medium

Topics

Resources

License

Packages

No packages published
You can’t perform that action at this time.