将链接添加到 Quill 编辑器会导致链接后文本溢出 [英] Adding Link to Quill editor causes text after link to overflow

问题描述

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

{！！$product_details->short_description !!}
var quill_short = new Quill('.short-description', {主题:雪"，模块:{工具栏:工具栏选项},});var htmlButton = document.querySelector('#short-description-row .ql-html');htmlButton.addEventListener('click', function() {var htmlEditor = document.querySelector('#short-description-row .ql-html-editor');如果(html编辑器){console.log(htmlEditor.value.replace(/\n/g, ""));quill_short.root.innerHTML = htmlEditor.value.replace(/\n/g, "");quill_short.container.removeChild(htmlEditor);} 别的 {选项 = {"缩进": "自动",缩进空格":2，包装":80，标记":真实，输出-xml":假，数字实体":真，引号":真，quote-nbsp":假，仅显示正文":真，"quote-&": false,"break-before-br": true,大写标签":假，大写属性":假，"drop-font-tags": 真,整洁标记":假}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();

解决方案

某处破坏了您的 html 代码.

请按照以下步骤让鹅毛笔编辑器添加或编辑简短说明

这是你的 html

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

初始化编辑器

var quill_short = new Quill('.short-description', {主题:雪"，模块:{工具栏:工具栏选项},});

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

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

Adding a link using the add link tool from the tooloptions allows me to add a link but after saving the data from the editor and refreshing the page the text after the link overflows the texteditor.

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

解决方案

Somewhere breaks your html code.

Please follow below steps for quill editor to add or edit short-description

Here is your 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>

Initialize your editor

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

On text change assign data to input field to store data

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

Display html on page load

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

这篇关于将链接添加到 Quill 编辑器会导致链接后文本溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！