Kurt William
Kurt William

Reputation: 753

Quill - Make Editor wrap text in Div instead of P tag

I have built a Quill text editor in ReactJS with React-Quill. I would like to wrap the generated text in the text editor with a Div tag instead of a P tag. Is this possible?

Overview of my use: When text is generated/edited in the Quill editor it is duplicated in another div on another part of the page. Our use of this editor goes back a few years, and thus was built on an older version of Quill, when the text was generated in Div's. We recently upgraded to Quill 1.0 and when the text is generated in P tags it creates unwanted styles that we can't remove. The simplest and least hacky solution would be to generate div's instead of p tags, but I have no idea if that's even possible.

Does anyone know more about this?

Thank you.

Upvotes: 6

Views: 13573

Answers (3)

Herman Van Der Blom
Herman Van Der Blom

Reputation: 802

I have this in native Javascript and that worked for me:

var Block = Quill.import('blots/block');
Block.tagName = 'div';
Block.blotName = "P";
Quill.register(Block);

Upvotes: 0

Sujit Jha
Sujit Jha

Reputation: 9

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

Upvotes: 0

jhchen
jhchen

Reputation: 14767

You can just change the tagName of the default Block:

var Block = Quill.import('blots/block');
Block.tagName = 'div';
Quill.register(Block);

Working example: https://codepen.io/anon/pen/brgvPR

Upvotes: 12

Related Questions