Customize Rich Text Webflow content without limits

Webflow offers a host of features for customizing your CMS. By creating different collections and customizing each field within them, you can create a website that is easily scalable. Webflow's CMS makes iteasy to add content to your website by creating pages or adding content to certain sections in a matter of minutes.

One of the most popular and certainly most flexible fields is Rich Text. Rich text is a text format that allows the addition of extra features such as formatting, hyperlinks and images, to make content more visually appealing and interactive.

At present, however, Webflow Rich Text has some editing limitations. In this article, we'll look at how to overcome these limitations with a no-code (or almost no-code) Webflow extension.

Customize your Rich Text Webflow with Sneaps

Sneaps is the Webflow extension that's revolutionizing Rich Text customization.

With Sneaps, you can unleash your creativity by easily adding rich content to your web pages:

• Customize the style of your texts
• Insert tables
• Create multi-level lists
• etc.

Sneaps offers you an enriched design experience, enabling you to create captivating designs andenhance the visual appearance of your content in Webflow.

How to use Sneaps in Webflow

1. Download the Webflow extension

First, you'll need to download and install the Sneaps extension on your web browser.

2. Open your project in the Webflow Designer

Once the extension is installed, you can go to your Webflow project.

It's important to note that the extension only works in Webflow Designer and not in Editor mode.

3. Create additional styles via the CMS extension

Once you're in your project, you can go to your CMS, to one of your collections, and more precisely to theitem in which you'd like to have more options for Rich Text formatting.

When you're at your Rich Text field, you'll see that a new button has appeared above it. When you click on this "Add rich content" button, a new rich content editor appears.

In this new editor, you have many more features (as seen above) than in Webflow. All you have to do is customize your content as you see fit (for example, by adding a table, changing text colors and sizes, etc.).

4. Copy the source code and paste it into a Rich Text embed

When you've finished customizing your content, it won't appear directly in your Webflow field. You'll need to do a little manipulation to insert it into your field.

Open the "Tools" tab, then click on "Source code". Then copy the entire contents (ctrl or cmd + a to select all, then ctrl or cmd + c to copy).

Next, you need to :

1. Return to your native rich text field.
2. Add an embed element.
3. Paste code (ctrl or cmd + v).
4. Click on "Save and close".
5. Publish your item to see the content appear on your page.

Of course, subsequent modifications will be more complicated, but with this method, you can "easily" personalize your content to a greater extent.

5. Exceeding the 10,000 character limit Embed Webflow

Unfortunately, Webflow has introduced a new limit that can cause problems. Yes, we can't exceed 10,000 characters in an embed element.

Option 1: Split into several embeds

To ensure that you never exceed 10,000 characters, we recommend that you don't write all your content in Sneaps, but use a mix of Webflow and Sneaps. We also recommend that you divide the content you add in Sneaps into several parts for the same purpose.

By following this approach, you can optimize your content management and avoid any character limitations imposed by Sneaps. By using Webflow and Sneaps in a complementary way, you'll be able to make the most of personalization features while guaranteeing a fluid experience for your users.

Option 2: More "technical" solution

The second option is a little more technical, and its editing facility is very limited. If the code exceeds 10,000 characters, you can :

• Paste text into a text editor
• Save file in .txt format
• Upload the .txt file to your project assets
• Copy source.txt file
• Add an embed element with the following code to your rich text

<div id="rich-text-container"></div>

<script>
// Fonction pour charger le contenu du fichier
function loadHTMLContent(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        callback(xhr.responseText);
      } else {
        console.error('Error : ' + xhr.status);
      }
    }
  };
  xhr.open('GET', url, true);
  xhr.send();
}

// Charger le contenu du fichier et l'injecter dans la page
loadHTMLContent('src.txt', function(htmlContent) {
  document.getElementById('rich-text-container').innerHTML = htmlContent;
});
</script>

• Replace the source of the .txt file with the one you copied
• Publish item

The problem with this method is that modification requires repeating the steps from the beginning.

Here's how you can customize your Webflow rich text by adding tables, for example. To go even further, you can learn how to add components to Webflow rich text!