我正在使用tinyMCE，这是一个允许用户创建博客的文本编辑器。这可以包括页面上任何位置的文本、图像、中断等。输出带有 HTML 标签。
我正在寻找一种方法来最初显示页面的一部分，并在末尾单击“显示更多”按钮，该按钮将显示页面的其余内容。
我知道如何为文本内容创建 javascript 显示/隐藏函数，但我的问题是如何找到第一部分(初始显示)和第二部分(其余内容)的中断位置，因为我只能在 HTML 必须有效的地方打破它。
或者有没有办法允许显示整个内容，但只是通过某种类型的 CSS 在视觉上隐藏一定比例的内容？
一些初步的指导将不胜感激!
编辑:我会考虑使用“strtok”php命令来获取第一段并仅显示它，但是，它似乎不起作用。举个例子:
$mystring = <<<EOF
<div>
<h2>Why do we use it?</h2>
<p>It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here',
making it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident,
sometimes on purpose (injected humour and the like).<img style="float:
left; margin: 10px;" title="DSC00286.JPG" src="images/images91/imageID1527306461424.jpg"
alt="" width="200" height="154" /></p><p>test test test</p>
</div>
<div>
<h2>Where does it come from?</h2>
EOF;
$partialString = strtok($mystring, '</p>');
echo $partialString;
THE RESULT IS: div
如果有人能指出的话，可能会遗漏一些简单的东西？
最佳答案
将内容放入 div 中
HTML:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div class="blog more" style="display:none;">
<h1>First<h1>
</div>
<div class="blog more" style="display:none;">
<h1>Second<h1>
</div>
<div class="blog more" style="display:none;">
<h1>Third<h1>
</div>
<div class="blog more" style="display:none;">
<h1>Fourth<h1>
</div>
<div class="blog more" style="display:none;">
<h1>Fifth<h1>
</div>
<center><div class="" id="loadMore" style="display:inline-block;">
<a href="#" class="btn btn-success" style=" background-color:green; padding:4px 20px;" role="button"> Load More </a>
</div></center>
<script>
$( document ).ready(function () {
$(".more").slice(0, 2).show();
if ($(".blog:hidden").length != 0) {
$("#loadMore").show();
}
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".more:hidden").slice(0, 2).slideDown();
if ($(".more:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
}
});
});
</script>
</body>
</html>
更改js中的切片以显示要显示或隐藏的div数量。
关于javascript - PHP/Javascript - 显示tinyMCE生成的HTML页面的更多功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50539072/