Configurable block tag (div, paragraph)

[alexeckermann]

Whilst div tags are quite acceptable for most cases, there are some uses where paragraph tags are necessary over div's.

As an example: I work on an application that allows authors to write content for ePubs. For both logical structure and ePub rendering reasons we like to use paragraph tags.

From a very shallow inspection of the source it would appear this would involve changing references to the dom.DEFAULT_BLOCK_TAG variable with an option defined at initialisation.

• Is there enough reason to warrant this change?
• Are there any unintended consequences of implementing a change like this? @jhchen
• How should configuration be handled? Define in the constructor options hash as block_tag: 'p'?

[alexeckermann]

I've had a crack at implementing a configurable block tag and along the way picking up on how Quill works.

Whilst most of the changes are straight forward the Formatter and Normalizer have some logic that may conflict and require some attention. With my current limited depth of knowledge on all the moving parts in Quill I am not sure if there is any unintended consequences (tests aside) of making a change like this.

@jhchen is there any "here be dragons" you can point me in the direction of to make sure that I can sort it out? The Normalizer class feels like one of them since it sits outside the scope of an editor instance making configs unavailable.

I'll push my forked branch soon once I have gotten it a little further along.

[jhchen]

Right I think the major challenge is that the normalizer is not configurable. There are many benefits to turning it into a class and this needs to happen for a couple other bugs to be fixed such as #191. I'm hoping to get to this soon so it might work best for this feature to be added after the normalizer changes.

[melinath]

+1 looking forward to this landing.

[nicovalencia]

👍

[nicovalencia]

@jhchen what's the normalizer looking like? Are @alexeckermann or you working on the change to make this configurable? If not, perhaps I can help lift. We have Quill configured, but absolutely need content wrapped in <p> tags for it to meet requirements.

I'd much rather help contribute than just hack this into a fork. Just don't want to double up on work. (And I have no context into this project/source so it would take me a while to get ramped up).

Thanks!

🍐

[james2doyle]

This may be irrelevant for most, but I am using this editor in a CMS, and I have the following running before the content is saved to my database:

// swap div tags with p
$value = str_replace('div>', 'p>', $value);
// remove the empty sections now
$value = str_replace('<p><br></p>', '', $value);

This just runs each time I save my page. It works nicely at the moment. I am sure for more complicated code, this would not be as helpful.

[antonholmquist]

+1 for being able to use paragraphs instead of divs.

By the way, thanks for a great editor!

[machiel]

👍

[discoliam]

👍

[murashki]

I can't understand how this work: http://codepen.io/SaraVieira/pen/eaAcu
It use p instead of div. How?

[jhchen]

They seem to either have their own fork or build that probably changed the DEFAULT_BLOCK_TAG constant (and got rid of the browser default padding on paragraph tags).

[murashki]

Tnx!

[hpaul]

👍

[Mad-Chemist]

Has no progress been made to make this a customizable option? Surely there should be some mapping for ALL tags to allow customization.

I currently need to use paragraph tags instead of divs, in addition to some other changes. Its a bit discouraging to see that this hasn't been resolved yet.

[JoshWillik]

I'd also like to have this. I'm going to use something similar to @james2doyle 's solution for the time being, but I'd love to be able to have <p> tags instead.

@jhchen I'm open to help get this working if you can point me in the right direction.

[madeleineostoja]

👍 we're strongly considering using Quill in Simpla but non-standard content elements (eg: divs instead of ps) are a dealbreaker for inline editing.

[Jesterovskiy]

👍 need this changes too

[jhchen]

The default block tag in the 1.0 beta release is <p>, with no bottom margin. If you want the bottom margin you can add it with css. If you want the default block tag to be <div> like it was before, you can configure with Parchment:

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

// Create your Quill editor like before
var quill = new Quill('#editor');

[davidgiven]

Hurray --- thanks!

[Jesterovskiy]

Thank you =)

[jadamconnor]

Any ideas on how to implement this solution in Typescript in an Angular 2 project?

[mmoravcik]

@jadamconnor

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;

const Parchment = Quill.import('parchment');
let Block = Parchment.query('block');
Block.tagName = 'DIV';
Quill.register(Block, true);

[mdperez86]

This approach does not work with multiple instances of Quill editor in the same page using different tagNames.

let Block = Parchment.query('block');
Block.tagName = 'DIV';
Quill.register(Block, true);
let editor1 = new Quill({...});

let Block = Parchment.query('block');
Block.tagName = 'P';
Quill.register(Block, true);
let editor2 = new Quill({...});

Both editors are using same last tagName='P'.
Do you know any way to do that?

[DvzH]

After making DIV as a block tag I wanted to add SCRIPT tag inside DIV but I am only able to see DIV but not SCRIPT tag even it's same with other elements like SECTION , ARTICLE etc. when you try to embed them inside DIV they are not getting appended

Can somebody help me.. ??

Thanks in advance

[psy21d]

I very important need to add custom div nodes with classes
I use it as a page for printing

Yow I can make it?

[saminlu]

This approach does not work with multiple instances of Quill editor in the same page using different tagNames.

let Block = Parchment.query('block');
Block.tagName = 'DIV';
Quill.register(Block, true);
let editor1 = new Quill({...});

let Block = Parchment.query('block');
Block.tagName = 'P';
Quill.register(Block, true);
let editor2 = new Quill({...});

Both editors are using same last tagName='P'.
Do you know any way to do that?
@mdperez86 I have the same issue, do you know how to do that?
And the css style on tags also filter delete, I'd like css write on tags, how to do that?

[marsielko]

@saminlu @mdperez86 Hi guys, I'm currently facing the same issue, where I have multiple instances of Quill editor and I'd like to use

in one instance and

in the other. Have you found any way to reach that goal?