效果

父组件`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: "https://profile.csdnimg.cn/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: '图片路径出现问题!'});}});
})

Vue3：集成wangEditor富文本编辑器相关推荐

集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
angularjs html编辑器,AngularJS集成wangeditor富文本编辑器
最近用AngularJS2(ng alain)搭建的项目需求中须要富文本,在网上找了不少,要么过重,要么没有详细的集成步骤.css 下面将我本身如何将wangeditor集成在项目(项目名称myPro ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
wangeditor富文本编辑器的使用（超详细）
一.基本介绍官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载下载好之后 ...
wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用框架: react hooks 链接: 官方文档参考富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...

Vue3：集成wangEditor富文本编辑器

效果

父组件`ArticleText`

富文本编辑器子组件`TextEditor`

服务器端图片上传接口

Vue3：集成wangEditor富文本编辑器相关推荐

最新文章

热门文章

Vue3：集成wangEditor富文本编辑器

效果

父组件ArticleText

富文本编辑器子组件TextEditor

服务器端图片上传接口

Vue3：集成wangEditor富文本编辑器相关推荐

最新文章

热门文章

父组件`ArticleText`

富文本编辑器子组件`TextEditor`