jdkanani / Smalleditor
Programming Languages
Projects that are alternatives of or similar to Smalleditor
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