Vue--use wangEditor rich text

foreword

wangEditor is a simple, open-source rich text editor based on jQuery, while Vue.js is a popular JavaScript framework. Combining wangEditor with Vue.js can easily implement rich text editing in Vue applications. This article will introduce how to use wangEditor in Vue, including installing and configuring wangEditor, using wangEditor in Vue components, and related code instructions.

1. Install wangEditor

First, you need to install wangEditor. It can be installed via npm or yarn:

bashnpm install wangeditor --save

or

bashyarn add wangeditor

2. Introduce wangEditor

To introduce wangEditor into a Vue component, you need to <script>add the following code to the component's tag:

javascriptimport wangeditor from 'wangeditor'
import 'wangeditor/dist/css/wangEditor.min.css'

3. Use wangEditor

Add the following code to the tag of the Vue component <template>to display the wangEditor editor:

html<div ref="editor"></div>

Add the following code to the tag of the Vue component <script>to initialize the wangEditor editor:

javascriptexport default {
mounted () {
this.initEditor()
},
methods: {
initEditor () {
const editor = new wangeditor(this.$refs.editor)
editor.create()
// 获取编辑器内容
const content = editor.getContent()
console.log(content)
}
}
}

In initEditorthe method, a new wangEditor instance is first created and passed in this.$refs.editoras the editor container. Then, call editor.create()the method to create the editor. Finally, use editor.getContent()the method to get the content of the editor and print it to the console.

4. Use the event callback of wangEditor

wangEditor provides a variety of event callbacks, which can implement various functions in the editor. For example, you can use readyan event callback to listen to the editor's loading completion event:

javascriptinitEditor () {
const editor = new wangeditor(this.$refs.editor)
editor.config.customConfig = {
ready: function () {
console.log('wangEditor ready')
}
}
editor.create()
}

In readythe callback function, you can execute some code that needs to be executed after the editor is loaded. For example, a message can be output in the console, indicating that wangEditor has been loaded.

Next article vue----wangEditor upload image