Ng-quill Doesn't Block Textarea Of Quill Editor When ReadOnly Flag ...

Trang chủ » Ng Quill » Ng-quill Doesn't Block Textarea Of Quill Editor When ReadOnly Flag ...

Có thể bạn quan tâm

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link data-require="quill@*" data-semver="1.3.6" rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css" /> <script data-require="quill@*" data-semver="1.3.6" src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <link data-require="angular.js@1.7.8" data-semver="1.7.8" rel="stylesheet" href="https://code.angularjs.org/1.7.8/angular-csp.css" /> <script data-require="angular.js@1.7.8" data-semver="1.7.8" src="https://code.angularjs.org/1.7.8/angular.min.js"></script> <script data-require="angular.js@1.7.8" data-semver="1.7.8" src="https://code.angularjs.org/1.7.8/angular-sanitize.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ng-quill/4.4.0/ng-quill.js"></script> <script src="app.js"></script> </head> <body ng-app="quillReadOnlyExample"> <quill-read-only-test></quill-read-only-test> </body> </html> (function(angular) { 'use strict'; angular.module('quillReadOnlyExample', ['ngQuill', 'ngSanitize']) .component('quillReadOnlyTest', { controller: 'QuillReadOnlyTestController', controllerAs: 'vm', templateUrl: 'quill-read-only-test.html' }) .controller('QuillReadOnlyTestController', ['$scope', function($scope) { var vm = this; vm.$onInit = function() { console.log('Controller inited!'); vm.readOnly = false; vm.getPlaceholder = getPlaceholder; vm.text = ''; vm.onQuillCreated = onQuillCreated; $scope.$watch('doesntMatterWhat', function() { vm.readOnly = true; console.log('Flag changed!') }) } function getPlaceholder() { if (vm.readOnly) { return 'You can only read'; } else { return 'You can read and write'; } } function onQuillCreated(quillInstance) { console.log('Quill created!'); } }]); })(window.angular); <ng-quill-editor format="text" on-editor-created="vm.onQuillCreated(editor)" placeholder="vm.getPlaceholder()" read-only="vm.readOnly" ng-model="vm.text"></ng-quill-editor> <div> <span>Read only:</span> <span ng-bind="vm.readOnly"></span> </div> <div ng-if="vm.readOnly" style="color: red">You should not be able to write!</div> <div ng-if="!vm.readOnly" style="color: green">You can write</div> <button ng-click="vm.readOnly = !vm.readOnly">Change flag</button>

Từ khóa » Ng Quill