vue项目中使用编辑器,轻量,操作栏选取自己需要的
官网地址:用于 Vue React | wangEditor
使用在vue项目中引入
html
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save
封装成组件使用
javascript
<template>
<div style="border: 1px solid #ccc; margin:0 auto;">
<Toolbar
style="border-bottom: 1px solid #ccc;"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
/>
</div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default Vue.extend({
components: { Editor, Toolbar },
props: {
value: { type: String, required: true },
},
data() {
return {
editor: null,
html: '',
toolbarConfig: {
excludeKeys:[
"blockquote","header1","header2","header3",
"headerSelect", "fontFamily","code","clearStyle","todo", "emotion","insertLink","insertImage", "insertTable","group-video","codeBlock","redo","headerSelect","insertVideo",
]
},
editorConfig: { placeholder: '请输入内容...' ,
MENU_CONF: {
uploadImage: {// 配置上传图片
customUpload: this.update
},},},
mode: 'simple', // or 'default'
}
},
created(){ },
methods: {
onCreated(editor) {
this.editor = Object.seal(editor)
},
onChange(editor) {
this.$emit('change', editor.getHtml());
},
getEditorText() {
const editor = this.editor;
if (editor == null) return;
},
update(files,insertFn){//图片上传
var formData = new FormData();
formData.append('file', files);
//根据后台提供的图片上传接口,进行接口配置和上传
this.apiSever.post(this.URl.UPLOAD,formData, res => {
insertFn(res.data.url);
})
},
},
mounted() {
this.$nextTick(() => {
this.html = this.value
})
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy()
}
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>