Ng-quill - UNPKG

Trang chủ » Ng Quill » Ng-quill - UNPKG

Có thể bạn quan tâm

4.81 kBHTMLView Raw
1<html>
2 <head>
3 <title>Quill Test</title>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
5 <meta charset="utf-8">
6
7 <!-- Style -->
8 <link rel="stylesheet" href="//cdn.quilljs.com/1.2.0/quill.snow.css">
9 <link rel="stylesheet" href="//cdn.quilljs.com/1.2.0/quill.bubble.css">
10
11 <style>
12 ng-quill-editor.ng-invalid .ql-container {
13 border: 1px dashed red;
14 }
15 </style>
16
17 <!-- Scripts -->
18 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
19 <script>
20 require.config({
21 baseUrl: '.',
22 paths: {
23 'quill': '//cdn.quilljs.com/1.2.0/quill.min',
24 'ng-quill': 'src/ng-quill',
25 'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min'
26 },
27 shim: {
28 'ng-quill': {
29 deps: ['angular', 'quill']
30 }
31 }
32 })
33 </script>
34
35 <script>
36 // require ng-quill it requests its dependencies first
37 require(['ng-quill'], function () {
38 // declare a module and load quillModule
39 var myAppModule = angular.module('quillTest', ['ngQuill'])
40
41 myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
42 ngQuillConfigProvider.set({ placeholder: 'custom placeholder' })
43 }])
44
45 myAppModule.controller('AppCtrl', [
46 '$scope',
47 '$timeout',
48 function ($scope, $timeout) {
49 $scope.title = 'Quill works'
50 $scope.readOnly = false
51 $timeout(function () {
52 $scope.title += ' awsome!!!'
53 }, 2000)
54 $scope.editorCreated = function (editor) {
55 console.log(editor)
56 }
57 $scope.contentChanged = function (editor, html, text, delta, oldDelta, source) {
58 console.log('editor: ', editor, 'html: ', html, 'text:', text, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source)
59 }
60 $scope.selectionChanged = function (editor, range, oldRange, source) {
61 console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source)
62 }
63 }
64 ])
65
66 // Do not forget to bootstrap your app manually!!!
67 angular.bootstrap(document, ['quillTest'])
68 })
69 </script>
70 </head>
71
72 <body ng-controller="AppCtrl">
73 <h3>Default editor + Callbacks/Outputs in JS console</h3>
74 <pre><code>{{title}}</code></pre>
75 <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>
76
77 <h3>Bubble editor</h3>
78 <ng-quill-editor theme="bubble" ng-model="title"></ng-quill-editor>
79
80 <h3>Editor without toolbar + required and ngModule</h3>
81 <button ng-click="readOnly = !readOnly;">toggle readOnly</button>
82 readonly: {{readOnly}}
83 <form name="form">
84 <ng-quill-editor ng-model="title" read-only="readOnly" required="true" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor>
85 form invalid?: {{form.$invalid}}
86 </form>
87
88 <h3>ng-quill - custom toolbar</h3>
89 <ng-quill-editor
90 ng-model="title"
91 >
92 <ng-quill-toolbar>
93 <div id="ng-quill-toolbar">
94 <span class="ql-formats">
95 <button class="ql-bold" ng-attr-title="{{'Bold'}}"></button>
96 </span>
97 <span class="ql-formats">
98 <select class="ql-align" ng-attr-title="{{'Aligment'}}">
99 <option selected></option>
100 <option value="center"></option>
101 <option value="right"></option>
102 <option value="justify"></option>
103 </select>
104 <select class="ql-align">
105 <option selected></option>
106 <option value="center"></option>
107 <option value="right"></option>
108 <option value="justify"></option>
109 </select>
110 </span>
111 </div>
112 </ng-quill-toolbar>
113 </ng-quill-editor>
114 </body>
115</html>

Từ khóa » Ng Quill