How do you add read more link to a Beaver Builder text editor?

Question

When I add a Text Editor Module in Beaver Builder, how do I limit the text to a specific number of words and add a "Read More" link?

Answer 1

1. Add a Text Editor module and click on it.
2. Under the Advanced tab, add read-more-text as a class, and click Save.
3. Under Beaver Builder Global Settings, go to the CSS tab, and add:

/* 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;
}

4. Under Beaver Builder Global Settings, go to the JavaScript tab, and paste in ReadMore.js. Then below that, add:

/* 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);
}