The document editor component searches a portion of text in the document through a built-in interface called OptionsPane or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.
This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to Replace tab. This pane is opened using the keyboard shortcut CTRL+F. You can also open it programmatically using the following sample code.
var documenteditor = new ej.documenteditor.DocumentEditor({ enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false, enableOptionsPane: true });
documenteditor.appendTo('#DocumentEditor');
var sfdt = `{
"sections": [
{
"blocks": [
{
"inlines": [
{
"characterFormat": {
"bold": true,
"italic": true
},
"text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
}
]
}
]
}
]
}`;
documenteditor.open(sfdt);
document.getElementById('showhidepane').addEventListener('click', () => {
documenteditor.showOptionsPane();
});<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/fabric.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div style="display: inline">
<button id="showhidepane" class="e-control e-btn e-primary">Optionspane</button>
</div>
<div style="width:100%;height: 100%">
<!--Element which will render as DocumentEditor -->
<div id="DocumentEditor"></div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>You can close the options pane by pressing Esc key.
The Search module of document editor exposes the following APIs:
| API Name | Type | Description |
|---|---|---|
findAll() |
Method | Searches for specified text in the whole document and highlights it with yellow. |
searchResults |
Property | This is an instance of SearchResults. |
Refer to the following code example.
documenteditor.search.findAll('Some text', 'None');The SearchResults class provides information about the search results after a search operation is completed that can be identified using the searchResultsChange event. This will expose the following APIs:
| API Name | Type | Description |
|---|---|---|
length |
Property | Returns the total number of results found on the search. |
index |
Property | Returns the index of selected search result. You can change the value for this property to move the selection. |
replaceAll() |
Method | Replaces all the occurrences with specified text. |
clear() |
Method | Clears the search result. |
DocumentEditor exposes the searchResultsChange’event that will be triggered whenever search results are changed. Consider the following scenarios:
Refer to the following code example.
documenteditor.searchResultsChange = function() {
};Using the exposed APIs, you can customize the find and replace functionality in your application. Refer to the following sample code.
var documenteditor = new ej.documenteditor.DocumentEditor({ enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false });
documenteditor.appendTo('#DocumentEditor');
var sfdt = `{
"sections": [
{
"blocks": [
{
"inlines": [
{
"characterFormat": {
"bold": true,
"italic": true
},
"text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
}
]
}
]
}
]
}`;
documenteditor.open(sfdt);
document.getElementById('replace_all').addEventListener('click',function () {
var textToFind = (document.getElementById('find_text')).value;
var textToReplace = (document.getElementById('replace_text')).value;
if (textToFind !== '') {
// Find all the occurences of given text
documenteditor.searchModule.findAll(textToFind);
if (documenteditor.searchModule.searchResults.length > 0) {
// Replace all the occurences of given text
documenteditor.searchModule.searchResults.replaceAll(textToReplace);
}
}
});<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div>
<table>
<tbody><tr>
<td>
<label>Text to find:</label>
</td>
<td>
<input type="text" id="find_text">
</td>
</tr>
<tr>
<td>
<label>Text to replace:</label>
</td>
<td>
<input type="text" id="replace_text">
</td>
</tr>
<tr>
<td colspan="2">
<button id="replace_all" v-on:click="onReplaceButtonClick" style="float:right;margin-top: 10px;" class="e-control e-btn">Replace All</button>
</td>
</tr>
</tbody></table>
</div>
<div style="width:100%;height: 100%">
<!--Element which will render as DocumentEditor -->
<div id="DocumentEditor"></div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>