JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
Smalleditor is small WYSIWYG editor with delta save, inspired by MediumEditor
Source: github.com
1. INCLUDE CSS AND JS FILES
<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>
2. HTML
Use smalleditor directive
<div smalleditor></div>
3. ADVANCED
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);
});
}]);
