How to let quill instance use div tag by default instead of p tag

[neeko-iweurow]

there are two quill instance in my project, quill use p tag by default how to let quill1 use div tag by default , let quill2 still use p tag by default

Steps for Reproduction

class CustomBlockBlot extends Quill.import("blots/block") {
    static create(value: any) {
      const node = super.create(value);
      node.style.fontSize = "13px";
      node.style.fontFamily = "Helvetica, Arial, sans-serif";
      node.style.lineHeight = 1.5;
      node.style.color = "#131619";
      return node;
    }
  }
  CustomBlockBlot.tagName = "div";
  CustomBlockBlot.className = "new-div";
  Quill.register(CustomBlockBlot);

  const quill1 = new Quill(el1, {...})
  const quill2 = new Quill(el2, {...})

Actual This code will made quill1 and quill 2 are all use div tag. Expect Only quill1 use div tag Version 1.3.7

[neeko-iweurow]

please commit if anyone have solve, thanks

[nearueng]

We just swap this out on the backend before saving the actual data. Using a simple string replace for

tags with

tags. Not ideal, but it works.

[KillerCodeMonkey]

need to say that you override the blot or do it that way:

import Quill from 'quill'

const parchment = Quill.import('parchment')
const block = parchment.query('block')
block.tagName = 'DIV'
// or class NewBlock extends Block {} NewBlock.tagName = 'DIV'
Quill.register(block /* or NewBlock */, true)

[benbro]

Thank you @KillerCodeMonkey for your answer.

[seth-church]

need to say that you override the blot or do it that way:

import Quill from 'quill'

const parchment = Quill.import('parchment')
const block = parchment.query('block')
block.tagName = 'DIV'
// or class NewBlock extends Block {} NewBlock.tagName = 'DIV'
Quill.register(block /* or NewBlock */, true)

This does not appear to work in quill 2. Getting Uncaught TypeError: parchment.query is not a function. Anyone know how to do this in quill 2? Can do a search and replace for now as suggested by nearueng.

[KillerCodeMonkey]

Try

import Quill from 'quill' import Block from 'quill/blots/block'

Block.tagName = "DIV" Quill.register(Block, true)

Am 4. September 2024 17:41:59 MESZ schrieb Seth Call @.***>:

need to say that you override the blot or do it that way:

import Quill from 'quill'

const parchment = Quill.import('parchment')
const block = parchment.query('block')
block.tagName = 'DIV'
// or class NewBlock extends Block {} NewBlock.tagName = 'DIV'
Quill.register(block /* or NewBlock */, true)

This does not appear to work in quill 2. Getting Uncaught TypeError: parchment.query is not a function. Anyone know how to do this in quill 2? Can do a search and replace for now as suggested by nearueng.

-- Reply to this email directly or view it on GitHub: https://github.com/slab/quill/issues/3887#issuecomment-2329408026 You are receiving this because you were mentioned.

Message ID: @.***>

[seth-church]

This is working in quill 2 @KillerCodeMonkey. Thank you, thank you!