关于vben amin的富文本表单（tinymce）的一些爬坑之旅_vben admin是不是太难用了_Wk0n的博客-程序员宅基地

技术标签：前端

最近产品要求报告页面加一个富文本编辑，想到我们项目的框架是用vben-admin搭建的，正好用里面自带的tinymce，直接可以拿来用美滋滋。

然后找到了项目自带的demo，找到了代码

看起来很简单，拿一个变量绑定v-model，用@change事件来拿富文本里面的dom，最后再自定义一个提交和取消按钮，点击提交调取更新接口之后再更新页面数据，把接口返回的dom结构塞进页面html中，这不就完成了吗？说干就干！

美滋滋- -！没半小时就完成了！突然看到右上角一个绿油油的图片上传的按钮，想来测一下图片上传的按钮怎么样

额和想象中有些不一样怎么图片上传之后是这个样子。排查问题吧，发现

原来是401了那就是默认的组件里面的上传事件调取接口没带token，通过组件一层一层的找，果然发现

这个uploadUrl只是一个后台请求的接口地址，请求头并没带上token，那也很简单。

配置一个请求头，这样就ok了

果然，里面一改，这图片就显示出来了。这样应该就可以了吧。啪的一声，提交之后，卧槽？

竟然还是这个玩意儿。既然更新之后接口给我返回这个，那一定是调用更新接口的时候传参有问题，因为这个tinymce没有默认的提交事件，我都是通过change事件去赋值，最后再在自定义的按钮上点击提交，那一定是change事件的时候有问题。

果然，在change事件里面打印拿到的value的时候，拿到的一直是这个[uploading:图片3.jpeg]，但是在失去焦点或者继续往富文本里面录入内容之后，拿到的value就是上传图片完成之后更新的dom节点

那就得去 vben admin封装的tinymce这个组件里面去好好看了

发现这是由一个upload和textarea组件组成的，textarea暂时没啥问题，就不管它了，先去upload里面去看看，发现文件上传主要还是触发了这个handleChange事件，如果出错触发父组件的error事件，loading状态触发uploading事件，当文件上传之后会触发done事件，那就去父组件里面去找找这几个方法

果然，在父组件里找到这几个方法，这样就能想到这个组件上传文件时候的逻辑处理了，首先在uploading状态，会调取1方法，这时候会往editor插入一个uploading:文件名的节点，然后在文件上传成功之后再通过replace方法，将uploading这个节点替换成img标签，最后再setValue塞进富文本绑定的value中，再在setValue可以看到，val和editor.getContent({ format: attrs.outputFormat })是不能相等的，否则不会触发editor.setContent事件。而在change事件触发的时候，这个content是editor.getContent({ format: attrs.outputFormat })，所以才会在之前的change事件里面打印出的一直是uploading的状态的节点，并不是最新的节点值value。

看到这里，思路就瞬间出来了，那我就不用change事件去赋值，我直接定义一个新的事件，并在setValue方法里面去触发，change事件也不需要了，直接在业务组件里面去取值触发，最终如下

最终，图片上传的问题也搞定了，不需要失去焦点或者改变富文本框内的内容也能正常上传回显了

本文链接：https://blog.csdn.net/weixin_44864019/article/details/127905164

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

idea安装scala开发插件_2019idea搜索不到scala的插件_hitits的博客-程序员宅基地

下载idea-scala插件_2019idea搜索不到scala的插件

手机发送短信方式_「已注销」的博客-程序员宅基地

概述手机的短消息实现目前有三种方法: 1. 通过移动网关发送短消息, 使用该方法不需要附加的硬件,但是需要到电信部门申请网关,比较适用于一些大型的网络通讯公司开发,目前华为,中兴等公司就做的这方面的工作,并且还有相应的开发包供开发人员使用. 2. 在电脑上通过GSM MODEM 向手机发送中文短消息, 这是目前比较适合于小项目开发的一种方法,所需硬件包括一款手机,提供GSM MO...

Database-浅谈Postgresql与Mysql的MVCC实现机制_postgre undolog实现mvcc_adson1987的博客-程序员宅基地

Database-Postgresql与Mysql的MVCC多版本并发控制原理MVCC介绍Postgresql中MVCC的实现MVCC介绍在早期的数据库理论中，一行元组上有两种锁，一种读锁，一种写锁，读会阻塞写,写也会阻塞读，这对于一个并发繁忙的系统来说代价是异常高昂的。对于传统数据库来说，为了维护数据的一致性和完整性，避免一个事务看到其它并发事务更新而导致看到不一致的数据，通常采用的是LO..._postgre undolog实现mvcc

离散数学·图的矩阵表示、平面图_离散数学关系矩阵_call me by ur name的博客-程序员宅基地

内含练习，可供复习_离散数学关系矩阵

Java IDE实现天气预报以及给指定手机发送验证码、MQTT自定义天气预报_通知notification的验证应用,自定义天气预报_云开处的博客-程序员宅基地

目录一、天气预报实现1. 代码分析2.URL类3.API列表4.全部代码5.实现效果二、给指定手机发送验证码1.准备工作2.执行代码3.运行结果三、参考资料四、总结一、天气预报实现1. 代码分析先准备一个URL类的对象 uURL url = new URL("https://api.jisuapi.com/iqa/query?appkey=62958a3a6ef3c56d&question="+weather);网址的组成：协议://域名:端口号/虚拟路径?参数列表#锚点协议： _通知notification的验证应用,自定义天气预报

计算机上的闹钟怎么设置方法,pconline,教您电脑闹钟怎么设置_Dwzb的博客-程序员宅基地

大家都知道手机可以设置闹钟。其实电脑也有闹钟的功能，嘻嘻，很新鲜吧，而且设置很简单，我们只要在规定的时间内设置运行指定的播放软件就可以了，考虑到很多的用户都没有接触过，下面，小编就来跟大家介绍电脑闹钟设置的方法了。电脑老司机的用户就知道，电脑闹钟是一种用电脑音乐设置成闹钟的方法，可以在设定的时间里自动开机然后播放音乐提醒人们起床，是一种非常精巧的设计，也是帮助人们起床的好帮手。那么电脑闹钟提醒起床..._电脑闹钟怎么设置

随便推点

10.3.1 产品列表-左侧分类程序开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】_黄菊华老师的博客-程序员宅基地

10.3 产品列表和详情我们本小节讲解产品分类页面和产品详情，效果如图10-7和图10-810.3.1 产品列表-左侧分类本小节讲解如何获取产品左侧的分类数据，然后显示在页面。开发分析第1步：查看和测试接口的内容。第2步：在程序的data代码块初始化变量fenlei，用于存放产品分类数据。第3步：在程序的onLoad代码块中调用接口，获取数据，赋值给变量fenlei。第4步：改造布局代码，将获取的分类数组信息循环显示出来。第1步：查看和测试接口地址http://qiyephp.ya

SDUTOJ 2476Period_R_Misaya的博客-程序员宅基地

#include#include#include#define N 1000010using namespace std;char s[N];int next[N];void getnext(char s[]){ int j=-1,i=0,len; next[0]=-1; len=strlen(s); while(i<=len) { if(j==-1||

ViewStub问题解析_viewstub merge can be used only with a valid viewg_Songlcy的博客-程序员宅基地

今天，在项目中想去用viewstub加载根目录是merge的布局时，logcat下抛出了以下异常：android.view.InflateException: can be used only with a valid ViewG...大致意思是说标签所包含的布局不可以加载在Viewstub下。改用其他布局后，可以正常加载。可以得出一个结论：在ViewStub标签下的layout_viewstub merge can be used only with a valid viewgroup root and