BoldDesk®Customer service software offering ticketing, live chat, and omnichannel support, starting at $49/mo. for 10 agents. Try it for free.
Hi,
I’ve recently had 3 threads here on the forum:
1 about creating a DateStamp button (which works great).
2 about activating the Inline Toolbar, via keyboard-shortcut, so that I can access this new DateStamp button without selecting text (inline works best for me with 'onSelection'. Didn't find a solution).
3 about having a Find/Replace button, which as I understand it, is now being worked on to be a part of the standard Toolbar??
So I have 3 new questions that are related to the above topics…
1
When I include both Custom button’s codes for DateStamp + Find/Replace, the DateStamp one stops working. Clicking the button does nothing. I assume this is due to them using the same basic code, which I've tried editing, but I'm clearly missing something. Please could you tell me what I need to change so that both of these buttons work? (I include my code below).
2
I’d like make a very simple <hr> button as well, to simply insert “<hr>” into the html. Could you tell me how to do this, so that all 3 buttons work?? (As an aside, I’m wondering if it’s ok in html to have 2 <hr> types, e.g. <hr1> and <hr2>? Would this be acceptable html?)
3
I saw today, that a new UI element has been introduced to the Rich Text Editor, called Slash-Menu!! I’m wondering if I could add my DateStamp button to this pop-up in order to solve the problem of invoking the DataStamp without selecting existing text/space? That would be very cool!
(As an aside … looking at Slash-Menu, I think I’d like to use it for quite a lot of the things that I currently have in the inline Toolbar. It’s nice!)
FWIW … I use the CDN.
Here’s my code including the 2 Custom buttons … DateStamp + Find/Replace:
__________________________________________________________________
let selection = new ej.richtexteditor.NodeSelection();
let range;
let dialog;
let customBtn;
let dialogCtn;
let saveSelection;
var defaultRTE = new ej.richtexteditor.RichTextEditor({
placeholder: 'There once was a duck what flew...',
/* Type-Return to remove <time> tags */
actionComplete: function (args) {
var range = document.getSelection().getRangeAt(0);
var startContainer = range.startContainer;
if (args.requestType === 'EnterAction' && startContainer.tagName === 'TIME')
{startContainer.remove();}
},
/* Type-Return to remove <time> tags */
enableTabKey : true,
inlineMode: {
enable: true,
onSelection: true,
},
toolbarSettings: {
items: [
'Formats', 'FontSize', 'Blockquote', 'Bold', 'Italic', 'Underline', 'Strikethrough', 'FormatPainter', 'ClearFormat', 'Image',
'-',
/* DateTime */
{
tooltipText: 'Date-Stamp',
template:
'<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%"><span class="e-input-group-icon e-date-icon e-icons" aria-label="select" role="button"></span></button>',
},
/* DateTime */
{
tooltipText: 'Find and Replace',
template:
'<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%">' +
'<div class="e-tbar-btn-text"> <span class="e-btn-icon e-icons e-find-replace"></span></div></button>',
},
'CreateLink','FontColor', 'BackgroundColor', 'Alignments', 'Indent', 'Outdent', 'OrderedList', 'UnorderedList',
],
},
quickToolbarSettings: {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension' ]
},
pasteCleanupSettings: {
prompt: true,
plainText: true,
keepFormat: false,
deniedAttrs: ['class', 'title', 'id'],
},
insertImageSettings: {
width: 'auto',
height: 'auto',
saveFormat: 'Base64'
},
keyConfig:{
'copy': 'Cmd+c',
'cut': 'Cmd+x',
'paste': 'Cmd+v'
},
format: {
default: 'Paragraph',
width: '2px',
types: [
{ cssClass: 'e-paragraph', text: 'P', value: 'P' },
{ cssClass: 'e-h1', text: 'H 1', value: 'H1' },
{ cssClass: 'e-h2', text: 'H 2', value: 'H2' },
{ cssClass: 'e-h3', text: 'H 3', value: 'H3' },
{ cssClass: 'e-h4', text: 'H 4', value: 'H4' },
{ cssClass: 'e-h5', text: 'H 5', value: 'H5' },
{ cssClass: 'e-h6', text: 'H 6', value: 'H6' },
{ cssClass: 'e-quotation', text: 'BlockQuote', value: 'Blockquote' },
],
},
fontSize: {
default: '0.9rem',
width: 'auto',
items: [
{ text: '-2', value: '0.8rem' },
{ text: '-1', value: '0.85rem'},
{ text: 'N', value: '0.9rem' },
{ text: '+1', value: '0.95rem'},
{ text: '+2', value: '1rem'},
{ text: '+3', value: '1.05rem'},
{ text: '+4', value: '1.1rem' },
{ text: '+5', value: '1.15rem' },
{ text: '+6', value: '1.2rem'} ]
},
backgroundColor: {
modeSwitcher: true,
},
fontColor: {
modeSwitcher: true,
},
saveInterval: 1,
change: change,
autoSaveOnIdle: true,
quickToolbarOpen: quickToolbarOpen,
actionComplete: onActionComplete,
created: created,
});
defaultRTE.appendTo('#defaultRTE');
var checkBoxObj = new ej.buttons.CheckBox({
label: 'Match case',
checked: false,
});
checkBoxObj.appendTo('#checked');
function created() {
dialogCtn = document.getElementById('rteSpecial_char');
dialog = new ej.popups.Dialog({
header: 'Find and Replace',
isModal: true,
content: dialogCtn,
target: document.getElementById('rteSection'),
showCloseIcon: false,
allowDragging: true,
width: '50%',
height: 'auto',
visible: false,
buttons: [{ buttonModel: { content: 'Close' }, click: Close }],
open: dialogOpen,
overlayClick: dialogOverlay,
showCloseIcon: true,
});
// Render initialized Dialog
dialog.appendTo('#customTbarDialog');
dialog.hide();
}
function dialogOverlay() {
dialog.hide();
}
function change(args) {
const textPlain = defaultRTE.getText();
const textHTML = defaultRTE.getHtml();
const jsonARR = {
textPlain,
textHTML,
};
// FileMaker.PerformScriptWithOption('RTE-DATA', JSON.stringify(jsonARR), '5');
}
document.getElementById("defaultRTE").onfocusout = function()
{FileMaker.PerformScriptWithOption ( '🟠invisiPanel_nav+JSFunction', "JSFn_fromCode", '5' )
()}
function changeStyle(PadLeft, PadRight){
var element = document.getElementById('defaultRTE');
element.style.paddingLeft = (PadLeft);
element.style.paddingRight = (PadRight);
}
/* DateTime */
let dateTime;
function quickToolbarOpen(args) {
document
.getElementById('custom_tbar')
.addEventListener('click', dateTimeStamp);
}
function dateTimeStamp() {
defaultRTE.contentModule.getEditPanel().focus();
range = selection.getRange(document);
saveSelection = selection.save(range, document);
if (defaultRTE.formatter.getUndoRedoStack().length === 0) {
defaultRTE.formatter.saveData();
}
saveSelection.restore();
dateTime = new Date();
const formattedDate = dateTime.toLocaleDateString('en-GB'); // Format date as DD-MM-YYYY
const timeElement = `✏️<time>(${formattedDate})</time>`;
// string altered to show just date text in the html... ` ✏️<time datetime="${dateTime.toISOString()}">(${formattedDate}) </time>`;
defaultRTE.executeCommand('insertHTML', timeElement);
defaultRTE.formatter.saveData();
defaultRTE.formatter.enableUndo(defaultRTE);
}
/* DateTime */
function onActionComplete(args) {
if (args.requestType === 'SourceCode') {
defaultRTE
.getToolbar()
.querySelector('#custom_tbar')
.parentElement.classList.add('e-overlay');
} else if (args.requestType === 'Preview') {
defaultRTE
.getToolbar()
.querySelector('#custom_tbar')
.parentElement.classList.remove('e-overlay');
}
}
function quickToolbarOpen() {
debugger;
var customBtn = document
.getElementsByClassName('e-rte-inline-popup')[0]
.querySelector('#custom_tbar');
customBtn.onclick = () => {
debugger;
// Initialization of Popup
if (!document.getElementById('find_replace')) {
defaultRTE.contentModule.getEditPanel().focus();
dialog.element.style.display = '';
range = selection.getRange(document);
saveSelection = selection.save(range, document);
dialog.show();
}
};
}
let button = new ej.buttons.Button({});
button.appendTo('#find');
function findContent() {
var contentDiv = defaultRTE.inputElement;
var content = contentDiv.innerHTML;
return content;
}
document.getElementById('find').onclick = () => {
var searchText = document.getElementById('findText').value;
var content = findContent();
if (searchText != '') {
if (checkBoxObj.checked) {
content = content.replace(/<span class="highlight">|<\/span>/g, '');
// Highlight all occurrences of the search text
content = content.replace(new RegExp(searchText, 'g'), function (match) {
return '<span class="highlight">' + match + '</span>';
});
} else {
content = content.replace(/<span class="highlight">|<\/span>/gi, '');
// Highlight all occurrences of the search text
content = content.replace(new RegExp(searchText, 'gi'), function (match) {
return '<span class="highlight">' + match + '</span>';
});
}
defaultRTE.inputElement.innerHTML = content;
}
};
let button1 = new ej.buttons.Button({});
button1.appendTo('#replaceAll');
document.getElementById('replaceAll').onclick = () => {
var content = findContent();
var searchText = document.getElementById('findText').value;
var replaceText = document.getElementById('replaceText').value;
if (searchText != '' && replaceText != '') {
if (checkBoxObj.checked) {
content = content.replace(/<span class="highlight">|<\/span>/g, '');
var replacedContent = content.replace(
new RegExp(searchText, 'g'),
replaceText
);
} else {
content = content.replace(/<span class="highlight">|<\/span>/gi, '');
var replacedContent = content.replace(
new RegExp(searchText, 'gi'),
replaceText
);
}
defaultRTE.inputElement.innerHTML = replacedContent;
}
};
let button2 = new ej.buttons.Button({});
button2.appendTo('#replace');
document.getElementById('replace').onclick = () => {
var content = findContent();
var searchText = document.getElementById('findText').value;
var replaceText = document.getElementById('replaceText').value;
if (searchText != '' && replaceText != '') {
var matches = content.match(new RegExp(searchText, 'gi'));
if (matches && matches.length > 0) {
// Highlight the current match
content = content.replace(
new RegExp('(' + searchText + ')', 'i'),
'<span class="highlight">$1</span>'
);
}
var currentIndex = 0;
if (matches && matches.length > 0) {
// Replace the current match
var currentMatch = matches[currentIndex];
content = content.replace(new RegExp(currentMatch, 'i'), replaceText);
// Update the content with the replaced text
defaultRTE.inputElement.innerHTML = content;
// Highlight the next match if it exists
currentIndex++;
if (currentIndex < matches.length) {
defaultRTE.inputElement.innerHTML = content.replace(
new RegExp('(' + searchText + ')', 'i'),
'<span class="highlight">$1</span>'
);
} else {
// All matches replaced
currentIndex = 0;
matches = [];
}
}
}
};
function Close() {
var content = findContent();
content = content.replace(/<span class="highlight">|<\/span>/gi, '');
defaultRTE.inputElement.innerHTML = content;
dialog.hide();
}
function dialogOpen() {
document.getElementById('findText').value = '';
document.getElementById('replaceText').value = '';
}
Query 1: When I include both Custom button’s codes for DateStamp + Find/Replace, the DateStamp one stops working.
We suspect the button element is missing the unique ID causing the issue. Please find the updated sample for your reference.
In the sample we have configured to open the Find and Replace dialog, Inline toolbar using Keyboard shortcuts such as CTRL + F and then CTRL + SHIFT respectively.
Code Snippet:
var customHTMLModel = { // formatter is used to configure the custom key
keyConfig: {
'find-replace': 'ctrl+f',
'inle-toolbar': 'ctrl+shift'
}
};
var defaultRTE = new RichTextEditor({
height: 500,
formatter: new ej.richtexteditor.HTMLFormatter(customHTMLModel),Query 2: How to make a horizontal rule button
We have made a sample to demonstrate the usage of the horizontal rule. Please find the code snippet attached sample for your reference.
Code Snippet:
items: [
{
tooltipText: 'Horizontal Line',
template: '<button class="e-tbar-btn e-control e-btn e-lib e-icon-btn" type="button" id="defaultRTE_toolbar_Horizntl_Line" tabindex="-1" style="width: auto;"><span class="e-btn-icon e-line e-icons"></span></button>',
command: 'Custom',
subCommand: 'HorizontalLine',
click: function () {
insertHorizontalRule();
}
},
function insertHorizontalRule() {
defaultRTE.formatter.saveData();
defaultRTE.executeCommand('insertHorizontalRule');
defaultRTE.formatter.saveData();
defaultRTE.formatter.enableUndo(defaultRTE);
}Query 3: Can I use the Slash menu to insert DateTime
Yes in slash menu settings you can pass custom items to perform custom actions please find the attached sample for the implementation of Date time using the slashMenuSettings and then slashMenuItemSelect event.
Code Snippet:
slashMenuSettings: {
items: ['Heading 1', 'Heading 2', 'Heading 3', 'Blockquote', {
iconCss: 'e-day e-icons',
text: 'DateTime Stamp',
description: 'Insert the Current Date Time',
type: 'Custom',
command: 'DateTime',
}],
enable: true
},
slashMenuItemSelect: function (e) {
if (e.itemData.command === 'DateTime') {
insertDateTimeStamp();
}
},Sample:
https://stackblitz.com/edit/kj8nat?file=index.js,index.html
Documentation:
Customise shortcuts: https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/how-to/shortcut-key
Note:
Please be aware that the find and replace functionality is an example implementation. You may customize it to suit your requirements.
Thank you so much for this Gokulraj. It has helped me hugely in getting these aspects working and in cleaning up (and better understanding) my code. I’m not a programmer/developer and so it has taken me some time to put it together, as I had to combine the code I posted and which you kndly adapted, with other code I use in my solution and also I had to try and understand what was happening with a nasty BUG with the Find-Replace and perhaps more importantly, with general use, when text is pasted into the RTE??
I fully understand that Find-Replace is NOT definitive and (I hope I’ve understood correctly) Syncfusion is working on including Find-Replace as a standard button?
The problems I’ve come across resemble closely to those that I posted about at the end of August (https://www.syncfusion.com/forums/191200/remove-the-grey-border-from-the-richtexteditor?reply=zYydcz) and which I understood where targeted to be fixed in a September update? They both seem very similar which is why I thought I’d post this new screen-grab-video, in case you are not aware of the issues.
Essentially, it seems to me that there may be a problem with the use (or interpretation) of the <span> tag being added into the html. What’s amazing is the mayhem it incites and also the very bad bit … potential data-loss, as text is simply wiped out.
I hope this may be useful.
N.B. … adding the <scan> tag to your StackBlitz code, has exactly the same result.
____________________________________
Regarding the other aspects:
Hr … Perfect! Thanks so much.
Slash-Menu … Great!
Keyboard Shortcuts … Wonderful!
Last question …
The FindReplace icon doesn’t work in e.g. fluent(2) or material3. I’ve tried e754, which worked in the past, but not with the code I now have.
Grant
Query 1: Bug with Find and replace for the pasted content.
We will check and fix the custom sample issue and provide updated sample.
Query 2: Find and replace tool support
We have considered this requirement as a feature request. Now you can track the status of the feature in the below feedback link.
Feedback: https://www.syncfusion.com/feedback/46143/
The above feature will be implemented in any one of the future volume releases. Generally, we will plan the feature implementation based on the customer request count, feature rank, and wishlist plan. You can upvote the feature request feedback so that it gets support and will be ranked higher for implementation.
Query 3: Using EJ2 icons inside button in various theme.
In the below sample code in the button we icon is added by the class name e-search-3 and e-icons. However search-3 is not present in the fluent2 and Material 3.
You can change the class name to e-search to get the below icon in the Material 3 and Fluent 2 theme.
Please find the documentation for the available icons in all themes.
Code Snippet:
{ tooltipText: 'Find and Replace', template: '<button class="e-tbar-btn e-control e-btn e-lib e-icon-btn" type="button" id="defaultRTE_toolbar_Find_And_Replace" tabindex="-1" style="width: auto;"> <span class="e-search e-icons"></span></button>', command: 'Custom', subCommand: 'FindAndReplace', click: function () { openFindAndReplaceDialog(); } }, |
Reference:
Thank you Gokulraj.
Query 3 - The icon now shows. 🙂
Query 2 - I'm a bit confused about whether or not this is actively being worked on.
The link you provided is for fixing a Kanban ... but aside from that, I had this conversation back in May, when Vinitha Jeyakumar replied (https://support.syncfusion.com/support/tickets/568091#update-6164277) that it has been given "high priority in our upcoming releases".
Obviously 'upcoming' could be any time in the future, but I was assuming that it is being actively worked on. Has this changed? Is this no longer the case?
Query 1 - The Is there somewhere where I can keep up-to-date about changes/progress in this regard?
Regards,
Grant
Hi Grant Symon,
Query 1: Is there somewhere I can keep up-to-date on changes or progress in this regard?
We have reviewed your query, and we would like to inform you that there are various use cases that need to be addressed in a sample-level application, which makes it challenging to include this feature immediately. We have therefore considered this request as a feature enhancement, and it will be included in one of our upcoming releases. Please track the below feedback for further updates.
Query 2: I'm a bit confused about whether or not this is actively being worked on.
We apologize for any inconvenience. You can find updates on the "Find and Replace" feature request for the Rich Text Editor content here: Find and Replace support for content of Rich Text Editor in JavaScript | Feedback Portal.
Currently, we plan to start development on the feature based on user demand and customer votes. Please consider upvoting this feature to help prioritize it. We review and prioritize requested features for each release based on user interest.
Regards,
Vinothkumar
Hi Vinothkumar and thank you for the reply.
Re: Find=Replace feature implementation:
OK, I understand that this is NOT currently being actively worked on.
( I cannot use the sample Find-Replace code as it stands, because if a record has the <span> tag problem, then simply typing a letter in the Find-Replace dialog, destroys my text ).
__________________________________________________
Question ...
Would it be fairly straightforward for you to make a SIMPLIFIED version of the Find-Replace code, which ONLY performs a FIND and could this workaround the <span> problem??? ( So effectively, the 'Replace' part of the code is removed, leaving only the Highlighting aspect? )
Something like this:
• Open FIND dialog
• Type word
• Words are HIGHLIGHTED
• Dialog has 2 Close Buttons
• Button 1 = Dialog closes and words REMAIN HIGHLIGHTED
• Button 2 = Dialog closes and HIGHLIGHTS DISAPPEAR
• Clear highlights by re-opening the Dialog, re-typing the word, then applying Button 2
This is how an early version of Find-Replace worked ... the only problem with it is that it also breaks with the <span> tag and results in data-loss.
(What is obviously essential, is that it doesn’t destroy my text, or as I pointed out in that other thread, it converts base64 into text, thus leaving my document unusable).
Regards,
Grant
Hi Grant Symon,
We apologize for the inconvenience.
We have addressed the <span>-related issue and simplified the sample. In the updated sample, the replace dialog has two buttons: 'Close (With Highlight)' and 'Replace All.' When you click the 'Close' button, the dialog will close, and the highlighted text will remain. If you click 'Replace All,' it will replace all occurrences of the text entered in the Replace input field. Please review the sample.
Sample: https://stackblitz.com/edit/kj8nat-uky2bh?file=index.js,index.html
Screenshot:
Please let us know if you need any further assistance.
Thank you so much for this Vinothkumar. This enables me to keep using Syncfusion. I’ve managed to keep using it up to this point, because I use it inside a Filemaker solution and so I’ve been able to search using other tools, but it’s a far from ideal workaround.
There are a few things that I’ve noted, that could be improved.
Also..
Hi Grant Symon,
Sorry for the inconvenience.
We would like to inform you that there are multiple use cases that need to be addressed at the sample level, which makes it difficult to address this issue immediately at the application level. Therefore, we have considered this request as a feature enhancement, and it will be included in one of our upcoming releases. You can track the progress of this feature via the following feedback link:
Feedback: Find and Replace support for content of Rich Text Editor
Thank you for your understanding and patience.
