Simple use of wangEditor rich text editor

Posted by Garth Farley on Wed, 08 Dec 2021 04:07:20 +0100

introduce

Wang editor is a lightweight web rich text editor, which is easy to configure and easy to use.
Official website: www.wangEditor.com
Document: www.wangedit.com/doc
Source code: github.com/wangeditor-team/wangEditor

For Vue and React

Using wangEditor in Vue
For vue3, refer to wangEditor-with-vue3
vue2 refer to wangedior with Vue.
Using wangEditor in React
If you want to develop it yourself, please refer to wangeditor with react.
If you want to use ready-made plug-ins, please refer to want editor for react.

download

download
npm I wangedit -- save

CDN link https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js

Basic use

NPM
npm i wangeditor --save

After installation, a few lines of code create an editor:

import E from "wangeditor"
const editor = new E("#div1")
editor.create()

Common settings

Sets the height of the editing area

The editing area height defaults to 300px, which can be modified in the following ways.

const editor = new E('#div1')

// Set the editing area height to 500px
editor.config.height = 500

// Note that you configure height first, and then execute create()
editor.create()

Separation of menu and editing area

The menu and edit area are actually two separate areas

, position and size can be defined arbitrarily.

<head>
    <style>
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <p>
        container and toolbar separate
    </p>
    <div>
        <div id="toolbar-container" class="toolbar"></div>
        <p>------ I am the dividing line ------</p>
        <div id="text-container" class="text"></div>
    </div>

    <!-- introduce wangEditor.min.js -->
    <script>
        const E = window.wangEditor
        const editor = new E('#toolbar-container', '#Text container ') / / pass in two elements
        editor.create()
    </script>
</body>

Multiple editors per page

When a page uses only one editor, you can use ref to obtain page elements. When a page has two editors, you can use id to obtain page elements.

<head>
    <style type="text/css">
        .toolbar {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #CCC "> median < / div >
    <div id="div2" class="text">
        <p>first demo(Menu and editor (separate areas)</p>
    </div>

    <div id="div3">
        <p>the second demo(General)</p>
    </div>

    <!-- introduce wangEditor.min.js -->
    <script type="text/javascript">
        const E = window.wangEditor

        const editor1 = new E('#div1', '#div2')
        editor1.create()

        const editor2 = new E('#div3')
        editor2.create()
    </script>
</body>

If an error "node not found" is reported on the console, pay attention to whether v-if is used to hide the page elements, resulting in the failure to obtain DOM nodes. The two editors should pay attention to the naming conflict and use location.

Set content

html initialization content (try this way)
Write directly to the editor you want to create

Label.

<div id="div1">
    <p>Initialized content</p>
    <p>Initialized content</p>
</div>

<!-- introduce wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
</script>

js setting content
After creating the editor, use editor.txt.html(...) to set the editor content.

<div id="div1">
</div>

<!-- introduce wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
    editor.txt.html('<p>use JS Set content</p>') // Reset editor content
</script>

Add new content

After creating the editor, you can continue to append content using editor.txt.append ('< p > appended content < / P >').

Get html

Use editor.txt.html() to get the html.

It should be noted that the html code obtained from the editor is pure html without any style.

Get text

Use editor.txt.text() to get text.

Empty content

You can use editor.txt.clear() to empty the contents of the editor.

Topics: Javascript Front-end Vue.js html

Programmer Think