I recently participated in a hack-a-thon and worked on a annotation tool. The front end purpose of the tool was to highlight entities such as “Organizations”, “Locations” and “People”. I used a free rich text editor called Quill JS with KnockoutJS to easily highlight text with your curser and display on the screen above. This is only the tip of the iceberg as Quill is so powerful and contains many different api calls that can be used. You can use any front-end UI framework you prefer, but in this case I will use Knockout JS.
See Codepen for live example.
1. Include the cdn for KnockoutJS and QuillJS. Create the editor container and include the js file you will be loading from. I set an inline style for max-height so it won’t take up the entire page.
<head>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<body>
<div id="editor" style="max-height: 500px">
<p>Hello World! My name is George, this is text that can be highlighted.</p>
<p><br></p>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="script.js"></script>
</body>
2. Create the ViewModel and the observable, Initialize the Quill Editor, and add the function that will be called when there is an action to the RTE, in this case, highlighted.
function ViewModel(){
var self = this;
//Create an observable array to display the text that you highlight with your cursor.
self.selectedText = ko.observableArray([]);
//Initialize the Quill Editor
var quill = new Quill('#editor', {
theme: 'snow'
});
//This function will be called when you make a change in the text, in this case, highlighting a word.
quill.on('selection-change', function(range, oldRange, source){
//This will get the text range that you highlighted.
var text = quill.getText(range.index, range.length);
//This changes the text to bold.
quill.formatText(range.index, range.length, 'bold', true);
self.selectedText.push(text);
})
}
ko.applyBindings(new ViewModel());
3. Add a basic unordered list with a data-bind to display that data when it is highlighted, and that’s it!
<body>
<ul data-bind="foreach: selectedText">
<li data-bind="text: $data"></li>
</ul>
<div id="editor" style="max-height: 500px">
<p>Hello World! My name is George, this is text that can be highlighted.</p>
<p><br></p>
</div>
</body>
George's Blog 