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

尽管HTML非常无害，但HTML会被删除（稍后会更好地处理）。

Answer 1

由于Quill不允许粘贴html的方式，我目前的计划是（作为对上述人名的点击操作的一部分）：

    $("#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');
        });
    }

当dangerouslyPasteHTML进入编辑器时，Quill剥离出简单的html

1 个答案: