<html> <head> <title>Quill Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta charset="utf-8"> <!-- Style --> <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css"> <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css"> <style> ng-quill-editor .ql-container { height: 150px; } ng-quill-editor.ng-invalid .ql-container { border: 1px dashed red; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before { content: '14'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before { content: '16'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before { content: '18'; } </style> <!-- Scripts --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular-sanitize.min.js"></script> <script type="text/javascript" src="//cdn.quilljs.com/1.3.6/quill.js"></script> <script type="text/javascript" src="src/ng-quill.js"></script> <script> // declare a module and load quillModule var myAppModule = angular.module('quillTest', ['ngQuill']) myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) { ngQuillConfigProvider.set(null, null, 'custom placeholder') }]) myAppModule.controller('AppCtrl', [ '$scope', '$timeout', function ($scope, $timeout) { $scope.title = 'Quill works' $scope.requiredModel = '' $scope.modelJSONString = JSON.stringify([ { insert: 'Hello ' }, { insert: 'World!', attributes: { bold: true } }, { insert: '\n' } ]) $timeout(function () { $scope.modelJSONString = JSON.stringify([ { insert: 'World!', attributes: { bold: true } }, { insert: '\n' } ]) }, 2000) $scope.model = '' $scope.required = 'required' $scope.modelJSON = { ops: [ { insert: 'Hello ' }, { insert: 'World!', attributes: { bold: true } }, { insert: '\n' } ]} $scope.changeJSON = function () { $scope.modelJSON = $scope.modelJSON ? $scope.modelJSON : { ops: [] } const modelJSON = JSON.parse(JSON.stringify($scope.modelJSON)) modelJSON.ops.unshift({ insert: 'Changed! ' }) $scope.modelJSON = modelJSON } $scope.modelText = 'Hello World' $scope.readOnly = false $scope.test = '' $scope.customOptions = [{ import: 'attributors/style/size', whitelist: ['14', '16', '18', 'small', 'large', 'huge'] }] $scope.customTag = [{ import: 'blots/block', toRegister: {key: 'tagName', value: 'DIV'} }] $scope.customModules = { toolbar: [ [{'size': [false, '14', '16', '18']}] ] } $scope.backgroundColor = 'gray' $timeout(function () { $scope.title += ' awsome!!!' }, 2000) $scope.editorCreated = function (editor) { console.log(editor) } $scope.contentChanged = function (editor, html, text, content, delta, oldDelta, source) { console.log('editor: ', editor, 'html: ', html, 'text:', text, 'content:', content, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source) } $scope.selectionChanged = function (editor, range, oldRange, source) { console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source) } $scope.onFocus = function (editor, source) { console.log('focus: ', editor, 'source:', source) } $scope.onBlur = function (editor, source) { console.log('blur: ', editor, 'source:', source) } } ]) </script> </head> <body ng-app="quillTest" ng-controller="AppCtrl"> <h3>Default editor + PreserveWhitespac + Callbacks/Outputs in JS console + track-changes="all"</h3> <pre><code>{{title}}</code></pre> <ng-quill-editor bounds="self" ng-model="title" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged( editor, html, text, content, delta, oldDelta, source )" on-selection-changed="selectionChanged(editor, range, oldRange, source)" on-focus="onFocus(editor, source)" on-blur="onBlur(editor, source)" preserve-whitespace="true" track-changes="all"></ng-quill-editor> <h3>Default editor + Callbacks/Outputs in JS console and empty init model + Object-Format</h3> <button ng-click="changeJSON()">Change the model!</button> <pre><code>{{modelJSON}}</code></pre> <ng-quill-editor format="object" custom-options="customTag" ng-model="modelJSON" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged( editor, html, text, content, delta, oldDelta, source )" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor> <h3>Bubble editor + Text-format</h3> <pre><code>{{modelText}}</code></pre> <button ng-click="modelText = '';">clear</button> <ng-quill-editor format="text" theme="bubble" ng-model="modelText"></ng-quill-editor> <h3>Bubble editor + JSONString-format</h3> <pre><code>{{modelJSONString}}</code></pre> <ng-quill-editor format="json" theme="bubble" ng-model="modelJSONString"></ng-quill-editor> <h3>Editor without toolbar + min- and max-length and ngModule</h3> <button ng-click="readOnly = !readOnly;">toggle readOnly</button> <button ng-click="placeholder = placeholder ? placeholder + '!' : '!'">toggle placeholder</button> readonly: {{readOnly}} <form name="form"> <ng-quill-editor ng-model="title" placeholder="placeholder" read-only="readOnly" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor> form invalid?: {{form.$invalid}} </form> <h3>Editor without toolbar + required and ngModule</h3> <button ng-click="required = required ? '' : 'required';">toggle required</button> {{ !!required }} <form name="form"> <ng-quill-editor ng-model="requiredModel" required="{{required}}" modules="{toolbar: false}"></ng-quill-editor> form invalid?: {{form.$invalid}} </form> <h3>Set Styles</h3> <button ng-click="backgroundColor = backgroundColor ? '' : 'gray'">toggle Backgroundcolor</button> <ng-quill-editor ng-model="title" styles="{backgroundColor: backgroundColor}"></ng-quill-editor> <h3>ng-quill - custom toolbar (position: bottom)</h3> <ng-quill-editor ng-model="title" placeholder="''" custom-toolbar-position="bottom" > <ng-quill-toolbar> <div id="ng-quill-toolbar"> <span class="ql-formats"> <button class="ql-bold" ng-attr-title="{{'Bold'}}"></button> </span> <span class="ql-formats"> <select class="ql-align" ng-attr-title="{{'Aligment'}}"> <option selected></option> <option value="center"></option> <option value="right"></option> <option value="justify"></option> </select> <select class="ql-align"> <option selected></option> <option value="center"></option> <option value="right"></option> <option value="justify"></option> </select> </span> </div> </ng-quill-toolbar> </ng-quill-editor> <!-- <h3>Custom font sizes</h3> <ng-quill-editor ng-model="title" custom-options="customOptions" modules="customModules"></ng-quill-editor> --> </body> </html>