uniapp——内网部署H5端editor富文本报错问题——亲测有效

2023-12-22 10:41:53

最近同事在改uniapp的项目，使用了editor组件：
在这里插入图片描述
但是在h5端，此editor组件会经常出现加载不出来的情况：

editor组件——官网地址：

uniapp官网editor组件：https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6

在这里插入图片描述
官网中的注意事项如下：
在这里插入图片描述

H5端需要动态引入qull.min.js,image-resize.min.js依赖，默认情况下浏览器会从unpkg.com加载。如果依赖加载较慢或失败，uniapp建议使用通过测试的js依赖保证效果一致，访问github.com或者gitee.com选择下载。可以放入static目录进行托管，或者使用CDN服务商。为了保证服务的稳定性，推荐开发者将所有前端资源使用uniCloud前端网页托管服务进行托管，然后在自定义模板的head标签内引入相关js依赖。

上面的这段话就是说明了h5端的editor组件确实渲染会出现问题。基本上渲染失败的时候，打开控制台中的js加载部分，就能看到qull.min.js,image-resize.min.js 这两个文件加载失败导致的。

解决方法也给出了说明，最好是将qull.min.js,image-resize.min.js 这两个文件下载到static文件目录下，然后托管页面，通过head标签引入qull.min.js,image-resize.min.js这两个文件。

具体怎么实现呢？

下面是实现方法：

大神提供的解决方法：https://blog.csdn.net/heroboyluck/article/details/125336035

通过大神的链接：我已实现！！！感谢大神！！！

我的实现思路，跟大神的99%的一致。

解决步骤1：下载qull.min.js,image-resize.min.js这两个文件——大神的链接中下载此文件是要积分的。等下我会将下载好的文件上传到资源中，方便大家免费下载

文件的存放路径跟大神一致：static/editor，效果图如下：

在这里插入图片描述

解决步骤2：在根目录下新建h5-template.html页面，该页面内容如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<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>
		<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>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
	</body>
</html>

注意：在uniapp中新建页面的时候，会默认为vue文件，此时需要新建好页面后，手动更改扩展名为html，然后注意pages.json文件中是否有多余的路由出现，我这边就是新建了一个h5-template.vue文件后，pages.json中就自动生成了一个路由，且在我更改h5-template.vue的扩展名为h5-template.html后，pages.json就因为找不到刚刚自动生成的路由而出现了报错。

解决步骤3：修改根目录下的manifest.json文件,追加h5的配置，template改为h5-template.html

在这里插入图片描述
如果在源码视图中没有h5，则新增一个对象即可。

解决步骤4：重新编译h5，比如运行——运行到浏览器——选择指定浏览器

页面刷新后就会发现，进入到editor组件后，不会去网络加载qull.min.js,image-resize.min.js文件了，就不会出现上面的报错了。

完成！！！多多积累，多多收获！！！
再次感谢大神！！！

文章来源:https://blog.csdn.net/yehaocheng520/article/details/135144605
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。