Unordered list with quill editor ?

To customize the behavior of the Quill editor to use <ul> tags for unordered lists, you can extend the Quill editor's functionality by defining a custom blot. Quill uses a concept called "blots" to represent different types of content. By default, Quill uses <ol> for both ordered and unordered lists, but you can override this behavior.

Here's how you can achieve this:

1. Define a Custom Blot for Unordered Lists:

   You need to create a custom blot that will use <ul> instead of <ol> for unordered lists.

2. Register the Custom Blot:

   Register the custom blot with Quill so that it knows to use it when rendering unordered lists.

Here's a code example to illustrate these steps:

// Import Quill
import Quill from 'quill';

// Extend the ListItem and List blots
const ListItem = Quill.import('formats/list/item');
const List = Quill.import('formats/list');

// Create a custom blot for unordered lists
class CustomUnorderedList extends List {
  static create(value) {
    let node = super.create();
    node.setAttribute('data-list', value);
    return node;
  }

  static formats(domNode) {
    return domNode.getAttribute('data-list') || undefined;
  }
}

// Register the custom blot
CustomUnorderedList.blotName = 'unordered';
CustomUnorderedList.tagName = 'UL';
CustomUnorderedList.className = 'ql-ul';

// Register the custom blot with Quill
Quill.register(CustomUnorderedList, true);

// Initialize Quill editor
const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ 'list': 'ordered' }, { 'list': 'unordered' }]
    ]
  }
});

Explanation:

• CustomUnorderedList Class: This class extends the default List blot and overrides the create method to set a custom attribute data-list to differentiate between ordered and unordered lists. It uses the <ul> tag for unordered lists.

• Registering the Blot: The custom blot is registered with Quill using Quill.register.

• Toolbar Configuration: The toolbar is configured to include both ordered and unordered list options.

By following these steps, you can ensure that Quill uses <ul> tags for unordered lists, while still using <ol> for ordered lists. Make sure to include the necessary CSS to style the lists appropriately if needed.