Is it possible to extend quill to support a <br> inside of an <li>?

问题

I would like to be able to achieve something like the following in Quill:

<ul>
  <li>Something<br>
      Else
  </li>
</ul>

Out of the box, Quill removes the br and does not support adding a br inside of an li with either insertText(..., '\n', ...) or user editing.

I see how I can register a keyboard binding to handle, for example, "shift-enter" to be able to author content like this and it seems like both something that is possible to represent in Parchment and that there are the Blots to represent this in Quill (i.e Break, etc).

All that said, it's not clear to me if this use case is possible in the Quill editor through a module or not.

Any pointers would be super appreciated!

Thanks!

回答1:

Here's a couple constraints to keep in mind:

1. Quill content must be represented canonically and modified unambiguously through the API. So if you had <ul><li>SomethingElse</li></ul> and used insertText(index, '\n'), there is ambiguity as to produce a <ul><li>Something<br>Else</li></ul> or <p>Something</p><ul><li>Else</li></ul>. In Quill core the former is not possible so there is no such ambiguity (note to produce <ul><li>Something</li><li>Else</li></ul> you would call insertText(index, '\n', 'list', 'bullet');). Therefore if soft breaks are added it cannot be represented with a newline character. The history with \r vs \n vs \r\n suggests it would be a bad idea to produce another newline character as the solution.

2. Architecturally it was convenient for the Quill data model to always have both a block and a leaf node in the corresponding DOM at all positions. <br> is used as the placeholder so <p><br></p> represents an empty line instead of just <p></p> (also older IE <= 10 did not render any height on <p></p> even if you specified it with CSS so the <br> was historically necessary). Internally blocks will add <br> and automatically when its last child is removed, and remove <br> when children are inserted. Given this special behavior (though modifiable through defaultChild), you do not want to extend the default <br> implementation.

So the suggestion I would make is to create a custom inline embed blot that uses
and specify a class so it can disambiguate between the normal <br>. To insert it through the API it would be insertEmbed(index, 'customBr', true); and the JSON representation of <ul><li>Something<br class="custombr">Else</li></ul> from getContents() would be [{ insert: "Something" }, { insert: { custombr: true } }, { insert: "Else" }, { insert: "\n", attributes: { list: 'bullet' } }].

This seems to work but have not tested throughly: https://codepen.io/quill/pen/BJaOxP.

来源：https://stackoverflow.com/questions/47746429/is-it-possible-to-extend-quill-to-support-a-br-inside-of-an-li