gpt4 book ai didi

javascript - 访问 QuillJS 中的书面文本

转载 作者:行者123 更新时间:2023-12-01 05:24:02 26 4
gpt4 key购买 nike

我正在使用Quill JS作为富文本编辑器。如果用户单击按钮,我希望能够突出显示文本中的特定单词。但 Quill JS 似乎没有授予通过另一个插件编辑其内容的权限(?)

我试过Mark.jsHighlight.js ,但它们仅适用于 Quill JS 编辑器中不存在的元素。不过,触发器似乎有效,因为带有正确关键字的

行在 Firefox Inspector 中闪烁,就像有东西访问该行一样,但在浏览器中没有真正的变化。

我发布了一些示例代码(请忽略Javascript的第一部分,因为它只是我必须放在那里的highlight.js插件。我的自定义代码位于最后):

$( document ).ready(function() {

// My custom code is at the very end. This is the highlight.js plugin code:
// Copyright (c) 2009 Bartek Szopka
jQuery.extend({
highlight: function (node, re, nodeName, className) {
if (node.nodeType === 3) {
var match = node.data.match(re);
if (match) {
var highlight = document.createElement(nodeName || 'span');
highlight.className = className || 'highlight';
var wordNode = node.splitText(match.index);
wordNode.splitText(match[0].length);
var wordClone = wordNode.cloneNode(true);
highlight.appendChild(wordClone);
wordNode.parentNode.replaceChild(highlight, wordNode);
return 1; //skip added node in parent
}
} else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
!/(script|style)/i.test(node.tagName) && // ignore script and style nodes
!(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
for (var i = 0; i < node.childNodes.length; i++) {
i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
}
}
return 0;
}
});

jQuery.fn.unhighlight = function (options) {
var settings = { className: 'highlight', element: 'span' };
jQuery.extend(settings, options);

return this.find(settings.element + "." + settings.className).each(function () {
var parent = this.parentNode;
parent.replaceChild(this.firstChild, this);
parent.normalize();
}).end();
};

jQuery.fn.highlight = function (words, options) {
var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
jQuery.extend(settings, options);

if (words.constructor === String) {
words = [words];
}
words = jQuery.grep(words, function(word, i){
return word != '';
});
words = jQuery.map(words, function(word, i) {
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
});
if (words.length == 0) { return this; };

var flag = settings.caseSensitive ? "" : "i";
var pattern = "(" + words.join("|") + ")";
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);

return this.each(function () {
jQuery.highlight(this, re, settings.element, settings.className);
});
};

// -------------------------------------------------------------------------
// My custom code
// -------------------------------------------------------------------------

// Initialize Quill editor options
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
];

// Setup Quill editor
var options = {

modules: {
toolbar: toolbarOptions
},
placeholder: 'Start writing demo and another word then hit the green div...',
theme: 'snow'
};
var editor = new Quill('#editor', options);

// Use highlight js to highlight every "demo" in the text
$("#clicker").on("click", function() {
$("p").highlight("demo");
});


});
 #clicker {
background-color: #ddffdd;
display: block;
padding: 32px;
text-align: center;
}

.highlight {
background-color: #FFFF88;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>Prototype</title>
<meta name="description" content="This is a demo page.">

<link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">

<script type="text/javascript" src="https://cdn.quilljs.com/1.1.5/quill.js"></script>


</head>

<body>
<div id="clicker" style="cursor: pointer">Mark "demo" in Text by clicking here</div>
<main>
<div id="editor"></div>
<div>
<p>demo outside of editor</p>
</div>
</main>
</body>

</html>

最佳答案

不支持通过 DOM API 进行任意更改。要更改 Quill 的编辑器内容,您必须使用其 API 。这个Cloning Medium with Parchment指南对于创建您所描述的新格式非常有用。

关于javascript - 访问 QuillJS 中的书面文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40869669/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com