将链接添加到 Quill 编辑器会导致链接后的文本溢出答案

【问题标题】：Adding Link to Quill editor causes text after link to overflow将链接添加到 Quill 编辑器会导致链接后的文本溢出
【发布时间】：2020-01-01 14:26:24
【问题描述】：

使用工具选项中的添加链接工具添加链接允许我添加链接，但在从编辑器保存数据并刷新页面后，链接溢出文本编辑器后的文本。

<div class="short-description" style="height: 150px;">
   {!! $product_details->short_description !!}
</div>

 var quill_short = new Quill('.short-description', {
      theme: 'snow',
      modules: {
        toolbar: toolbarOptions
      },
    });

 var htmlButton = document.querySelector('#short-description-row .ql-html');

    htmlButton.addEventListener('click', function() {
      var htmlEditor = document.querySelector('#short-description-row .ql-html-editor');
      if (htmlEditor) {
        console.log(htmlEditor.value.replace(/\n/g, ""));
        quill_short.root.innerHTML = htmlEditor.value.replace(/\n/g, "");
        quill_short.container.removeChild(htmlEditor);

      } else {

        options = {
          "indent": "auto",
          "indent-spaces": 2,
          "wrap": 80,
          "markup": true,
          "output-xml": false,
          "numeric-entities": true,
          "quote-marks": true,
          "quote-nbsp": false,
          "show-body-only": true,
          "quote-ampersand": false,
          "break-before-br": true,
          "uppercase-tags": false,
          "uppercase-attributes": false,
          "drop-font-tags": true,
          "tidy-mark": false
        }
        htmlEditor = document.createElement("textarea");
        htmlEditor.className = 'short-desc ql-editor ql-html-editor'
        htmlEditor.innerHTML = tidy_html5(quill_short.root.innerHTML, options).replace(/\n\n/g, "\n");
        quill_short.container.appendChild(htmlEditor);
      }
    });


    quill_short.on('text-change', function(delta, oldDelta, source) {
      var quill_data = document.querySelector(".short-description .ql-editor").innerHTML;
      console.log('quill_data S',quill_data);
      $('#short-description').val(quill_data);
    })
    document.querySelector(".short-description .ql-editor").innerHTML =  $('#short-description').val();

【问题讨论】：

标签： jquery quill

【解决方案1】：

某处破坏了您的 html 代码。

请按照以下步骤让羽毛笔编辑器添加或编辑简短描述

这是你的html

<div class="form-group">
    <input id="short-description" type="hidden" name="short-description" value="{{ $product_details->short_description }}">
    <div class="short-description" style="height: 150px;"></div>
</div>

初始化你的编辑器

var quill_short = new Quill('.short-description', {
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    },
});

在文本更改时将数据分配给输入字段以存储数据

quill_short.on('text-change', function(delta, oldDelta, source) {
    var quill_data = quill_short.root.innerHTML;
    $('#short-description').val(quill_data);
})

在页面加载时显示 html

quill_short.root.innerHTML = $('#short-description').val();

【讨论】：