(нг) проблема с иглой: выбранное значение семейства / размера шрифта не отображается в ql-picker-label - PullRequest
0 голосов
/ 13 января 2019

Мы добавили компонент ng-quill в нашу сборку веб-приложения с помощью angularjs. Используя приведенный ниже код, мой разработчик попытался настроить набор шрифтов и размер шрифта на панели инструментов. Пока он работает, но выбранное значение раскрывающихся опций не отображается после выбора. «Sans Serif» и «Normal» продолжают отображаться.

Вот код:

    (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; }

Он сдался, а я не смог найти ошибку.

1 Ответ

0 голосов
/ 16 марта 2019

У Quill есть пример использования пользовательских шрифтов: https://quilljs.com/playground/#custom-fonts

Вы можете добавить нестандартные размеры таким же образом.

...