When I did my graduation design, I needed a rich text editor because it involved uploading many pictures between paragraphs. I chose CKEditor originally, but later I found that WangEditor was more suitable for my usage habits.

WangEditor – A lightweight Rich text Web editor that is easy to configure and easy to use.

Here are the steps I took to use WangEditor: 1. Go to the official website to view the example at www.wangeditor.com/

WangEditor supports NPM download and CDN reference. In order to avoid network congestion, I choose to download the file and reference it locally, that is, directly download wangEditor.min.js.

Wangeditor.min.js, copy the source code to an empty js file, and reference the new wangeditor.min.js file

3. Specific use

Since I need to store the edited data in a Textarea, and I need to hide the Textarea for the sake of the page, my reference is as follows:

<div id="div1">
    <p>Welcome to use<b>wangEditor</b>Rich text editor</p>
</div>
<textarea id="text1" style="display: none" name="content"></textarea>

<! Wangeditor.min.js -->
<! If you want to store data with textarea, you need to import jquery.min.js to use the $keyword.
<! Jquery.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    const $text1 = $('#text1')
    editor.config.onchange = function (html) {
        // Step 2, monitor the changes and synchronize updates to the textarea
        $text1.val(html)
    }
	// The editor's z-index defaults to 10000 and can be set to other values
	editor.config.zIndex = 1
	// Set the height of the edit area to 500px
	editor.config.height = 500
	// Use base64 format to save images. After setting, local images can be uploaded
	editor.config.uploadImgShowBase64 = true
    editor.create()
    // Initialize the value of textarea
    $text1.val(editor.txt.html())
</script>
Copy the code

When base64 is used, the form data submission method should also change to encType =”multipart/form-data”.

CKEditor: ckeditor.com/

WangEditor is at www.wangeditor.com/