效果

父组件ArticleText

<template><div id="ArticleText"><el-affix :offset="0"><div id="ArticleTextHead"><div id="ArticleTextHeadBack"><i class="el-icon-arrow-left"></i>文章管理</div><el-divider direction="vertical"></el-divider><div id="ArticleTextHeadTitle"><el-inputplaceholder="请输入内容"v-model="articleTitle"maxlength="100"show-word-limit></el-input><div id="ArticleTextHeadTitleOperate"><el-button type="info" plain>保存草稿</el-button><el-button type="danger" plain>发布文章</el-button><el-avatar size="medium" :src="circleUrl"></el-avatar></div></div></div></el-affix><div id="ArticleTextContent"><TextEditor v-model="content"/></div></div></template><script>import TextEditor from "@/components/TextEditor";export default {name: "ArticleText",components: {TextEditor},data() {return {articleTitle: "",content: "",circleUrl: "/B/4/2/3_kaisarh"}},}</script><style lang="scss" scoped>#ArticleText {height: 100%;width: 100%;position: relative;user-select: none;display: flex;flex-direction: column;#ArticleTextHead {height: 75px;width: 100%;//background-color: red;display: flex;align-items: center;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);z-index: 999;background-color: white;#ArticleTextHeadBack {width: 150px;font-weight: bold;font-size: 24px;display: flex;justify-content: center;align-items: center;cursor: pointer;}.el-divider {height: 24px;}#ArticleTextHeadTitle {display: flex;align-items: center;width: 90%;//background-color: yellow;position: relative;.el-input {flex: 1;}#ArticleTextHeadTitleOperate {width: 250px;margin: 0 30px;display: flex;justify-content: space-around;align-items: center;.el-avatar {cursor: pointer;}}}}#ArticleTextContent {flex: 1;margin-top: 10px;width: 100%;}}</style>

富文本编辑器子组件TextEditor

<template><div id="TextEditor"><div id="TextEditorNav"><div ref='toolbarContainer'></div></div><div id="TextEditorMain"><div id="TextEditorMainCode"><div ref='textContainer'></div></div><div id="TextEditorMainShow" v-html="articleHtml"></div></div></div></template><script>import WangEditor from 'wangeditor';import {textService, updateFile} from './../service/api/index'import axios from "axios";// 设置菜单const menus = ['head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','todo','justify','quote','emoticon','image','splitLine',]const LOCAL_BASE_URL = '/api';export default {name: "TextEditor",data() {return {articleHtml: "",editor: null}},mounted() {// 设置工具栏和编辑区分开this.editor = new WangEditor(this.$refs.toolbarContainer, this.$refs.textContainer);// 设置z-indexconst editor = this.editor;editor.config.zIndex = 1;// 设置内容变化事件editor.config.onchange = (newHtml) => {this.onChange(newHtml)};// 设置placeholdereditor.config.placeholder = '请输入博文内容';// 图片菜单配置editor.config.menus = menus;// 图片上传配置editor.config.showLinkImg = false;editor.config.showLinkImgAlt = false;editor.config.showLinkImgHref = false;// 自己实现图片上传editor.config.customUploadImg = (resultFiles, insertImgFn) => {this.updateImg(resultFiles[0], insertImgFn);}editor.create();},methods: {onChange(newHtml) {console.log(newHtml);this.articleHtml = newHtml;},updateImg(image, insertImgFn) {if (image) {const file = new FormData()file.append('image', image);updateFile(file).then(res => {if (res.status === 200) {insertImgFn(res.result);}})}}}}</script><style lang="scss" scoped>#TextEditor {height: 100%;width: 100%;position: relative;display: flex;flex-direction: column;#TextEditorNav {height: 40px;width: 98%;margin-left: 1%;margin-right: 1%;background-color: yellow;}#TextEditorMain {flex: 1;width: 100%;margin-top: 10px;margin-bottom: 10px;display: flex;justify-content: space-around;#TextEditorMainCode,#TextEditorMainShow {box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width: 48%;height: 100%;}}.toolbar {border: 1px solid #ccc;}.text {border: 1px solid #ccc;min-height: 400px;}}</style>

服务器端图片上传接口

router.post('/uploadImage', (req, res, next) => {let form = new formidable.IncomingForm();form.uploadDir = path.join(__dirname, '../public/uploads/images');form.keepExtensions = true;form.parse(req, function (err, fields, files) {if (err) {throw err;}if (files.image.path) {let image_url = 'http://localhost:3000/uploads/images/' + path.basename(files.image.path);res.json({status: 200,result: image_url});} else {res.json({status: 1,result: '图片路径出现问题!'});}});})