将 Link 添加到 Quill 编辑器会导致 link 之后的文本溢出

Question

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

<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();

Answer 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();

将 Link 添加到 Quill 编辑器会导致 link 之后的文本溢出

Adding Link to Quill editor causes text after link to overflow

jquery

quill