【问题标题】:Quill strips out simple html when dangerouslyPasteHTML into editor当危险地将 HTML 粘贴到编辑器中时,Quill 会删除简单的 html
【发布时间】:2018-01-27 07:29:34
【问题描述】:
<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 mention quill


    【解决方案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');
            });
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-03-14
      • 1970-01-01
      • 2017-11-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多