如何在 Quilljs 2.0.* 中使用寄存器而不是格式？

Question

在quill 1.x中，我们可以使用formats来配置需要的格式：

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: false
  },
  placeholder: 'Compose an epic...',
  formats: ['bold', 'italic', 'link', 'strike', 'script', 'underline'],
  theme: 'snow'  // or 'bubble'
});

但是，quill 2.0 删除了格式

upgrading-to-2-0.md: 格式被移除 - 注册表现在更加强大和安全。

如何使用寄存器而不是格式？

Answer 1

根据this issue的说法，quill 2的formats问题依旧悬而未决，好像没有人跟进。

根据this issue，没有办法取消注册特定的注册表。唯一的方法是覆盖它们，但是当我尝试为ScrollBlot 为空且无法成功初始化的选项提供新的Registry 时出现错误。

为了能够禁用格式化，您可以做的唯一方法是扩展格式化类并再次注册它以覆盖默认行为。

禁用粗体

const Bold = Quill.import('formats/bold');

// extends format class (Bold) to override its methods
class CustomBold extends Bold {
   // override: return false to avoid formatting again
   static formats() { return false; }
   // override: empty content to avoid bolt name replacement
   optimize(context) { }
}
// remove all tag names (strong, b)
CustomBold.tagName = [];

// register the new custom bold formatting
Quill.register({ 'formats/bold': CustomBold })

包含所有格式的完整版

<!DOCTYPE html>

<html>

<head>
    <link href="https://cdn.quilljs.com/2.0.0-dev.4/quill.snow.css" rel="stylesheet">
    
    <style>
        #editor-container {
            width: 100%;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
   
    <div id="editor-container">
        <div id="editor">
            <p>
                He has since been seeking advice from specialists, including Serbian doctor Zdenko Milinkovic, who said
                Djokovic is suffering
                from a "bruised bone due to excessive playing".
            </p>
        </div>
    </div>

    <script src="https://cdn.quilljs.com/2.0.0-dev.4/quill.js"></script>
    <script>
        const Bold = Quill.import('formats/bold');
        const Italic = Quill.import('formats/italic');
        const Link = Quill.import('formats/link');
        const Script = Quill.import('formats/script');
        const Strike = Quill.import('formats/strike');
        const Underline = Quill.import('formats/underline');

        // Bold
        // extends format class (Bold) to override its methods
        class CustomBold extends Bold {
            // override: return false to avoid formatting again
            static formats() { return false; }
            // override: empty content to avoid bolt name replacement
            optimize(context) { }
        }
        // remove all tag names (strong, b)
        CustomBold.tagName = [];

        // Italic
        class CustomItalic extends Italic {
            static formats() { return false; }
            optimize(context) { }
        }
        CustomItalic.tagName = [];

        // Link
        class CustomLink extends Link {
            static formats() { return false; }
            optimize(context) { }
        }
        CustomLink.tagName = [];

        // Script
        class CustomScript extends Script {
            static formats() { return false; }
            optimize(context) { }
        }
        CustomScript.tagName = [];

        // Strike
        class CustomStrike extends Strike {
            static formats() { return false; }
            optimize(context) { }
        }
        CustomStrike.tagName = [];

        // Underline
        class CustomUnderline extends Underline {
            static formats() { return false; }
            optimize(context) { }
        }
        CustomUnderline.tagName = [];

        // register the new custom formats to disable formatting
        // comment/remove any of the formats below to enable specific formatting again
        Quill.register({ 
            'formats/bold': CustomBold, // comment this, you will get back the bold functionality
            'formats/italic': CustomItalic,
            'formats/link': CustomLink,
            'formats/script': CustomScript,
            'formats/strike': CustomStrike,
            'formats/underline': CustomUnderline,
        })

        const quill = new Quill('#editor-container', {
            modules: {
                toolbar: false
            },
            placeholder: 'Compose an epic...',
            theme: 'snow' 
        });
    </script>
</body>

</html>