ng-quill
Version:
Angular component for the Quill Rich Text Editor
204 lines (185 loc) • 9.31 kB
HTML
<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>