Question

我使用Quill JS作为富文本编辑器。如果用户单击按钮，我希望能够突出显示文本中的特定单词。但似乎Quill JS不允许用另一个插件（？）

编辑其内容

我尝试了Mark.js和Highlight.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>

Answer 1

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

访问QuillJS中的书面文本

1 个答案: