PHP / Javascript - Показать больше функций для HTML-страницы, созданной tinyMCE - PullRequest
0 голосов
/ 26 мая 2018

Я использую tinyMCE, текстовый редактор, позволяющий пользователям создавать блоги.Это может включать в себя текст, изображения, разрывы и т. Д. В любом месте на странице.Вывод содержит HTML-теги.

Я ищу способ первоначально показать часть страницы вместе с кнопкой «показать больше» в конце, чтобы нажать на нее, что, в свою очередь, покажет остальную частьсодержимое страницы.

Я знаю, как создать функцию отображения / скрытия javascript для текстового содержимого, но моя проблема заключается в том, как найти, где этот разрыв должен быть для первой части (начального показа) и для второй части(остальное содержимое), поскольку я могу разбить его только в тот момент, когда HTML должен быть действительным.

Или есть способ разрешить весь контент, но просто визуально скрыть процент содержимого черезкакой-то тип CSS?

Будет приветствоваться какое-то начальное направление!

РЕДАКТИРОВАТЬ: я хотел бы рассмотреть возможность использования команды php "strtok", чтобы получить первый абзац и просто показать, что, однако, это делаетне похоже на работу.В качестве примера:

$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

Возможно, пропущено что-то простое, если кто-то может указать на это?

Ответы [ 3 ]

0 голосов
/ 26 мая 2018

поместите ваш контент в 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 вы хотите показать или скрыть.

0 голосов
/ 26 мая 2018

То, как я в конечном итоге воспользовался, было следующим:

$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 для извлечения части в эту конечную точку.

0 голосов
/ 26 мая 2018

создать 2 деления.один с идентификатором initialShow и один с идентификатором скрытый.когда страница загружается, для div с идентификатором initialShow установлено отображение: блок; (что можно сделать в css).в то время как у скрытого может быть отображение: нет ;.затем, когда они нажимают кнопку, вызывают функцию для установки стиля div с идентификатором, скрытым для отображения: block;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...