html - 使用 vue-quill-editor 时,Quill 将不需要的 <br> 添加到列表中

标签 html vue.js quill

我依靠 vue-quill-editor 来允许用户在我的应用程序中创建注释。用户第一次创建列表时,它会按预期保存。

例如,保存的 HTML 可能如下所示:

<div> Test: </div>
   <ol>
     <li> One </li>
     <li> Two </li>
   </ol>

但是,当用户编辑注释时,内容会在列表开始之前使用
标记呈现。

<div> Test: </div>
<br>
   <ol>
     <li> One </li>
     <li> Two </li>
   </ol>

如果用户不删除此标签,它将被保存。每次用户编辑注释时都会添加一个新的
标签。因为我使用的是 vue-quill-editor,所以我不确定是否可以使用危险的PasteHTML 之类的东西来解决这个问题。有什么配置可以尝试缓解这个问题吗?或者我可以将内容包装在一些可能有帮助的标签中吗?

最佳答案

可以使用 quill 剪贴板模块的 matchVisual: false 配置来解决此问题。 Quill 问题板上的许多讨论中都提到了这种方法,但是 documentation关于配置不是很清楚。

我的剪贴板选项看起来像

options : {
  modules: {
    toolbar: '#toolbar',
    clipboard: {
        matchVisual: false
    }
  }
}      

这解决了问题,并且没有添加
标签。

关于html - 使用 vue-quill-editor 时,Quill 将不需要的 <br> 添加到列表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51140442/

相关文章:

vue.js - Vuejs 嵌套插槽 : how to pass slot to grandchild

css - 为什么我的 css 代码在 vuejs 中不起作用?

javascript - 使用 svg.js 将生成的 SVG 保存为 .svg 文件

javascript - 选择选项上的输入类型文件

vue.js - VS Code - 在 .vue 文件中启用 autoClosingTags 选项

javascript - v-date-picker 日期格式为 DD-MM-YYYY vuetify

javascript - 完成编辑后如何关闭羽毛笔编辑器

quill - 如何将对齐按钮添加到 Quill 的工具栏?

javascript - 在 href 属性中使用 "#"的替代方法

html - 使输入适合 td 的高度和宽度