neditor是一款功能強大的富文本編輯器，同時vue是一個流行的前端框架，將它們結合使用可以創建出功能完善且美觀的編輯器。下面介紹如何使用neditor+vue。

1. 安裝neditor

npm install neditor --save

2. 引入neditor

import NEditor from 'neditor';
import 'neditor/dist/neditor.full.min.css';
Vue.use(NEditor);

3. 在組件中使用

<template>
<n-editor v-model="content" :config="config"></n-editor>
</template>
<script>
export default {
data() {
return {
content: '',
config: {}
}
}
}
</script>

4. 配置參數

this.config = {
toolbars: [
['bold', 'italic', 'underline', 'strikeThrough', 'foreColor'],
['link', 'unlink', 'insertImage', 'insertExpression', 'insertVideo'],
['insertTable', 'deleteTable', 'insertParagraphBeforeTable', 'insertRow', 'deleteRow', 'insertColumn', 'deleteColumn'],
['justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'],
['fullscreen', 'source', 'undo', 'redo'],
],
enableAutoSave: false,
autoHeightEnabled: true,
initialFrameHeight: 200,
elementPathEnabled: false,
maximumWords: 10000,
zIndex: 1
}

5. 獲得內容

this.$refs.editor.getContent()

6. 設置內容

this.$refs.editor.setContent(content)

這樣，一個基于neditor+vue的富文本編輯器就完成了。