Quill bandes en html simple quand dangerouslyPasteHTML dans l'éditeur

Question

<style> 
#editor-container { 
    height: 375px; 
} 
.link { 
    color:blue; 
} 
</style> 

<div id="editor-container"> 
    This is a test 
</div> 

<script type="text/javascript"> 
var quill = new Quill('#editor-container', { 
    modules: { 
    toolbar: [ 
     [{ header: [1, 2, false] }], 
     ['bold', 'italic', 'underline'], 
     ['image', 'code-block'] 
    ] 
    }, 
    placeholder: 'Compose an epic...', 
    theme: 'bubble' // or 'bubble' 
}); 

quill.clipboard.dangerouslyPasteHTML(5, "<span class=\"link\" data-test=\"test\">testing</span>", "silent"); 
</script> 

MVCE - https://codepen.io/anon/pen/QMQMee

Le code HTML se dépouillé en dépit d'être assez inoffensif (ce qui sera traité plus tard).

Answer 1

Mon plan actuel, en raison de la façon dont Quill ne permet pas html de coller, est (Dans le cadre d'une action de clic sur le nom de la personne mentionnée):

$("#tag-selectable-users-list li").on("click", 
     function() { 
      var $this = $(this); 
      var startIndex = $this.data("data-start-index"); 
      var userName = $this.data("data-user-name"); 
      var userId = $this.data("data-user-id"); 
      var taggedUserIds = $("#hiddenTaggedUsers"); 
      taggedUserIds.val((taggedUserIds.val()||"") + ";" + userId); 
      var delta = []; 
      if (startIndex > 0) { 
       //retain up to the tag start 
       delta.push({ retain: parseInt(startIndex) }); 
      } 
      //delete the junk 
      delta.push({ delete: tagStatus.Total.length }); 
      //insert the new characters 
      delta.push({ 
       insert: "@@" + userName, 
       attributes: { 
        color: "blue", 
        underline: "true" 
       } 
      }); 
      //insert a blank space to end the span 
      delta.push({ insert: " " }); 

      quill.updateContents(delta, 
       'api'); 
     }); 
    }