---

The Problem

I thought I was starting down a rabbit hole last night when I decided to add rich text to this website. The desire to have images, headings, links, and videos embedded in my articles proved too much to contain. But I did not want to make it complicated technically or introduce any third-party libraries to do the trick. This seemed doable with Angular.

The Structure

I slept on it, slept well for probably 9 hours, and woke up ready to get this sorted. Here’s what I had going in:

• JSON data structures for the articles.
• An array of strings on the article containing the text (in 'paragraphs').

I also had Angular services and controllers involved that formatted and served up these articles, as well as partial views with directives and filters that displayed the article bodies.

The Solution

I focus on the JSON data structure because the solution proved simple once I decided on a protocol for triggering rich UI element creation. To begin, I just added one level to the ‘paragraph’ structure to contain the ‘text’. Instead of paragraphs being simple strings, they will now have properties - the existing paragraph string became the ‘text’ property.

Next I added a ‘style’ property to the paragraph. This property will control the UI element displayed in the View, and in some cases, its formatting. For different styles, I decided to alter the form of the ‘text’ property - from a text string to an object with different properties.

This feels a little dirty, I admit, and I could have easily added different properties to the paragraph for these different forms of the ‘text’ property. But I was working quickly, and it works fine like this so on we move.

After updating my JSON article paragraphs to the new structure, I simply updated the article View with some logic to display the new styled paragraphs.

Highlights

And the result? You’re looking at it. So far I’ve got headings, images, links, italics, and bulleted-lists. This already gives me great flexibility in the presentation of articles and blog entries on this website. I can embed images and highlight text, as well as link articles together for serial release.

Things could be improved obviously. The styles are all-or-nothing at the moment, so for example the ‘italic’ style applies to entire paragraphs, not words. I could use an Angular ‘switch’ in the View to simplify the case logic for different styles. And I could add paragraph properties to the JSON data structure for the different forms of ‘text’.

But I am very pleased with the outcome so far. It basically took me an afternoon to get the solution working, and I have employed it immediately in the website. I will monitor performance of these rich-text articles and the viability of this solution over time, but I like it so far. Updates will be posted at the top of this article, as always, so bookmark the page for reference.