Tinymce 接收器元素减少了页面加载时间

Question

对于博客文件，由 php foreach 循环创建的所有文章评论都有自己的Reply按钮，可以在文本区域中使用 tinymce 打开模式对话框。注意，当有评论时，页面加载需要一些时间。当我查看 brower-inspector 时，我看到最后 tiny 正在为每个 textarea 加载一个“sink”元素，就在 : 的关闭标记body之前<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div><div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div><div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div><div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div><div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>....and so on...这些 div 的加载需要一些时间，并且会降低页面加载的性能。我可以做些什么来提高页面加载的性能吗？

Answer 1

您需要为所有评论提供一个单一的回复模式。由于您没有指定正在使用的平台，因此这是一种通用方法。

每个回复按钮都应该有一个数据属性，其中包含您要回复的评论的 ID。例如

<button class="reply-button" data-comment-id="<?php echo $comment->id; ?>">Reply</button>

或者data-comment-id如果评论将附加到帖子，而不是作为对其他评论的回复，则将该属性留空。

如果您在单个页面上显示多篇博文并希望每篇文章都有自己的回复按钮，只需添加 data 属性post-id，如下所示：

<button class="reply-button" data-post-id="<?php echo $blog_post->id; ?>">Reply</button>

使用 JavaScript 打开评论模式并选择适当的数据属性。例如：

$('.reply-button').on('click', function() {

    const commentId = $(this).data('comment-id');

    const postId = $(this).data('post-id');

    showCommentModal(commentId, postId);

});

showCommentModal函数应该显示页面上的单一模式。使用commentId它postId应该准备发布评论作为对另一条评论或博客文章的回复。