How can I use register instead of formats with Quilljs 2.0.*？

In quill 1.x, we can use formats to configure the required format：

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

but, quill 2.0 removed formats

upgrading-to-2-0.md: formats removed - registry is now strictly more powerful and safer.

How can I use register instead of formats？

Solution

According to this issue, the formats problem of quill 2 is still open and seems like no one is following up.

According to this issue, there is no way to unregister specific registry. The only way is to override them but there is error when I tried to provide a new Registry to the option where ScrollBlot is null and cannot be initialised successfully.

To be able to disable the formatting, the only way you can do is to extends the formatting class and register it again to override the default behaviour.

To disable Bold

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 })

A full version with all formatting

<!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>