背景

本机的环境使用的vue的脚手架，用到了富文本编辑框，所以选择将wangeditor封装为组件调用
wangeditor官网：https://www.wangeditor.com/

在vue的项目中安装 wangeditor

 npm i wangeditor --save

wangeditor组件封装

<template><div><divref="editor"style="text-align:left"></div></div>
</template><script>import WangEditor from "wangeditor";import { ACCESS_TOKEN } from '@/store/mutation-types'//系统中发送请求需要携带toekn,根据自己的项目决定import Vue from 'vue'export default {name: "WangEditor",data() {return {token: "",editorE:""//编辑器的对象}},//接收v-model的值props: {value: String},model: {prop: 'value',event: 'change'},mounted() {//初始化编辑框this.init();this.editorE.txt.html(this.value)},created(){this.token = Vue.ls.get(ACCESS_TOKEN);//获取访问的token},watch:{value(val){//普通的watch监听if (val !== this.editorE.txt.html()) {this.editorE.txt.html(val)}}},methods: {init() {const _this = this;/*实例化*/_this.editorE = new WangEditor(_this.$refs.editor);// 配置 server 接口地址_this.editorE.config.uploadImgServer = window._CONFIG['domianURL']+"/sys/common/upload"//设置富文本的高度_this.editorE.config.height = 600//默认限制图片大小是 5M_this.editorE.config.uploadImgMaxSize = 8 * 1024 * 1024 // 8M//自定义上传的参数_this.editorE.config.uploadFileName = 'file'//自定义头部token信息_this.editorE.config.uploadImgHeaders = {"X-Access-Token":_this.token}//设置请求参数_this.editorE.config.uploadImgParams = {suffixPath: '@nowm' //后缀水印}//timeout 即上传接口等待的最大时间，默认是 10 秒钟，可以自己修改_this.editorE.config.uploadImgTimeout = 3 * 1000_this.editorE.config.uploadImgHooks = {// 上传图片之前before: function(xhr) {console.log(xhr)/*  // 可阻止图片上传return {prevent: true,msg: '需要提示给用户的错误信息'}*/},// 图片上传并返回了结果，图片插入已成功success: function(xhr) {//console.log('success', xhr)},// 图片上传并返回了结果，但图片插入时出错了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上传图片出错，一般为 http 请求的错误error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上传图片超时timeout: function(xhr) {console.log('timeout')},// 图片上传并返回了结果，想要自己把图片插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsertcustomInsert: function(insertImgFn, result) {// result 即服务端返回的接口console.log('customInsert', result)// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可insertImgFn(result.message)}}/*创建编辑器*/_this.editorE.create();// 监控变化，同步更新到文本 向上传递更新_this.editorE.config.onchange = function (html) {//console.log(html);_this.$emit("change", html);}}}};
</script>

页面调用

 <a-form-model-item  label="文章内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="articleContent"><WangEditor v-model="model.articleContent"></WangEditor></a-form-model-item>

//引入包路径import WangEditor from '@/components/WangEditor/WangEditor'//在引入容器export default {name: 'XbSpiderArticleForm',components: {WangEditor},}

vue 封装调用 wangeditor v4.0富文本编辑框组件 v-model相关推荐

【学习记录贴】Vue+Element-UI富文本编辑框及插入图片
本贴会涉及以下几个技术点: Vue+Element-UI实现富文本编辑框,以及文本编辑框中事件拦截.插入图片 Element-UI限制上传图片后,隐藏上传按钮:官网上是没有这个方法的,可以通过上传到指 ...
wangeditor 请求头_富文本编辑框wangEditor
由于项目需要,在网上找了个富文本编辑框wangEditor,抱着试一试的态度用了一下,原以为这款个人开发维护的插件会有不少bug,使用之后经过我们测试人员全方位的测试检验,基本符合需求,并且较之前使用 ...
MFC富文本编辑框richedit插入图片ole对象问题
MFC富文本编辑框richedit插入图片ole对象问题学习了三四天的一点成果,如果有不对的地方还请指出. 目前发现有两种方法来向richedit中插入ole对象: 1.直接粘贴,然后使用回调函数来 ...
qtabwidget设置tab高度_VC｜富文本编辑框CRichEditCtrl的字体与段落设置
将富文本编辑框设置为2.0,关联一个control变量m_textblock: 1 字体设置富文本编辑框关于字体设置的成员函数: BOOL CRichEditCtrl::SetSelectionCh ...
tinymce富文本编辑框使用
引用 <link rel="stylesheet" href="./tinymce/skins/ui/oxide/skin.min.css" />& ...
vue 使用quill-editor富文本编辑框
1.安装插件 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-edito ...
vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
【Vue.js】892- Vue 3.0 进阶之动态组件探秘
本文是 Vue 3.0 进阶系列的第四篇文章,在这篇文章中,阿宝哥将介绍 Vue 3 中的内置组件 -- component,该组件的作用是渲染一个 "元组件" 为动态组件.如果 ...
ElementUI富文本框组件wangEditor实现
富文本框wangEditor 需求:用户要求使用富文本框上传图片.文章. 需求分析:wangeditor实现需求,几行代码即可创建一个编辑器. 解决过程: 安装 npm i wangeditor -- ...

vue 封装调用 wangeditor v4.0富文本编辑框组件 v-model

背景

wangeditor组件封装

页面调用

vue 封装调用 wangeditor v4.0富文本编辑框组件 v-model相关推荐

最新文章

热门文章