Bootstrap Rich Text Editor-bootstrap-wysiwyg,-bootstrap-wysiwyg

Bootstrap Rich Text Editor-bootstrap-wysiwyg,-bootstrap-wysiwyg

During the input of an English question, the following questions are frequently asked:

My friend watches dragon boat races at the Dragon Boat Festival. (ask the underlined part)

-- _______ Is the Double Ninth Festival?

-- It is in October.

In the above question, we need to find a rich text editor that can edit the underline, and in order to speed up the editing, you can pre-define several common modes in question input, such as automatic entry of the -- and _____ symbols.

After a survey on the Internet, we found that bootstrap-wysiwyg can meet our needs.

This control can be found in https://github.com/steveathon/bootstrap-wysiwyg( latest version ).

In the official examples of bootstrap-wysiwyg/examples/html-editor.html, you can find the relevant html editor usage.

In this official example, after downloading it, you will find that it cannot be used, mainly because of the lack of jquery. hotkeys. js and google-code-pretloads/src/pretloads. js, which can be merged from https://github.com/mindmup/bootstrap-wysiwyg/tree/master/external.

The specific rules for using this control are relatively simple. This article will not describe it in detail. For details, refer to the instructions on the official website. You can simply use it without a few lines of code, readers can try it on their own.

To automatically output the predefined template text by clicking a button, the specific implementation is as follows:

<A class = "btn-default" data-edit = "insertText ____" title = ""> <I class = "fa-align-justify"> </I> </a>

In the preceding simple code, the insertText command is used in the data-edit attribute. After this command, relevant text parameters can be included.

Complete commands can be referred to: https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands