Question

我们已使用angularjs将ng-quill组件添加到我们的Web应用程序构建中。使用下面的代码，我的开发人员尝试在工具栏中自定义字体系列和字体大小选择器。到目前为止，它已经可以使用，但是选择后不显示下拉选项的选定值。 “无衬线”和“正常”将继续显示。

这里的代码：

    (function () {
'use strict';

 angular
     .module('tu.richtext.editor', ['ngQuill'])
         .constant('NG_QUILL_CONFIG', {
             modules:   {
                 toolbar: [
                     ['bold', 'italic', 'underline', 'strike'],
                     ['blockquote', 'code-block', 'link'],
                     [{ 'header': 1 }, { 'header': 2 }],
                     [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                     [{ 'script': 'sub' }, { 'script': 'super' }],
                     [{ 'indent': '-1' }, { 'indent': '+1' }],
                     [{ 'direction': 'rtl' }],
                     [{ 'size': [false, '14px', '16px', '18px', '20px'] }],
                     [{ 'header': [1, 2, 3, 4, 5, false] }],
                     [{ 'color': [] }, { 'background': [] }],
                     [{ 'font': ['sans-serif', 'times-new-roman', 'roboto', 'lato', 'oswald', 'montserrat', 'raleway', 'lora', 'nunito', 'prompt'] }],
                     [{ 'align': [] }],
                     ['clean'],
                     ['link', 'image', 'video']
                 ]
             },
             theme: 'snow',
             placeholder: '',
             readonly: false,
             bounds: document.body
         })
         .config(function(ngQuillConfigProvider, NG_QUILL_CONFIG) {
             ngQuillConfigProvider.set(NG_QUILL_CONFIG);
             // ngQuillConfigProvider.set(null, null, 'custom placeholder');
         })
         .component('tuRichtextEditor', {
             bindings: {
                 ngModel: '=',
                 required: '<',
                 format: '<'
             },
             controller: RichtextEditorCtrl,
             controllerAs: '$ctrl',
             templateUrl: 'app-commons/components/tu-richtext-editor/tuRichText.tpl.html'
         });

 function RichtextEditorCtrl($scope, $timeout, $sce) {

     var ctrl = this;
     ctrl.loadComplete = false;

     ctrl.customOptions = [{
         import: 'attributors/style/size',
         whitelist: [false, '14px', '16px', '18px', '20px']
     }, {
         import: 'attributors/class/font',
         whitelist: ['sans-serif', 'times-new-roman', 'roboto', 'lato', 'oswald', 'montserrat', 'raleway', 'lora', 'nunito', 'prompt']
     }];

     $scope.customModules = {
         toolbar: [
             [{'size': [false, '14', '16', '18', '20']}]
         ]
     };

     ctrl.$onInit = function () {
         // console.log(Quill);
         // console.log(ctrl.ngModel);

         ctrl.readOnly = false;
         ctrl.required = ctrl.required? 'required' : '';

         registerDelegates();
     };

     function registerDelegates() {
         ctrl.editorCreated = function (editor) {
             console.log(editor);
             console.log(editor.editor);
         };

         ctrl.contentChanged = function (editor, html, text, content, delta, oldDelta, source) {
             ctrl.ngModel = html;
         };

         ctrl.selectionChanged = function (editor, range, oldRange, source) {
             console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source);
         };

         ctrl.loadComplete = true;
     }
 }})();

关于这些示例，css类也进行了更改：

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before  {content: '14'; font-size: 14px !important;}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before {content: 'Roboto'; font-family: 'Roboto', sans-serif !important; }

他现在已经放弃了，而我却找不到错误。

Answer 1

Quill有一个有关如何使用自定义字体的示例： https://quilljs.com/playground/#custom-fonts

您可以以相同的方式添加自定义尺寸。

（ng）笔芯问题：自定义字体系列/大小的选定值未显示在ql-picker-label中

1 个答案: