Learn js online html (rich text, what you see is what you get) editor_basic knowledge

What you want is a WYSIWYG HTML editor. Simply put, it requires a few basic steps:

1. You need an edit box that can be edited while showing effects. Textarea doesn't work. It can only be used to enter plain text and cannot display text styles such as colors and italics, just like Notepad.
You can use an iframe to achieve this, and modify the designMode attribute of the iframe so that it can be edited.

Copy code The code is as follows:

<script>myEditer.document.designMode = 'on';</script>

So you can There is writing in this iframe area.

2. Select the text you want to add style to. Usually when we use WORD to edit the style of a piece of text, we usually type it first and then edit the style. So you need a way to select the text to be processed. JS's selection.createRange() can select text and return an object. You can get the selected text by accessing the text property of the object.

Copy code The code is as follows:

<script> <br> myEditer.document.designMode = 'on'; <br>function Bold(){ <br>var sel = myEditer.document.selection.createRange(); <br>alert(sel.text); <br>} <br></script>

3. Change the style of the selected text. selection.createRange() selects text and returns an object. This object has a method execCommand(), which can be used to change the style of the selected text.

Copy code The code is as follows:

<script> <br> myEditer.document.designMode = 'on'; <br>function Bold(){ <br>var sel = myEditer.document.selection.createRange(); <br>//alert(sel.text); <br>sel .execCommand("Bold") <br>} <br></script>

Common usage of execCommand():
Font - Song Dynasty, Heilongjiang , regular script, etc.
execCommand("fontname","",font)
Font size - font size
execCommand("fontsize","",font size)
emphasis
execCommand("Bold ")
Italic
execCommand("Italic")
Underline
execCommand("Underline")
Strikethrough
execCommand("StrikeThrough")
Left
execCommand ("JustifyLeft")
right
execCommand("JustifyRight")
center
execCommand("JustifyCenter")
cut
execCommand("Cut")
copy
execCommand("Copy")
Paste
execCommand("Paste")
Cancel operation--you can cancel infinitely after IE5.0
execCommand("Undo")
Repeat operation
execCommand("Redo")

Use buttons to implement each of the above usages, and you will have completed a simple visual text editor.
Document.execCommand() usage instructions

Copy code The code is as follows:

Position allows absolutely positioned objects to be moved by dragging.
AbsolutePosition sets the position attribute of the element to "absolute" (absolute).
BackColor sets or gets the background color of the currently selected area.
BlockDirLTR is not currently supported.
BlockDirRTL is not currently supported.
Bold switches the bold display of the currently selected area.
BrowseMode is not currently supported.
Copy Copies the current selection to the clipboard.
CreateBookmark creates a bookmark anchor or gets the name of the bookmark anchor for the current selection or insertion point.
CreateLink Inserts a hyperlink on the current selection, or displays a dialog box allowing the user to specify the URL of a hyperlink to insert for the current selection.
Cut Copies the current selection to the clipboard and deletes it.
Delete delete the currently selected area.
DirLTR is not currently supported.
DirRTL is not currently supported.
EditMode is not currently supported.
FontName sets or gets the font of the currently selected area.
FontSize sets or gets the font size of the currently selected area.
ForeColor sets or gets the foreground (text) color of the currently selected area.
FormatBlock sets the current block formatting tag.
Indent increases the indent of the selected text.
InlineDirLTR is not currently supported.
InlineDirRTL is not currently supported.
InsertButton covers the current selection with a button control.
InsertFieldset covers the currently selected area with a box.
InsertHorizontalRule covers the current selection with a horizontal line.
InsertIFrame covers the current selection with an inline frame.
InsertImage covers the current selection with an image.
InsertInputButton covers the current selection with a button control.
InsertInputCheckbox covers the currently selected area with a checkbox control.
InsertInputFileUpload overwrites the current selection with the file upload control.
InsertInputHidden inserts a hidden control to cover the currently selected area.
InsertInputImage covers the current selection with an image control.
InsertInputPassword overwrites the current selection with password control.
InsertInputRadio covers the currently selected area with a radio button control.
InsertInputReset overwrites the current selection with the reset control.
InsertInputSubmit overwrites the current selection with a submit control.
InsertInputText covers the current selection with text control.
InsertMarquee covers the currently selected area with empty subtitles.
InsertOrderedList switches whether the currently selected area is a numbered list or a regular formatted block.
InsertParagraph overwrites the current selection with newlines.
InsertSelectDropdown covers the currently selected area with a drop-down box control.
InsertSelectListbox covers the currently selected area with a list box control.
InsertTextArea covers the currently selected area with a multi-line text input control.
InsertUnorderedList switches whether the currently selected area is a bullet list or a regular formatted block.
Italic switches the current selection area to italic display or not.
JustifyCenter Centers the currently selected area in the formatting block.
JustifyFull is not currently supported.
JustifyLeft will align the formatting block of the currently selected area to the left.
JustifyNone is not currently supported.
JustifyRight Right-aligns the formatting block where the currently selected area is located.
LiveResize forces the MSHTML editor to continuously update an element's appearance during scaling or movement, rather than only updating after the movement or scaling is complete.
MultipleSelection allows more than one site selectable element to be selected at a time when the user holds down the Shift or Ctrl key.
Open.
Outdent reduces the indent of the formatting block where the selected area is located.
OverWrite switches the insertion and overwriting of text state.
Paste overwrites the current selection with the clipboard contents.
PlayImage is not currently supported.
Print opens the print dialog box so the user can print the current page.
Redo.
Refresh refreshes the current document.
RemoveFormat Removes the formatting tag from the current selection.
RemoveParaFormat is not currently supported.
SaveAs saves the current web page as a file.
SelectAll selects the entire document.
SizeToControl is not currently supported.
SizeToControlHeight is not currently supported.
SizeToControlWidth is not currently supported.
Stop Stop.
StopImage is not currently supported.
StrikeThrough is not currently supported.
Subscript is not currently supported.
Superscript is not currently supported.
UnBookmark deletes all bookmarks from the current selection.
Underline switches the underline of the currently selected area to display or not.
Undo Undo.
Unlink deletes all hyperlinks from the current selection.
Unselect clears the selected status of the currently selected area.

A simple open source editor

Copy the code The code is as follows: