<div> instead <p> in content

[kolesoffac]

Can you use"<div>" instead "<p>"?

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

Result:

<div id="editor">
  <div>Hello World!</div>
  <div>Some initial <strong>bold</strong> text</div>
  <div><br></div>
</div>

[jhchen]

Yes you just need to change the default Block tag name:

var Block = Quill.import('blots/block');
Block.tagName = 'DIV';
Quill.register(Block, true);

Here's a demonstration. There will be an in depth guide on using Parchment / Blots soon.

[iamroi]

Thanks for the solution!

Is it possible to customize this for just one editor on a page as I have multiple editors with different use cases on the same page?

Any help would be appreciated!

[sryzhok-edc]

Bad solution. After this fix I got other bugs: pasting of bulleted lists works incorrectly.

[JamalSBS]

Yes you just need to change the default Block tag name:

var Block = Quill.import('blots/block');
Block.tagName = 'DIV';
Quill.register(Block, true);

Here's a demonstration. There will be an in depth guide on using Parchment / Blots soon.

Doesn't work, this creates other bugs. It's adding a newline at the bottom of the editor. User above me claims it breaks bulleted lists as well.

Context as to why there's so many mentions: #1074 (comment)

So the recap: The bandaid fix for the bandaid fix... all regarding something that should work out of the box with a WYSIWYG editor, doesn't even work.

edit: Here is the bandaid fix for the extra space issue for the bandaid fix for the bandaid fix: #1702 (comment)

[tae997]

I wanted to add 1 more line in it for people who might get confuse or in case they are beginner -

> var Block = Quill.import('blots/block');
> Block.tagName = 'DIV';
> Quill.register(Block, true);

one of my friend ask me about from where this Quill came from, in face she got confused and imported react-quill like this -
import Quill from 'react-quill';

let me make this clear, Quill is actually sub part of react-quill.

import ReactQuill from 'react-quill';
const Quill = ReactQuill.Quill 
var Block = Quill.import('blots/block');
Block.tagName = 'div';
Quill.register(Block);

hope this will make you understand.

[sujitkrjha]

This worked for me. I am using next.js

import dynamic from 'next/dynamic';

const ReactQuill = dynamic(async () => {
        const ReactQuill = await import('react-quill');
        const { Quill } = ReactQuill.default;
        const Block = Quill.import('blots/block');
        Block.tagName = 'div';
        Quill.register(Block);

        return ReactQuill;
    }, { ssr: false });```