[已解决】uniapp内置插件,editor富文本报错(附quill.min.js、image-resize.min.js文件)


在使用uni-app运行内置插件editor时,无法输入内容,控制台报错

原因:查看官网得知,需动态引入quill.min.js、image-resize.min.js文件

解决方法:

1.下载quill.min.js、image-resize.min.js到项目static/eidtor文件中

链接:https://pan.baidu.com/s/1IKxDJSyFj8626uDJ9FD5ww?pwd=fn5n 
提取码:fn5n

2.在项目根目录中创建template.h5.html文件, 引入quill.min.js、image-resize.min.js,下载资源到本地

直接将下面代码拷贝到创建的template.h5.html文件

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><title><%= htmlWebpackPlugin.options.title %></title><!-- 正式发布的时候使用,开发期间不启用。↓ --><!-- <script src="/h5/touch-emulator.js"></script><script>TouchEmulator();if (document.documentElement.clientWidth > 1024) {window.location.href = '/h5/pcguide.html#'+location.pathname+location.search;}</script><style>::-webkit-scrollbar{display: none;}</style><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?";// 百度统计keyvar s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script> --><!-- 正式发布的时候使用,开发期间不启用。↑ --><script>// document.addEventListener('DOMContentLoaded', function() {// 	document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'// })</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /><!-- editor 静态资源 --><script type="text/javascript" src="/static/editor/quill.min.js"></script><script type="text/javascript" src="/static/editor/image-resize.min.js"></script></head><body><!-- 该文件为 H5 平台的模板 HTML,并非应用入口。 --><!-- 请勿在此文件编写页面代码或直接运行此文件。 --><!-- 详见文档:https://uniapp.dcloud.io/collocation/manifest?id=h5-template --><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script>/*BAIDU_STAT*/</script></body>
</html>

3.在 manifest.json->h5(或Web配置)->template 节点中关联这个template.h5.html文件的路径 

运行成功!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/218317.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024生化仪器与实验室装备创新发展论坛将于3月6日济南召开

2024生化仪器与实验室装备创新发展论坛 2024年3月6日 | 山东国际会展中心 一、会议介绍 近年来&#xff0c;制药及生物制药行业的高速成长&#xff0c;生化仪器与实验室装备作为科学研究的重要组成部分&#xff0c;同时也在不断的更新和升级。伴随生物制药、CRO等下游行业的…

js 数组 slice() 浅拷贝与sort()数组的排序

slice() slice()方法将从数组中浅拷贝指定开始位置和结束位置之间的数组元素到一个新的数组&#xff0c;并返回新数组。 结束位置不在浅拷贝的范围 [1, 2, 3, 4, 5].slice(2&#xff0c;3); 结果时 3 从数组第二位开始拷贝 &#xff0c;到第三位为止 注意返回内容是一个数…

超燃超欢乐!修仙喜剧动画《师兄啊师兄》第二季稳健开播

12月14日&#xff0c;备受瞩目的《师兄啊师兄》第二季终于稳健开播&#xff01;首播两集连放&#xff0c;同时第一季全13集限免&#xff0c;不仅便于新观众丝滑入坑&#xff0c;老观众也可以二刷重温&#xff0c;可以说是非常良心了&#xff01; 《师兄啊师兄》改编自人气网络小…

【云原生kubernets】Pod详解

一、Pod介绍 1.1.概念 Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。kubernetes中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的&#xff0c;例如&#xff0c;用于管理Pod运行的State…

将 Github token 添加至远程仓库

将 Github token 添加至远程仓库后便于每次 push 重复输入的麻烦 首先,将已生成的 token 记录(注:生成后的 token 确认后便无法查看只能重新生成)并找到对应的项目 git 本地文件路径下 其次,将其与项目所关联,按如下格式配置即可 token 格式类似于 ghp_CAxxxxxxxxxxxxxxxxxGx5j…

【rabbitMQ】rabbitMQ控制台模拟收发消息

目录 1.新建队列 2.交换机绑定队列 3.查看消息是否到达队列 总结&#xff1a; 1.新建队列 2.交换机绑定队列 点击amq.fonout 3.查看消息是否到达队列 总结&#xff1a; 生产者&#xff08;publisher&#xff09;发送消息&#xff0c;先到达交换机&#xff0c;再到队列&…

微软Microsoft二面面试题分享通过总结(不是标准答案分享

误打误撞 我写的shitty代码 当年面试算法开发岗竟然通过了 Background 先说下背景&#xff0c;软件工程本科毕业之后&#xff0c;当年8月到北欧读两年制硕士。面试发生在当年的11月&#xff0c;微软哥本哈根&#xff0c;location在丹麦的哥本哈根lingby&#xff08;是不是这么…

【JavaEE】锁的策略

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…

vue中哪些数组的方法可以做到响应式

Vue2 中为什么直接通过数组的索引修改元素是不会触发视图更新 vue2 为什么不直接监听数组 Vue2 对于数组提供了一些变异方法 重写数组方法源码分析 定义拦截器将拦截器挂载到数组上面收集依赖 扩展&#xff1a;理解Vue2如何解决数组和对象的响应式问题 对复杂对象的处理 复杂对…

基于JSP+Servlet+Mysql的建设工程监管信息

基于JSPServletMysql的建设工程监管信息 一、系统介绍二、功能展示1.企业信息列表2.录入项目信息3.项目信息列表 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称&#xff1a;基于JSPServlet的建设工程监管信息 项目架构&#xff1a;B/S架构 开发语言&#xff1a;…

ubuntu pycharm 死机,如何重启

1. 找出pycharm 进程的id 进入命令行&#xff1a; ps -ef 是查看当前运行的进程 值输入 ps -ef 会返回所有当前执行的进程&#xff0c;太多了&#xff0c;过滤一下&#xff0c;找到 pycharm : ps -ef | grep pycharm 2. 使用 kill -s 9 来杀死进程 如图所是&#xff0c;…

HTML基础标签

但实际上无论声明为中文还是英文都可以写&#xff0c;中文/英文 主要是浏览器在进行调用翻译功能的时候&#xff0c;会按照声明的语言来进行翻译。 标签语义&#xff1a; 标签的属性一般都是在第一个标签中定义该标签效果所拥有的属性。 即标签的作用是什么 <>标签功能…

美食大赛的题解

目录 原题描述&#xff1a; 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 样例输入&#xff1a; 样例输出&#xff1a; 数据规模&#xff1a; 题目大意&#xff1a; 主要思路&#xff1a; 注&#xff1a; 代码&#xff1a; 原题描述&#xff1a…

C# WPF上位机开发(crc校验)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 为了验证数据传输的过程中有没有发生翻转&#xff0c;我们在传输报文的同时一般还会添加一个crc校验。对于modbus协议也是一样&#xff0c;它在数据…

Unity中Shader URP最简Shader框架(整理总结篇)

文章目录 前言一、精简 ShaderGraph 所有冗余代码后的最简 URP Shader二、我们来对比一下 URP Shader 与 BuildInRP Shader 的对应关系 与 区别1、"RenderPipeline""UniversalPipeline"2、面片剔除、深度测试、深度写入、颜色混合 和 BRP 下一致3、必须引入…

maven工程中读取resources中的资源文件

maven工程的代码布局如下&#xff1a;在resources下面有一个资源文件test.properties&#xff0c;现在的目标要在Java代码中读取该资源文件中的内容。 test.properties资源文件的内容如下&#xff1a; Java代码如下&#xff1a; package com.thb;import java.io.BufferedR…

github 学习番外篇

我们可以按照仓库开始的提示提交仓库 不知道为什么 出现了 我用 git branch 查看了一下&#xff0c;竟然没发现分支 后来发现是只有commit以后才会显示这个分支 后来显示 这是因为本地和远程仓库不同步的原因 这时候我们就需要git pull 一下 发现两个仓库由于不关联不能git…

【算法】【动规】乘积为正数的最长子数组长度

跳转汇总链接 &#x1f449;&#x1f517;算法题汇总链接 1.1 乘积为正数的最长子数组长度 &#x1f517;题目链接 给你一个整数数组 nums &#xff0c;请你求出乘积为正数的最长子数组的长度。 一个数组的子数组是由原数组中零个或者更多个连续数字组成的数组。 请你返回乘积…

生产派工自动化:MES系统的关键作用

随着制造业的数字化转型和智能化发展&#xff0c;生产派工自动化成为了提高生产效率、降低成本&#xff0c;并实现优质产品生产的关键要素之一。制造执行系统&#xff08;MES&#xff09;在派工自动化中发挥着重要作用&#xff0c;通过实时数据采集和智能调度&#xff0c;优化生…

人工智能联盟的首件神兵利器——“Purple Llama” 项目,旨为保护工智能模型安全性

Meta公司&#xff08;Meta Platform Inc&#xff09;&#xff0c;原名Facebook&#xff0c;创立于2004年2月4日&#xff0c;市值5321.71亿美元。总部位于美国加利福尼亚州门洛帕克。 Meta 公司推出了名为“Purple Llama”的项目&#xff0c;旨在保护和加固其开源人工智能模型。…