是否可以扩展 quill 以支持 <br>在 <li> 里面? [英] Is it possible to extend quill to support a <br> inside of an <li>?

问题描述

我希望能够在 Quill 中实现以下目标:

<li>东西<br>别的

开箱即用，Quill 删除了 br，并且不支持使用 insertText(..., '\n', ...) 或用户编辑在 li 内添加 br.

我看到了如何注册键盘绑定来处理，例如，shift-enter"以便能够创作这样的内容，这似乎既可以在 Parchment 中表示，也可以表示有 Blots在 Quill 中表示这一点(即 Break 等).

说了这么多，我不清楚这个用例是否可以通过模块在 Quill 编辑器中实现.

任何指针将不胜感激！

谢谢！

解决方案

这里有几个限制条件需要牢记:

1. Quill 内容必须通过 API 规范地表示和明确修改.所以如果你有

   • SomethingElse
   并使用了 insertText(index, '\n')，有产生
   • Something
     Else
   或

   Something

   的歧义;<li>Else</li></ul>.在 Quill 核心中，前者是不可能的，因此没有这种歧义(注意产生
   • Something
   • Else
   • Something
   • code> 你会调用 insertText(index, '\n', 'list', 'bullet');).因此，如果添加软中断，则不能用换行符表示.\r vs \n vs \r\n 的历史表明，生成另一个换行符作为解决方案是个坏主意.

   • 在结构上，Quill 数据模型在相应的 DOM 中的所有位置始终具有块和叶节点是很方便的.
用作占位符，所以

     


     代表一个空行，而不仅仅是

     ;</p>(即使您使用 CSS 指定它，旧的 IE <= 10 也不会在

     </p> 上呈现任何高度，因此
在历史上是必要的).内部块将在删除其最后一个子项时自动添加
和，并在插入子项时删除
.鉴于这种特殊行为(尽管可以通过 defaultChild 修改)，您不想扩展默认的 <代码>
     实现.

所以我的建议是创建一个使用
的自定义内嵌嵌入污点并指定一个类，以便它可以消除普通 <br> 之间的歧义.要通过 API 插入它，它将是 insertEmbed(index, 'customBr', true); 和

• Something
  来自 getContents() 将是 [{ insert: "Something" }, { insert: { custombr: true }}, { insert: "Else" }, { insert: "\n", attributes: { list: 'bullet' } }].

  这似乎有效，但尚未经过彻底测试:https://codepen.io/quill/pen/BJaOxP.

  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!

  解决方案

  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.

  这篇关于是否可以扩展 quill 以支持 &lt;br&gt;在 &lt;li&gt; 里面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！