如何在鹅毛笔编辑器工具栏中实现工具提示

Question

我们在 Ionic 4 应用程序中使用 "quill": "1.3.7" 版本的 quill 编辑器。我们需要显示工具栏选项的工具提示。是否可以为工具栏选项启用工具提示。

Answer 1

我尝试提出一个递归函数来循环所有工具提示选项，并根据提供的配置分配这些标题。 以下配置呈现所有鹅毛笔工具栏选项

    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],
        ['link', 'image', 'video', 'formula'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
        [{ '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
    ];

此配置对象映射到我们想要标签的那些键。缺少的映射将使用原始配置中的默认键值。

    const toolbarOptionLabels = {
        'bold': "Bold",
        'italic': "Italic",
        'underline': "Underline",
        'strike': "Strike through",
        'blockquote': "Blockquote",
        'code-block': "Code block",
        'link': "Link",
        'image': "Image",
        'video': "Video",
        'formula': "Formula",
        'header': "Header",
        'list': "List",
        'script': "Script",
        'indent': "Indent",
        'direction': "Text direction",
        'size': "Text size",
        'color': "Text color",
        'background': "Bankground color",
        'font': "Font style",
        'align': "Align text",
        'clean': "Remove all formatting"
    };

只需使用以下函数即可完成剩下的工作

    var setTitle = (menu, group, objIndex = 0) => {
        //if array then probe inside
        if (Array.isArray(menu)) {
            menu.forEach((obj, objIndex) => {
                setTitle(obj, group, objIndex);
            });
        } else {
            //if object then get the properties for labels
            if (typeof menu === 'object') {
                Object.keys(menu).forEach((key) => {
                    var title = `${toolbarOptionLabels[key]} ${menu[key]}`;
                    if (!title) {
                        title = `${key} ${menu[key]}`;
                    }
                    objIndex = Array.isArray(menu[key]) && objIndex > 0 ? 0 : objIndex;//fix background s
                    group.querySelectorAll(`.ql-${key}`)[objIndex].setAttribute('title', title);
                });
            } else {
                //finally assign labels from the properties seperated from the object
                var title = toolbarOptionLabels[menu];
                if (!title) {
                    title = menu;
                }
                group.querySelector(`.ql-${menu}`).setAttribute('title', title);
            }
        }
    }

这就是函数的调用方式

    var groups = document.querySelectorAll('.ql-formats');
    toolbarOptions.forEach((option, index) => {
        setTitle(option, groups[index]);
    });