/ / Quill usuwa prosty HTML, gdy niebezpiecznie wkleja się do edytora - html, quill, wzmianka, quilljs

Quill usuwa prosty HTML, gdy niebezpiecznie wkleja się do edytora - html, quill, wzmianka, quilljs

<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

Kod HTML zostaje usunięty, mimo że jest całkiem nieszkodliwy (to będzie lepiej obsłużone później).

Odpowiedzi:

0 dla odpowiedzi № 1

Mój obecny plan, ze względu na sposób, w jaki Quill nie pozwala na wklejenie html, jest (W ramach akcji kliknięcia na nazwie osoby wymienionej):

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