Question

我正在使用angular 2 webpack（使用CLI），我使用ngx-quill插件

我已经开始创建我自己的主题：

import extend from 'extend';
import Emitter from 'quill/core/emitter';
import BaseTheme, {
    BaseTooltip
} from 'quill/themes/base';
import {
    Range
} from 'quill/core/selection';
import * as Quill from 'quill';

const TOOLBAR_CONFIG = [
    [{
        header: ['1', '2', '3', false]
    }],
    ['bold', 'italic', 'underline', 'link'],
    [{
        list: 'ordered'
    }, {
        list: 'bullet'
    }],
    ['clean']
];

class SortieSportTheme extends BaseTheme {
    constructor(quill, options) {
        if (options.modules.toolbar != null && options.modules.toolbar.container == null) {
            options.modules.toolbar.container = TOOLBAR_CONFIG;
        }
        super(quill, options);
        this.quill.container.classList.add('ql-snow');
    }

    extendToolbar(toolbar) {
        toolbar.container.classList.add('ql-snow');
        var icons = Quill.import('ui/icons');
        this.buildButtons([].slice.call(toolbar.container.querySelectorAll('button')), icons);
        this.buildPickers([].slice.call(toolbar.container.querySelectorAll('select')), icons);

        this.tooltip = new SortieSportTooltip(this.quill, this.options.bounds);
        if (toolbar.container.querySelector('.ql-link')) {
            this.quill.keyboard.addBinding({
                key: 'K',
                shortKey: true
            }, function(range, context) {
                toolbar.handlers['link'].call(toolbar, !context.format.link);
            });
        }
    }
}
SortieSportTheme.DEFAULTS = extend(true, {}, BaseTheme.DEFAULTS, {
    modules: {
        toolbar: {
            handlers: {
                link: function(value) {
                    if (value) {
                        let range = this.quill.getSelection();
                        if (range == null || range.length == 0) return;
                        let preview = this.quill.getText(range);
                        if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf('mailto:') !== 0) {
                            preview = 'mailto:' + preview;
                        }
                        let tooltip = this.quill.theme.tooltip;
                        tooltip.edit('link', preview);
                    } else {
                        this.quill.format('link', false);
                    }
                }
            }
        }
    }
});


class SortieSportTooltip extends BaseTooltip {
    constructor(quill, bounds) {
        super(quill, bounds);
        this.preview = this.root.querySelector('a.ql-preview');
    }

    listen() {
        super.listen();
        this.root.querySelector('a.ql-action').addEventListener('click', (event) => {
            if (this.root.classList.contains('ql-editing')) {
                this.save();
            } else {
                this.edit('link', this.preview.textContent);
            }
            event.preventDefault();
        });
        this.root.querySelector('a.ql-remove').addEventListener('click', (event) => {
            if (this.linkRange != null) {
                let range = this.linkRange;
                this.restoreFocus();
                this.quill.formatText(range, 'link', false, Emitter.sources.USER);
                delete this.linkRange;
            }
            event.preventDefault();
            this.hide();
        });
        this.quill.on(Emitter.events.SELECTION_CHANGE, (range, oldRange, source) => {
            if (range == null) return;
            if (range.length === 0 && source === Emitter.sources.USER) {
                let LinkBlot = Quill.import('formats/link');
                let [link, offset] = this.quill.scroll.descendant(LinkBlot, range.index);
                if (link != null) {
                    this.linkRange = new Range(range.index - offset, link.length());
                    let preview = LinkBlot.formats(link.domNode);
                    this.preview.textContent = preview;
                    this.preview.setAttribute('href', preview);
                    this.show();
                    this.position(this.quill.getBounds(this.linkRange));
                    return;
                }
            } else {
                delete this.linkRange;
            }
            this.hide();
        });
    }

    show() {
        super.show();
        this.root.removeAttribute('data-mode');
    }
}
SortieSportTooltip.TEMPLATE = [
    '<a class="ql-preview" target="_blank" href="about:blank"></a>',
    '<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">',
    '<a class="ql-action"></a>',
    '<a class="ql-remove"></a>'
].join('');


export default SortieSportTheme;

我使用quill register来使用我的主题：

import SortieSportTheme from "app/sortiesport/common/quill/theme"; 
import * as Quill from 'quill';

constructor(
    Quill.register('themes/sortiesport', SortieSportTheme);
)

并在视野中：

<quill-editor #editor theme="sortiesport"></quill-editor>

它的作品，但我有一个奇怪的行为与下拉图标：

你有什么想法为什么我的自定义主题（基于SnowTheme）有这个问题。如果我从quill-editor中删除了theme =“sortiesport”，那么一切正常。

你认为我必须在.angular-cli.json文件中添加一些内容吗？自定义主题可以在项目的任何文件夹中吗？

.angular-cli.json：

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "barcelona"
  },
  "apps": [{
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico",
      "upload.php",
       {
         "glob": "**/*",
         "input": "../node_modules/monaco-editor/min/vs",
         "output": "assets/monaco/vs/"
       }
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
      "../node_modules/font-awesome/css/font-awesome.min.css",
      "../node_modules/fullcalendar/dist/fullcalendar.min.css",
      "../node_modules/quill/dist/quill.core.css",
      "../node_modules/quill/dist/quill.snow.css",
      "../node_modules/nanoscroller/bin/css/nanoscroller.css",
      "../node_modules/primeng/resources/primeng.min.css",
      "../node_modules/dragula/dist/dragula.css",
      "styles.scss"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js",
      "assets/layout/js/ripple.js",
      "assets/layout/js/day-schedule-selector.js",
      "../node_modules/moment/moment.js",
      "../node_modules/chart.js/dist/Chart.js",
      "../node_modules/fullcalendar/dist/fullcalendar.js",
      "../node_modules/fullcalendar/dist/locale/fr.js",
      "../node_modules/quill/dist/quill.js"
    ],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [{
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

自定义套管主题中的下拉图标无法正确显示

0 个答案: