背景

公司需要做一个后台文章管理的模块，通过富文本编辑器编辑文章，在前端显示。调研了很久，决定使用wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。一些编辑器的说明。

开始步骤

1.vue项目中安装wangEditor。使用的npm安装：

npm install wangeditor --save

2.创建一个 editoritem.vue，把编辑器封装成一个组件，组件内容

<template><div id="wangeditor"><div ref="editorElem" style="text-align: left"></div></div>
</template>
<script>
import E from "wangeditor";
export default {name: "editorElem",data() {return {editor: null,editorContent: "",};},props: ["catchData", "content"], // 接收父组件的方法watch: {content() {this.editor.txt.html(this.content);},},mounted() {this.editor = new E(this.$refs.editorElem);console.log("this.editor====>", this.editor);this.editor.config.onchange = (html) => {this.editorContent = html;this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件};this.editor.config.uploadImgServer = "你的上传图片的接口";this.editor.config.uploadFileName = "你自定义的文件名";this.editor.config.menus = [// 菜单配置"head", // 标题"bold", // 粗体"fontSize", // 字号"fontName", // 字体"italic", // 斜体"underline", // 下划线"strikeThrough", // 删除线"foreColor", // 文字颜色"backColor", // 背景颜色"link", // 插入链接"list", // 列表"justify", // 对齐方式"quote", // 引用"emoticon", // 表情"image", // 插入图片"table", // 表格"code", // 插入代码"undo", // 撤销"redo", // 重复];// 下面是最重要的的方法this.editor.config.uploadImgHooks = {before: function (xhr, editor, files) {// 图片上传之前触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传// return {//     prevent: true,//     msg: '放弃上传'// }},success: function (xhr, editor, result) {// 图片上传并返回结果，图片插入成功之后触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果this.imgUrl = Object.values(result.data).toString();},fail: function (xhr, editor, result) {// 图片上传并返回结果，但图片插入错误时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果},error: function (xhr, editor) {// 图片上传出错时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象},timeout: function (xhr, editor) {// 图片上传超时时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象},// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）customInsert: function (insertImg, result, editor) {// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：let url = Object.values(result.data); // result.data就是服务器返回的图片名字和链接JSON.stringify(url); // 在这里转成JSON格式insertImg(url);// result 必须是一个 JSON 格式字符串！！！否则报错},};this.editor.create(); // 创建富文本实例if (!this.content) {this.editor.txt.html("请编辑内容1");}},
};
</script>
<style lang="scss">
</style>

3.在需要的父组件页面中调用富文本编辑器。

// 引入组件
import EditorBar from "./editoritem";

// 声明组件
components: {EditorBar,
},

// 引用组件  catchData监听富文本的输入  editorContent为富文本中的内容
<editor-bar:catchData="catchData":content="editorContent"
></editor-bar>

// 在父组件中定义传入的catchData方法和 editorContent 在data中定义
catchData(content) {console.log("content=====?>", content);console.log("qqqq");},

完成

根据以上3步即可完成富文本的调用，至此完成wangEditor的调用。

注意事项

官方文档：

有的地方不是this.editor.config 而是 this.editor.customConfig，具体的可以看官方文档或者打印出来看具体的参数。

vue管理后台项目中使用wangEditor富文本编辑器相关推荐

在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
Vue项目中使用wangEditor富文本输入框（推荐）
vue中安装wangEditor cnpm install wangeditor 创建公用组件:在src/vue/components文件夹中创建wangEditor.vue <template ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
Vue项目中使用 tinymce 富文本编辑器的方法，附完整源码
来源 | https://blog.csdn.net/xingmeiok/article/deta 1.tinymce相关参考资料 tinymce版资料: http://tinymce.ax-z.cn ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题
1.如何设置config中的内容 readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave: false,//自动保存功能重点:ena ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
前言富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...

vue管理后台项目中使用wangEditor富文本编辑器

背景

开始步骤

完成

注意事项

vue管理后台项目中使用wangEditor富文本编辑器相关推荐

最新文章

热门文章