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

  1. Gets the complete HTML code for the editor area

    this.editor.txt.html();

  2. Gets the editor’s plain text content

    this.editor.txt.text()

  3. Gets formatted plain text

    this.editor.txt.formatText();

  4. 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-lengthFunction.

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.