如何向Beaver Builder文本编辑器添加“读取更多”链接？

Question

当我在Beaver Builder中添加一个文本编辑器模块时，如何将文本限制在特定的字数，并添加一个“读取更多”链接？

Answer 1

1. 添加文本编辑器模块并单击该模块。
2. 在Advanced选项卡下，将read-more-text添加为类，然后单击Save。
3. 在Beaver Builder Global Settings下，转到CSS选项卡，并添加：

/* Fade out read more text. */
.text-fade-out {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent);
}

/* Read more link. */
.read-more-link {
  font-weight: bold;
}

1. 在Beaver Builder Global Settings下，转到JavaScript选项卡，并粘贴到ReadMore.js中。然后在下面加上：

/* Apply to read more text sections. */
var destroy = $readMoreJS({
   target: '.read-more-text .fl-rich-text',
   wordsCount: 150,
   toggle: true,
   moreLink: 'Read more',
   lessLink: 'Read less',
   linkClass: 'read-more-link'
});

/* Add text fade out to read more text sections. */
var list = document.querySelectorAll(".read-more-text .fl-rich-text p:last-of-type");
for (var i = 0; i < list.length; ++i) {
   list[i].classList.add('text-fade-out');
}

/* Toggle text fade out. */
var list = document.querySelectorAll(".read-more-link");
for (var i = 0; i < list.length; ++i) {
    list[i].addEventListener("click", function (event) {
        // This event is fired after data-clicked attribute is toggled by 
        // ReadMore.js. So 'false' means true in practical terms.
        if (event.target.getAttribute('data-clicked') == 'false') {
            event.target.previousSibling.classList.toggle('text-fade-out');
        }
    }, false);
}