深圳科技网站建设最近新闻头条

vue项目中使用编辑器，轻量，操作栏选取自己需要的

官网地址：用于 Vue React | wangEditor

使用在vue项目中引入
 

npm install @wangeditor/editor --savenpm install @wangeditor/editor-for-vue --save

封装成组件使用

<template><div style="border: 1px solid #ccc; margin:0 auto;"><Toolbarstyle="border-bottom: 1px solid #ccc;":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="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.editorif (editor == null) returneditor.destroy() }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>