Search code examples
jqueryquill

Adding Link to Quill editor causes text after link to overflow

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.

enter image description here

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

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