primers

Put the demo in a prominent position

Rich Text Editor is an editing tool that we do not often use in life. Now there are many fully functional and powerful editors, such as Quill Rich Text Editor, UEditor, etc., which are excellent Rich Text editors. Even Word, which we all use, is the best and most popular rich text editor.

Today we are going to implement a lightweight editor using document.execCommand.

When an HTML document is switched to designMode, the document object exposes the execCommand method, which allows commands to be run to manipulate the contents of an editable area. Most commands affect the selection of the document (bold, italic, etc.), while others insert new elements (add links) or affect entire lines (indent). When using contentEditable, calling execCommand() affects the editable elements of the current activity.

Document. ExecCommand and contentEditable work together to achieve what we want.

After reviewing execCommand’s documentation, we decided to implement the following features

  1. Select Text Style Adjustment
    • italics
    • The bold
    • The underline
    • Delete the line
  2. Alignment adjustment
    • The left
    • Align right
    • In the middle
    • full-justified
  3. The indentation to adjust
    • Right indent
    • The indentation left
  4. The list of operations
    • An ordered list
    • Unordered list
  5. The subscript
  6. Text operations
    • select all
    • copy
    • paste
  7. Basic font size adjustment
  8. Basic color adjustments
  9. Basic font adjustments
  10. undo&redo

implementation

When it comes to editors, there are basically two parts

  • The upper part is divided into control areas for various control modifications to the text
  • The lower part is divided into text areas for entering and displaying text styles

So we can just draw these two parts in HTML

<div id="wrapper">
    <div id="control-area"></div>
    <div id="text-area" contenteditable></div>
</div>Copy the code

Note that since the text area is editable, the property of contenteditable is added so that you can freely enter text in the text area. OK, the prototype of the editor is already out

The next step is to operate the two parts separately, in the control area, which should be the various buttons. See the syntax for Document. execCommand:

There are two apis that primarily control styles: aCommandName and aValueArgument. Also, the command name aCommandName is included in each execCommand, aCommandName and aValueArgument. So we need to pass two variables on each button. The first is mandatory aCommandName and the second is optional aValueArgument. We consider using HTML5’s new attribute data-* to pass these two parameters:

<! <a href="#" data-command='italic' onclick="changeStyle(this.dataset)"> </a> <! <a href="#" data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1 </a>Copy the code

Here are two basic button examples, one is no parameter, one is a parameter, and then do a judgment on the JS side to implement the function:

Const changeStyle = (data) => {// One line of core code to implement basic editor data.value? document.execCommand(data.command, false, data.value):document.execCommand(data.command, false, null) }Copy the code

Is it easy?

Finally, having only two buttons is definitely not enough. We need to expand the number of buttons and the functionality of the editor. We will implement the functions listed in accordance with the list of functions decided to be implemented in section 1, one by one. Finally, we’ll beautify the buttons and text areas to create a lightweight rich text editor

Here’s our preview:

You can visit my blog to try out this little rich text editor, and hopefully click a star on my Github project. Thank you

By the way, post a preview of codepen, some networks may not load out…

conclusion

In fact, our rich text editor is a very simple implementation that wraps only one layer around contentEditable and Document. execCommand, and all style implementations invoke the same API.

Most of the really powerful rich text editors that are popular today have implemented their own version of contentEditable, abandoning their dependence on the native features of browsers (contentEditable). Everyone says that rich text editors are a sinkhole, and they are. Native Document. execCommand has too few features, too many bugs, and writing your own to edit text breaks the undo/redo stack for contentEditable. All in all, the most important features of contentEditable are the mix of styles, HTML semantic environments and calling pages, which are prone to overwriting. Excellent rich text editors generally use their own event-listening mechanisms to provide functionality similar to that of contentEditable. These things are too tedious and complicated to be discussed here