WangeDitor 富文本编辑器 vue2项目 图片上传服务器转地址存编辑器中

安装: @wangeditor/editor 和 @wangeditor/editor-for-vue

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save 
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

整体思路: 创建wangeditor.vue文件 当作子组件使用 ,需要使用的页面直接引入组件即可

创建wangeditor组件

.vue文件中引入

import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

引入style样式

<style src="@wangeditor/editor/dist/css/style.css"></style>

html

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            :style&