组件封装

依赖

# 本次示例使用版本 wangeditor=4.6.6
npm i wangeditor --save

组件目录

.
├── Editor.vue
├── index.scss       # 自定义样式文件
└── upload-image.js  # 自定义图片上传

主文件 Editor.vue

<template><div ref="editor"></div>
</template><script>
import E from 'wangeditor';
import uploadImage from './upload-image.js';/*** wangEditor 编辑器* 文档 https://doc.wangeditor.com/*/
export default {name: 'Editor',props: {// v-modelvalue: { type: String, required: true },// placeholderplaceholder: { type: String, default: '' },// heightheight: { type: Number|String, default: 100 },},model: {prop: 'value',event: 'change',},data() {return {editor: null,};},watch: {// 不能用箭头函数value(val) {// 如果值不相等再进行赋值，避免多次赋值造成闪烁if (this.editor && val !== this.editor.txt.html()) {this.editor.txt.html(val);}},},methods: {initEditor() {const editor = new E(this.$refs.editor);editor.config.placeholder = this.placeholder;editor.config.height = this.height;// 限制类型// editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片// 配置菜单栏，删减菜单，调整顺序editor.config.menus = ['undo', // 撤销'redo', // 重复'head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'indent', // 缩进'lineHeight', // 行高'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'todo', // 待办'justify', // 对齐方式'quote', // 引用'emoticon','image', // 插入图片'video', // 视频'table',  // 表格'code',  // 插入代码'splitLine', // 分割线];// 监听数据变化editor.config.onchange = this.handleContentChange;// 自己实现上传图片editor.config.customUploadImg = this.handleUploadImage;// 创建编辑器editor.create();// 赋予初始值editor.txt.html(this.value);this.editor = editor;},handleContentChange(newHtml) {this.$emit('change', newHtml);},/*** resultFiles 是 input 中选中的文件列表* insertImgFn 是获取图片 url 后，插入到编辑器的方法*/async handleUploadImage(resultFiles, insertImgFn) {const imgUrl = await uploadImage(resultFiles[0]);// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(imgUrl);},},mounted() {// 初始化this.initEditor();},beforeDestroy() {// 调用销毁 API 对当前编辑器实例进行销毁this.editor.destroy();this.editor = null;},
};
</script><style lang="scss">
@import './index.scss';
</style>

自定义样式 index.scss

// 工具栏icon
.w-e-toolbar .w-e-menu {width: 30px;height: 30px;font-size: 12px;
}// 工具栏提示文字
.w-e-menu-tooltip {font-size: 12px;
}// 工具栏边框
.w-e-toolbar {border: 1px solid #dcdfe6 !important;border-bottom: none !important;
}// 编辑区域边框
.w-e-text-container {border: 1px solid #dcdfe6 !important;
}// 默认提示文字
.w-e-text-container .placeholder {font-size: 12px;color: #c1c5cd;
}// 上传按钮
.w-e-menu .w-e-panel-container .w-e-up-img-container .w-e-up-btn {width: 100%;height: 64px;line-height: 64px;font-size: 24px;
}

自定义文件上传 upload-image.js

import axios from "axios";/*** 上传图片接口* @param {*} file*/
async function uploadImage(file) {const from = new FormData();from.append("image", file);from.append("token", 'token');const res = await axios.request({url: 'uploadImageUrl',method: "POST",data: from,});//   console.log(res);const imgUrl = res.data;return imgUrl;
}export default uploadImage;

组件使用

<Editorv-model="content"placeholder="内容(必填)"height="155"@change="handleContentChange"/>

自定义上传视频

editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {// resultFiles 是 input 中选中的文件列表// insertVideoFn 是获取视频 url 后，插入到编辑器的方法// 上传视频，返回结果，将视频地址插入到编辑器中insertVideoFn(videoUrl)
}

自己实现上传图片

editor.config.customUploadImg = function (resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(imgUrl)
}

Vue: wangEditor 编辑器使用示例相关推荐

vue数学公式编辑器_将Vue包装器用于MathLive数学编辑器的示例
vue数学公式编辑器 Vue-Mathlive (vue-mathlive) The MathLive Vue wrapper provides a Vue component that implem ...
vue使用图像编辑器tui-image-editor
vue使用图像编辑器tui-image-editor 前言效果展示涂鸦裁剪标注旋转滤镜一.安装二.使用 1.快速体验 2.国际化 3.自定义样式 4.按钮优化 5.完整代码总结前言 ...
【一个简单的vue公式编辑器组件】
vue 一个简单的公式编辑器组件示例一个基于vue实现数据统计公式的基本功能. 新建一个 formula.vue 组件, 使用 <formula ref="formulaPage& ...
修改wangEditor编辑器高度height
文章目录方法1,使用js修改方法2,直接在css中修改方法3,使用官网说明的方法方法1,使用js修改在wangEditor编辑器中,默认的高度是300px,如需自定义高度,则需在editor ...
wangEditor编辑器中解析html图文信息问题（三）
以上两篇,我们主要记录了wangEditor编辑器的基础使用方法,以及上传图片部分.如果对前两篇有兴趣的,可以参考链接: http://blog.csdn.net/LJFPHP/article/det ...
wangEditor编辑器在laravel中上传图片（二）
这里接着上篇,上篇是关于wangEditor的简单实用.这篇主要是上传图片. 一.wangEditor上传图片的一些配置博主这里使用的是laravel5.1框架,大家根据自己的框架调整就好. 1.上 ...
Vue服务端配置示例
Vue服务端配置示例后端配置示例 #Apache <IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^in ...
antv-x6 vue流程图编辑器demo
antv-x6 vue流程图编辑器demo 效果如下: 效果如下: <template><div class="content"><div class ...
Java 开发笔记 - wangEditor 编辑器图片上传
Java 开发笔记 - wangEditor 编辑器图片上传前言转型 java 开发后入手的第一个项目,写写博客记录一下该项目使用的是 sping boot + mybatis plus + t ...

Vue: wangEditor 编辑器使用示例

组件封装

组件使用

Vue: wangEditor 编辑器使用示例相关推荐

最新文章

热门文章