[已解决】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?";// 百度统计key
                var 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文件的路径 

运行成功!

相关推荐

  1. uniapp - editor 文本的使用

    2023-12-17 10:14:03       34 阅读
  2. uniapp-app使用文本编辑器editor

    2023-12-17 10:14:03       32 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-17 10:14:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-17 10:14:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-17 10:14:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-17 10:14:03       20 阅读

热门阅读

  1. Spring MVC与Spring Boot简单理解

    2023-12-17 10:14:03       38 阅读
  2. Kafka

    2023-12-17 10:14:03       39 阅读
  3. pip install默认安装路径

    2023-12-17 10:14:03       43 阅读
  4. MySQL中union和union all的区别

    2023-12-17 10:14:03       44 阅读
  5. OpenGL阴影贴图实例编程

    2023-12-17 10:14:03       44 阅读
  6. 【从客户端理解Kafka的使用方式】

    2023-12-17 10:14:03       37 阅读
  7. CGAL的手柄和循环器

    2023-12-17 10:14:03       31 阅读
  8. 不设默认值(js的问题)

    2023-12-17 10:14:03       43 阅读