tinymce组件的异步加载

本文介绍了在Vue.js项目中,如何将tinymce组件从同步加载改为异步加载以提高首页加载速度。由于Vue生命周期钩子不支持await,作者通过监听脚本加载完成的事件,实现延迟渲染tinymce组件,从而解决了问题。
摘要由CSDN通过智能技术生成

tinymce的官方vue组件是云托管,靠cdn来分发,依赖于外部网络,可靠性打了折扣。所以想下载到自己的服务器上自己托管,npm上的@packy-tang/vue-tinymce组件就可以达到这样的目的。但是这个组件需要在首页同步加载TinyMCE的脚本(tinymce.min.js),有388k左右,影响首页的加载速度,所以想改成异步加载后可以加快首页响应的速度。

直接改成<script src="./static/tinymce/tinymce.min.js" defer></script>是不行的,如果在异步加载期间使用了这个组件会出错。

要解决这个问题,首先想到的是在首页中异步加载tinymce.min.js,然后在mounted钩子中用await等待这个加载完成。实际测试发现await虽然可以阻塞mounted钩子,但是不能阻塞mounted后面的钩子导致后面的代码出错,也就是说vue生命周期钩子不支持await,每个钩子并不会等待上一个钩子执行完后才执行,它们之间的关系是顺序异步,一旦你阻塞这个钩子,那么下一个钩子就会执行,没有达到我们想阻塞的目的。

这个在网上找到了讨论和官方回答

Await async component lifecycle hooks · Issue #7209 · vuejs/vue · GitHub

既然vue生命周期钩子不支持await,就不要试图阻塞mounted,假装t组件已经渲染完成,通过脚本加载完的事件来事后延迟渲染组件,不需要长时间的延迟,只需要延迟几秒钟tinymce.min.js的加载就完成了。

异步加载脚本,加载完后发通知事件

export function loadTinymce(url) {
    var js = document.createElement('script')
    js.src = url
    js.defer = true
    js.onload = function() {
      document.dispatchEvent(new Event('tinymce
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TinyMCE是一个功能强大的富文本编辑器,它能够轻松实现图片的异步上传。要实现这个功能,你可以按照以下步骤进行: 1. 首先,确保你已经在网页中引入了TinyMCE编辑器的库文件。 2. 在页面中创建一个HTML的textarea元素,并将其id设置为"myTextarea"(也可以自定义其他id)。 3. 使用JavaScript代码初始化TinyMCE编辑器,同时配置相应的设置和选项。其中,你需要在设置中添加一个自定义的图片上传回调函数。例如: ```javascript tinymce.init({ selector: '#myTextarea', plugins: 'image', toolbar: 'image', file_picker_callback: function(callback, value, meta) { // 在这里编写图片上传的异步处理逻辑 } }); ``` 4. 在图片上传回调函数中,你可以使用AJAX或其他HTTP请求方法将图片异步上传至服务器。这需要你根据具体的后端语言来处理上传请求并将图片保存到服务器上的指定位置。上传成功后,你需要将图片的URL回传给TinyMCE编辑器,以供其插入到编辑器中。 以下是一个示例的上传回调函数,假设你使用了jQuery库来简化AJAX请求的操作: ```javascript file_picker_callback: function(callback, value, meta) { // 打开一个自定义的图片选择框 // ... // 当用户选择图片后,调用以下回调函数 var fileInput = document.getElementById('fileInput'); // 假设你的图片选择框的id是"fileInput" var file = fileInput.files[0]; // 获取用户选择的图片文件 // 使用AJAX将图片上传至服务器 var formData = new FormData(); formData.append('image', file); $.ajax({ url: 'upload.php', // 上传图片的后端处理脚本 type: 'POST', data: formData, processData: false, contentType: false, success: function(data) { // 上传成功后 var imageUrl = data.imageUrl; // 假设服务器返回的上传成功后的图片URL存在data.imageUrl中 // 将图片URL传递给回调函数,以便TinyMCE插入图片 callback(imageUrl, { alt: '' }); } }); } ``` 使用以上步骤,你就可以在TinyMCE编辑器中实现图片的异步上传。当用户选择图片并上传成功后,图片将被插入到编辑器的当前光标位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值