This is the 21st day of my participation in the August Text Challenge.More challenges in August
WangEditor – A lightweight Rich text Web editor that is easy to configure and easy to use.
Browser compatibility
Compatible with common PC browsers: Chrome, Firefox, Safari, Edge, QQ Browser, IE11.
Mobile terminal is not supported.
The basic use
NPM
npm i wangeditor --save
Copy the code
A few lines of code after installation create an editor:
import E from "wangeditor"
const editor = new E("#div1")
editor.create()
Copy the code
CDN
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script type="text/javascript">
const E = window.wangEditor
const editor = new E("#div1")
// 或者 const editor = new E(document.getElementById('div1'))
editor.create()
</script>
Copy the code
Normal use
Create a new one
Mounted ()
mounted(){ const random = Math.random(); const editor = new wangEditor(`#editor`) const url = this.url editor.config.onchange = (newHtml) => { this.editorData = NewHtml} editor. Config. ShowLinkImg = false / / hide network picture editor. The config. UploadImgServer = ` ${enclosing $baseUrl} / images/upload ` / / picture upload address editor. Config. UploadFileName = 'file' / / file to the name of the backend. Similar formData. Append (" file ", param file); In the file editor. Config. UploadImgAccept = [' JPG ', 'jpeg', 'the PNG, GIF, 'BMP'] / / upload picture type editor. The customconfig. Uploadimgheaders = {/ / upload request 'accept' head: '* / *', 'authorization' : 'bearer'} editor. Config. UploadImgParams = {user_id / / upload request parameters: localStorage. User_id, s_id: localStorage.s_id, random:this.random, Img_kind: 'open'} editor. Config. UploadImgHooks = {/ / upload pictures can use the callback function / / upload pictures before before: Function (XHR) {console.log(XHR) {return {// prevent: true, // MSG: 'error message needed to prompt user' //}}, // The image was uploaded and the result was returned, the image was inserted successfully: Function (XHR) {console.log('success', XHR)}, // Function (XHR, editor, resData) {console.log('fail', resData)}, Function (XHR, editor, resData) {console.log('error', XHR, resData)}, Function (XHR) {console.log('timeout')}, // Error: {errno: 0, data: [... } This format can be customInsert customInsert: Function (insertImgFn, result) {console.log('customInsert', result) InsertImgFn (result.url)}} editor.create() this.editor = editor}Copy the code
Text editor echo
This.editor.txt.html (' ${res.src_desc} ')// The editor is displayedCopy the code
Empty content
this.editor.txt.html('<p><br></p>')
Copy the code
Gets the contents of the editor
-
Gets the complete HTML code for the editor area
this.editor.txt.html();
-
Gets the editor’s plain text content
this.editor.txt.text()
-
Gets formatted plain text
this.editor.txt.formatText();
-
The editor appends new content
this.editor.txt.append(‘
Newly appended content
‘);
Enabling and disabling the editor
/ / disable editor. Disable (); / / enabled editor. The enable ();Copy the code
Editor z-index issues, sometimes editors overwrite the use of other components because of weight issues
Change z-index to 20000 for full screen before editor creation
editor.config.zindex = 20000;
editor.create();
Copy the code
Or you can change it using CSS
/* Rich text editor */. W-e-toolbar {z-index: 2! important; } .w-e-text-container { z-index: 1 ! important; }Copy the code
The editor properties
The unique ID of the editor
All configurations of the editor editor.config
$textelem.elems [0], element id editor.textelemid
Menu bar DOM node editor.$toolbarelem. elems[0], element ID Editor. toolbarElemId
Selection scope API
The selected text editor. Selection. GetSelectionText ()
District where the DOM node editor. Selection. GetSelectionContainerElem (). The elems [0]
District to the DOM node editor. Selection. GetSelectionStartElem (). The elems [0]
Selection of the end of the DOM node editor. Selection. GetSelectionEndElem () elems [0]
Folding district editor. Selection. CollapseRange ()
Determining if a constituency “empty” (i.e., without selecting any text editor. Selection. IsSelectionEmpty ()
max-length
WangEditor is temporarily unavailablemax-length
Function.
There is currently no uniform approach to rich text max-length in the industry, either productively or technically.
Max-length is generally used to limit plain text, for
If you must have a max-length for rich text, the only way to do this is to check editor.txt.text() at any time through onchange, determine the length, and disable rich text. However, there may be some unexpected problems, and you have to play it by ear.