AngularJs 如何从控制器访问 ng-Quill 实例以更改工具栏
How to access ng-Quill instance from controller to change toolbar in AngularJs
我需要使用 angular 更改 quill.Js 的工具栏,我尝试使用 <ng-quill-toolbar></ng-quill-toolbar>
但是它没有按预期工作并且在多个编辑器上它导致错误,是否有一种可以使用 quill.Js 文档中给出的选项使用 angular
更改它的方法
https://quilljs.com/docs/configuration/
模块配置
(function() {
'use strict';
angular
.module('app')
.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
ngQuillConfigProvider.set();
}]);
})();
控制器
(function () {
'use strict';
angular
.module('app')
.controller('Ctrl', Ctrl);
function Ctrl($document) {
var doc = $document[0];
var container = doc.getElementsByClassName('editor');
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['clean'] // remove formatting button
];
var options = {
debug: 'info',
modules: {
toolbar: toolbarOptions
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
var editor = new Quill(container, options); //this instance is not initializing
}
})();
HTML
<ng-quill-editor name="description"
required theme="snow"
placeholder="Enter your question here"
ng-model="vm.QUES"
class="editor">
</ng-quill-editor>
Error: var editor = new Quill(container, options); //this instance is not initializing
最近我遇到了同样的问题,然后我浏览了 here.
的 ng-quill 文档
还要检查这里的问题 How to configure toolbar items?
有了这个组件,我们有两个自定义选项
- 使用 HTML 元素添加
<ng-quill-toolbar>
- 使用
ngQuillConfigProvider.set()
设置配置
- 使用
ng-quill-editor
组件的 modules
属性
1.Using HTML元素加入<ng-quill-toolbar>
请检查示例here。
2.Using ngQuillConfigProvider
我使用了以下代码来自定义编辑器
.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
var config = {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link', 'image'] // link and image, video
]
},
theme: 'snow',
placeholder: 'Insert text here ...'
}
ngQuillConfigProvider.set(config);
}]);
3.Using ng-quill-editor 组件的模块属性
在控制器中添加你的 editorModules
$scope.editorModules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
//['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
//[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
//[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
//[{ 'font': [] }],
[{ 'align': [] }],
//['clean'], // remove formatting button
['link', 'image'] // link and image, video
]
}
并将其添加到视图中,如下所示
<ng-quill-editor modules="editorModules"
placeholder="Some text here"
ng-model="message">
</ng-quill-editor>
希望这对某人有所帮助!!
如果您仍然希望编辑器实例访问 API 或用于其他用途,您可以
使用 onEditorCreated
回调或任何其他可用的回调:
availables callbacks/outputs
示例:
在视图中:
<ng-quill-editor ng-model="text" on-editor-created="onEditorCreated(editor)"></ng-quill-editor>
在控制器中:
$scope.onEditorCreated = function (editor) {
$scope.editor = editor;
};
我需要使用 angular 更改 quill.Js 的工具栏,我尝试使用 <ng-quill-toolbar></ng-quill-toolbar>
但是它没有按预期工作并且在多个编辑器上它导致错误,是否有一种可以使用 quill.Js 文档中给出的选项使用 angular
https://quilljs.com/docs/configuration/
模块配置
(function() {
'use strict';
angular
.module('app')
.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
ngQuillConfigProvider.set();
}]);
})();
控制器
(function () {
'use strict';
angular
.module('app')
.controller('Ctrl', Ctrl);
function Ctrl($document) {
var doc = $document[0];
var container = doc.getElementsByClassName('editor');
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['clean'] // remove formatting button
];
var options = {
debug: 'info',
modules: {
toolbar: toolbarOptions
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
var editor = new Quill(container, options); //this instance is not initializing
}
})();
HTML
<ng-quill-editor name="description"
required theme="snow"
placeholder="Enter your question here"
ng-model="vm.QUES"
class="editor">
</ng-quill-editor>
Error: var editor = new Quill(container, options); //this instance is not initializing
最近我遇到了同样的问题,然后我浏览了 here.
的 ng-quill 文档还要检查这里的问题 How to configure toolbar items?
有了这个组件,我们有两个自定义选项
- 使用 HTML 元素添加
<ng-quill-toolbar>
- 使用
ngQuillConfigProvider.set()
设置配置
- 使用
ng-quill-editor
组件的modules
属性
1.Using HTML元素加入<ng-quill-toolbar>
请检查示例here。
2.Using ngQuillConfigProvider
我使用了以下代码来自定义编辑器
.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
var config = {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link', 'image'] // link and image, video
]
},
theme: 'snow',
placeholder: 'Insert text here ...'
}
ngQuillConfigProvider.set(config);
}]);
3.Using ng-quill-editor 组件的模块属性
在控制器中添加你的 editorModules
$scope.editorModules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
//['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
//[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
//[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
//[{ 'font': [] }],
[{ 'align': [] }],
//['clean'], // remove formatting button
['link', 'image'] // link and image, video
]
}
并将其添加到视图中,如下所示
<ng-quill-editor modules="editorModules"
placeholder="Some text here"
ng-model="message">
</ng-quill-editor>
希望这对某人有所帮助!!
如果您仍然希望编辑器实例访问 API 或用于其他用途,您可以
使用 onEditorCreated
回调或任何其他可用的回调:
availables callbacks/outputs
示例:
在视图中:
<ng-quill-editor ng-model="text" on-editor-created="onEditorCreated(editor)"></ng-quill-editor>
在控制器中:
$scope.onEditorCreated = function (editor) {
$scope.editor = editor;
};