我目前正在实现非常酷的范围和选择库 Rangy.js。我想实现一个可以突出显示某些文本的功能,然后将注释添加并保存到突出显示。在演示中,它展示了如何向选择添加注释 - 但只有一个 ID 附加到选择。
我正在尝试这样的事情,我在元素上创建一个评论属性:
highlighter.addClassApplier(rangy.createCssClassApplier("highlight", {
ignoreWhiteSpace: true,
elementTagName: "span",
elementProperties: {
comment: "",
onclick: function() {
var highlight = highlighter.getHighlightForElement(this);
$('#myModal p').text( highlight.classApplier.elementProperties.comment );
$('#myModal').modal('show');
}
}
}));
然后在突出显示文本时,注释存储在“comment”属性中:
function highlightSelectedText( event ) {
event.preventDefault();
var highlight = highlighter.highlightSelection("highlight");
$('#myModal').modal('show');
$('#save-comment').on('click', function () {
var comment = $('#comment-text');
highlight[0].classApplier.elementProperties.comment = comment.val();
});
}
当我序列化我的亮点时,评论不包括在内。
有没有人用 Rangy.js 尝试过这个或类似的东西?
任何帮助表示赞赏,在此先感谢!