JavaScript-based rich text editor, how to add a separator (< hr > tag) and this operation supports the use of system ctrl-z undo

I am now working on a JavaScript rich text editor, and I have encountered some problems. The execCommand that comes with js cannot meet the following two requirements:

1. Add a split line (that is, the hr tag) after the line, so I choose to modify directly that DOM (target is the currently selected row, and the label for each unformatted line is p)

 var Hr = "<br>

<hr id="hr-" + new Date().getVarDate()+ ""/>

<br>" var HrDOM = parseDom(Hr) var target = this.editor.selection._currentRange.startContainer var domType = target.__proto__.constructor.name if(domType != "HTMLParagraphElement"){ if(domType == "HTMLLIElement"){ if(target.parentElement.parentElement.nextSibling) target.parentElement.parentElement.parentElement.insertBefore(HrDOM, target.parentElement.nextSibling) else target.parentElement.parentElement.parentElement.appendChild(HrDOM) } else if(domType == "HTMLImageElement"){ if(target.nextSibling) target.parentElement.insertBefore(HrDOM, target.nextSibling) else target.parentElement.appendChild(HrDOM) } else{ if(target.parentElement.nextSibling) target.parentElement.parentElement.insertBefore(HrDOM, target.parentElement.nextSibling) else target.parentElement.parentElement.appendChild(HrDOM) } } else{ target.innerHTML = Hr }

2. To clear the format, the execCommand ("removeFormat") included with js can only clear the font size (such as H1 removeFormat" H2) or bold color attributes, but not the lists such as ul, ol, li, etc., so I"ll just operate on DOM

directly with a real expression.

the disadvantage of these two ways is that it doesn"t work when I need ctrl-z to undo these two operations. I don"t know if there is any way to achieve the functions I mentioned above without the problem of irrevocable.

Mar.28,2021

listen for ctrl-z events and roll back yourself

Menu