var selection = new ej.richtexteditor.NodeSelection(); let saveSelection; var rteObj = new ej.richtexteditor.RichTextEditor({ quickToolbarOpen: quickToolbarOpen, inlineMode: { enable: true, onSelection: false, }, toolbarSettings: { items: [ 'Bold', 'Italic', { tooltipText: 'Date Time Stamp', template: ` <select id="dropdown"> <option value='select'>Date Time</option> </select>`, }, ], }, }); rteObj.appendTo('#defaultRTE');
function getDateTime() { const currentDate = new Date(); const y_m_d = `${currentDate.getFullYear()}-${ currentDate.getMonth() + 1 }-${currentDate.getDate()}`; const d_m_Y = `${currentDate.getDate()}-${ currentDate.getMonth() + 1 }-${currentDate.getFullYear()}`;
const h_m_s = `${currentDate.getHours()}-${currentDate.getMinutes()}-${currentDate.getSeconds()}`; const h_m_s_am = getCurrentDateTimeAMPM(); const newOptions = [ { value: 'h_m_s', text: h_m_s }, { value: 'y_m_d', text: y_m_d }, { value: 'd_m_Y', text: d_m_Y }, { value: 'h_m_s_am', text: h_m_s_am }, ]; return newOptions; }
function quickToolbarOpen(args) { const currentDateTime = getDateTime(); const selectElement = document.getElementById('dropdown');
if (document.querySelectorAll('#dropdown option').length == 1) { currentDateTime.forEach((e) => { const newOption = document.createElement('option'); newOption.text = e.text; newOption.value = e.value; selectElement.appendChild(newOption); }); } else { const options = document.querySelectorAll('#dropdown option'); options.forEach((e) => { switch (e.value) { case h_m_s: e.text = currentDateTime.text; break; case y_m_d: e.text = currentDateTime.text; break; case d_m_Y: e.text = currentDateTime.text; break; case h_m_s_am: e.text = currentDateTime.text; break; } }); }
selectElement.addEventListener('change', function (event) { console.log('Selection changed:', event.target.text); rteObj.contentModule.getEditPanel().focus(); range = selection.getRange(document); saveSelection = selection.save(range, document); if (rteObj.formatter.getUndoRedoStack().length === 0) { rteObj.formatter.saveData(); } saveSelection.restore(); const curDateTime = getDateTime(); const dateTimeStamp = curDateTime.filter( (item) => item.value == event.target.value ); rteObj.executeCommand('insertHTML', dateTimeStamp[0].text); rteObj.formatter.saveData(); rteObj.formatter.enableUndo(rteObj); }); }
| 
