Introduction to wangeditor (entry level)

One 、 What is a rich text editor ？

I believe many friends have used rich text editors . Rich text editor （Rich Text Editor,RTE） It can be embedded in the browser , WYSIWYG text editor . Many functions can be realized , Such as changing font color , Insert pictures, videos, etc , It's widely used . There are also many mainstream editors on the market , Such as TinyMCE,CKEditor,wangEditor etc. . Each model has its own unique features , Only after using it can you experience it deeply . today , We mainly introduce wangEditor. Because recently wangEditor, So as a novice , Record your experience as follows .

Two 、wangEditor Introduce

wangEditor It's a lightweight web Rich text editor , Convenient configuration , Easy to use , Free open source . Support IE10+ browser .

3、 ... and 、 download

npm i wangeditor --save 
 or 
yarn add wangeditor --save

Four 、 Use

4-1： Reference to project

1. If it's through npm/yarn download wangeditor ;

import E from 'wangeditor'
const editor = new E('#div1')
//  perhaps  const editor = new E( document.getElementById('div1') )
editor.create()

2.js There are also two ways of external chain reference （ Online link references and local resource references ）

<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<!-- Here src It can also be a local resource link  -->
<script type="text/javascript">
const E = window.wangEditor
const editor = new E("#div1")
//  perhaps  const editor = new E(document.getElementById('div1'))
editor.create()
</script>

Be careful ： One page can create multiple editors

// Create multiple editors 
<script>
var E = window.wangEditor
// The first editor 
var editor1 = new E('#div1')
editor1.create()
// Second editor 
var editor2 = new E('#div2')
editor2.create()
</script>

4-2： Separate the menu bar and edit bar areas

<div id="div3"> Menu area </div>
<div>--------------------------------</div>
<div id="div4"> Editing area </div>

<script>
// First instantiation wangEditor, Use two more DOM Rendering menu area and editing area var E = window.wangEditorvar editor2 = new E('#div3','#div4')
editor2.create()
</script>

4-3： Configure the contents of menu area and editing area

<script>
        var E = window.wangEditor
        var editor1 = new E('#div1')
        // Configuration menu bar 
        //  If the menu bar is not wide enough , It is suggested to simplify the menu items .
        editor1.customConfig.menus = [
            'head', //  title 
            'bold', //  bold 
            'fontSize', //  Font size 
            'fontName', //  typeface 
            'italic', //  Italics 
            'underline', //  Underline 
            'strikeThrough', //  Delete line 
            'foreColor', //  Text color 
            'backColor', //  The background color 
            'link', //  Insert link 
            'list', //  list 
            'justify', //  Alignment mode 
            'quote', //  quote 
            'emoticon', //  expression 
            'image', //  Insert a picture 
            'table', //  form 
            'video', //  Insert the video 
            'code', //  Insert code 
            'undo', //  revoke 
            'redo' //  repeat 
        ]
        //  Configure colors 
        editor1.customConfig.colors = [
            '#000000',
              ...
            //  self-addenable 
        ]
        //  Configure Fonts 
        editor1.customConfig.fontNames = [
            ' Song style ',
            ' Microsoft YaHei ',
            'Arial',              ...
            //  self-addenable 
        ]

        editor1.create()
    </script>

Last , Enclosed wangEditor Official documents , More to explore ！