This repository has been archived by the owner on Aug 20, 2021. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 108
/
demoamd.html
123 lines (112 loc) · 5.06 KB
/
demoamd.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<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.ng-invalid .ql-container {
border: 1px dashed red;
}
ng-quill-editor .ql-container {
height: 150px;
}
</style>
<!-- Scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<script>
require.config({
baseUrl: '.',
paths: {
'quill': '//cdn.quilljs.com/1.3.6/quill.min',
'ng-quill': 'src/ng-quill',
'angular': '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min',
'angular-sanitize': '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-sanitize.min'
},
shim: {
'ng-quill': {
deps: ['angular', 'angular-sanitize', 'quill']
},
'angular-sanitize': {
deps: ['angular']
}
}
})
</script>
<script>
// require ng-quill it requests its dependencies first
require(['ng-quill'], function () {
// declare a module and load quillModule
var myAppModule = angular.module('quillTest', ['ngQuill'])
myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
ngQuillConfigProvider.set({ placeholder: 'custom placeholder' })
}])
myAppModule.controller('AppCtrl', [
'$scope',
'$timeout',
function ($scope, $timeout) {
$scope.title = 'Quill works'
$scope.readOnly = false
$timeout(function () {
$scope.title += ' awsome!!!'
}, 2000)
$scope.editorCreated = function (editor) {
console.log(editor)
}
$scope.contentChanged = function (editor, html, text, delta, oldDelta, source) {
console.log('editor: ', editor, 'html: ', html, 'text:', text, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source)
}
$scope.selectionChanged = function (editor, range, oldRange, source) {
console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source)
}
}
])
// Do not forget to bootstrap your app manually!!!
angular.bootstrap(document, ['quillTest'])
})
</script>
</head>
<body ng-controller="AppCtrl">
<h3>Default editor + Callbacks/Outputs in JS console</h3>
<pre><code>{{title}}</code></pre>
<ng-quill-editor ng-model="title" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
<h3>Bubble editor</h3>
<ng-quill-editor theme="bubble" ng-model="title"></ng-quill-editor>
<h3>Editor without toolbar + required and ngModule</h3>
<button ng-click="readOnly = !readOnly;">toggle readOnly</button>
readonly: {{readOnly}}
<form name="form">
<ng-quill-editor ng-model="title" read-only="readOnly" required="true" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor>
form invalid?: {{form.$invalid}}
</form>
<h3>ng-quill - custom toolbar (position: bottom)</h3>
<ng-quill-editor
ng-model="title"
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>
</body>
</html>