Question

我正在使用tinyMCE，一个文本编辑器，允许用户创建博客。这可以包括页面上任何位置的文本，图像，休息等。输出有HTML标记。

我正在寻找一种方法来初步显示页面的一部分以及＆＃34;显示更多＆＃34;最后点击按钮，然后显示页面内容的其余部分。

我知道如何为文本内容创建javascript显示/隐藏功能，但我的问题是如何找到第一部分（初始显示）和第二部分（其余内容）的中断位置因为我只能在HTML必须有效的地方打破它。

或者有没有办法允许整个内容，但只是通过某种类型的CSS直观地隐藏了一部分内容？

一些初步方向将不胜感激！

编辑：我会考虑使用＆＃34; strtok＆＃34; 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

如果有人可以指出，可能会遗漏一些简单的东西？

Answer 1

将您的内容放在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数。

Answer 2

我最终使用的方式如下：

$minLength = 300;
$partialArticle = preg_replace("/<img[^>]+>/", "", $fullArticle,1);
$breakPosition = strpos($partialArticle,"</p>",$minLength);
$partialArticle = substr($partialArticle, 0, $breakPosition+4);

首先定义要显示为文章的初始部分部分的典型长度。我选择了300个字符。接下来，我决定删除图像源，以便文章显示看起来都相似，只显示4或5行书写。接下来，从最小长度300开始，搜索下一段的结尾，这样您就可以获得一个完整的html结构，以便正确显示。使用substr命令将部分提取到此终点。

Answer 3

创建2个div。一个id为initialShow，一个id隐藏。当页面加载时，div的id为initialShow设置为display：block;（可以在css中创建）。而隐藏的那个可以有一个显示：none;。然后，当他们点击按钮时调用一个函数来设置div的样式，id隐藏显示：block;

PHP / Javascript - 显示由tinyMCE生成的HTML页面的更多功能

3 个答案: