ElementUI富文本框组件wangEditor实现

富文本框wangEditor

需求：用户要求使用富文本框上传图片、文章。

需求分析：wangeditor实现需求，几行代码即可创建一个编辑器。

解决过程：

安装 npm i wangeditor --save；
引入 import E from ‘wangeditor’

子组件

<template><div id="e"></div>
</template>

<script>
import E from "wangeditor";
export default {props: {desc: {type: String,default: "",},//业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存isClear: {type: Boolean,default: false,},},data() {return {};},watch: {desc(val) {this.editor && this.editor.txt.html(val);},},mounted() {this.initE();},methods: {initE() {this.editor = new E("#e");//这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整this.editor.config.menus = ["head", // 标题"bold", // 粗体"fontSize", // 字号"fontName", // 字体"italic", // 斜体"underline", // 下划线"strikeThrough", // 删除线"foreColor", // 文字颜色"backColor", // 背景颜色"link", // 插入链接"list", // 列表"justify", // 对齐方式"quote", // 引用"emoticon", // 表情"image", // 插入图片"table", // 表格"undo", // 撤销"redo", // 重复];this.editor.config.uploadFileName = "file";this.editor.config.uploadImgServer = `url`; // 你的服务器上传地址let that = this;this.editor.config.customUploadImg = async function (resultFiles,insertImgFn) {if (resultFiles.length > 1) {that.$message.error("只能上传一张图片");return;}let data = await that.$http.from("file/Upload", {file: resultFiles[0],});insertImgFn(that.$http.preview(data.fileName));};this.editor.config.onchange = (html) => {this.info_ = html; // 绑定当前逐渐地值this.$emit("change", this.info_); // 将内容同步到父组件中};this.editor.create();},mounted() {this.initE();},},
};
</script>

父组件

<template><editor :desc="Remark" @change="editor"></editor>
</template>

<script>import editor from "./components/editor";data(){return{Remark: "",}},methods: {editor(e) {this.Remarks = e;},},
</script>

好了笔记就写在这里了，点个赞

ElementUI富文本框组件wangEditor实现相关推荐

uniapp 电商app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
vue中如何使用富文本框组件
富文本框,就是可以在文本框里面输入文本并携带自我编辑的一种编辑器,使用vue做项目时少不了用到富文本框组件,下面就来说说该组件的使用步骤一.首先要在vue脚手架的依赖按钮中添加新的依赖vue-qui ...
uniapp 发布文章app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
vue中如何使用wangEditor 富文本框
在做后台管理项目时常常会用到富文本编辑器,在这里推荐大家使用wangEditor,亲测好用话不多说先上图第一步安装 npm wangeditor --save 第二步在项目中使用先建立一个wan ...
java 富文本框_java-富文本（wangEditor框架）的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
开发WinRT自定义组件之富文本框
富文本框是常用的组件之一,多用于文章排版.用户评论等. WinRT组件中内置了两个:RichEditBox.RichTextBlock.RichEditBox可以编辑,RichTextBlock只用来 ...
vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境
目录一.echarts 图标库 1.echarts的基础 2.项目中的使用二.execl导出三.面包屑组件四.富文本框五.地图六.vite 构建配置七.后端未开跨域资源共享,前端使用代理 ...
vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
基于bootstrap的富文本框——wangEditor【欢迎增加开发】
先来一张效果图: 01. 引言老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例.

ElementUI富文本框组件wangEditor实现

富文本框wangEditor

子组件

父组件

ElementUI富文本框组件wangEditor实现相关推荐

最新文章

热门文章