Revamp Your Blog Editing Workflow: Unlock the Power of BBCODE with Custom Bootstrap Icons
Discover the Exciting Process Behind My Custom Icon Creation for Effortless BBCODE Integration.
It’s been awhile since I talked about coding on my site. I’m still using a custom Perl CMS—although the group I worked with has long since disbanded. In any case, I’ve generally used a more basic editor on my site. Although I’d love to someday integrate something more complex, the simplicity has made it easy for me to maintain my blog. But, that doesn’t mean I can’t make it better.
# Looking back.
Now, for those that don’t know, my CMS uses BBCODE for much of its formatting. The editor isn’t WYSIWYG, acting more like markup. Behind the scenes it converts the text to HTML using a series of regular expressions in Perl. BBCODE is expanded and some HTML is modified to better fit the theme. This all works generally well, but not perfect. I’ve been tweaking that code on and off since I started using this CMS to make it conform to my style.
Although the CMS came with BBCODE legends that I could add, they were cumbersome and some code was too childish for my test. Many were old forum emotes that have fallen out of use. They were fun in the 90’s, but weren’t my thing. As such, I hid those and the funny GIF’s that they used. You can still use them on the site, but I try not to encourage it. The formatting codes didn’t work all that great either which led me to hide those as well.
One niggle for me after doing that was remembering the keywords when formatting. I often found myself opening up old blog posts and copying and pasting code into the new article. Things like headers and pictures were often made of longer HTML with styles which were hard to remember.
To fix this, a few years back I adapted the editor by adding in some Javascript that would let insert some in some of the custom codes that I often forget. Specifically, I had added in some meta tags that would get converted into descriptions, add in images, or change the behavior of my CMS. This allowed me to edit without remember what I called those tags. I used a better routine than what the CMS had used. Using Font Awesome icons, I pinned those codes to the upper right corner of the editor. That worked well, but wasn’t perfect.
# Making some changes.
One later change was mixing up the icons. Font Awesome is a great icon pack, but I was struggling with it becoming more than I wanted. I discovered that Bootstrap had released their own icon pack and, as it matured, I found I could replace most of the original icons with theirs. This made the site a bit more cohesive. It didn’t solve all my problems.
As time went on, I decided to add or modify the BBCODE to deal with my changing needs. Instead of always coping and pasting some custom HTML for the header, I made a new BBCODE keyword called [HEAD]
. The advantage of this change is I didn’t have to copy / paste code from other articles. Liking that, I ended up doing the same for some custom picture code that would center the image and add a title. These simplified my workflow greatly.
To illustrate what I’m describing, here is the perl code I used to display the icons. I found a decent enough Javascript routine to insert code, but it has a side effect of not working with undo. Because of that, I’m omitting it while I look for a better routine that hopefully fixes that.
<span class="formstextnromal pull-right">
<a href="javascript:insertMetachars('<!--meta-img-cat-->')" data-toggle="tooltip"
title="Pin default category image."><i class="bi bi-pin-angle" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('<!--meta-desc: ','-->')" data-toggle="tooltip"
title="Add article description/tagline."><i class="bi bi-info-lg" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('<!--meta-img: -->')" data-toggle="tooltip"
title="Define a featured image."><i class="bi bi-file-image-fill" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('<!--meta-img-top: --><!--meta-img-top-alt: -->')" data-toggle="tooltip"
title="Define small top news image."><i class="bi bi-file-richtext-fill" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('<!--more-->')" data-toggle="tooltip"
title="Define top news excerpt."><i class="bi bi-three-dots" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('[head]','[/head]')" data-toggle="tooltip"
title="Add a hashtag heading."><i class="bi-hash" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('[pic=title]','[/pic]')" data-toggle="tooltip"
title="Add a picture and title."><i class="bi-file-image" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('[code]','[/code]')" data-toggle="tooltip"
title="Add a code/pre block."><i class="bi bi-file-code" aria-hidden="true"></i></a>
<a href="javascript:insertMetachars('[quote=attribution]','[/quote]')" data-toggle="tooltip"
title="Add a quote with attribution."><i class="bi bi-chat-square-quote" aria-hidden="true"></i></a>
</span>
Just this week, I was checking some of my HTML to see if was still valid. I had broken a few things and needed to clean up some of those regular expressions. In doing so, I realized that my use of <PRE>
wasn’t properly escaping the code. In fixing it, I rediscovered that I had cleaned up the [CODE]
to accommodate that already. Frustrated, I decided to add a couple more editor commands.
# A rabbit hole.
Of course, opening up my code reminded me of how much of a pain it was the last time I changed the icons. You see, the editor has slightly different formatting for the form when you are creating verses modifying an article. As such, I had to add in the icons in two places. Realizing that is a pain, I decided to fix it.
CMS Editor using Bootstrap Icons
Instead of editing the icons twice, I broke that code into a function that allowed me to reuse the same code. Now I can edit or add functions once. This gave me some freedom to add a few more functions, as seen above. The new code and block quote icons allow me to use the modified routines without having to remember they exist.
In changing up the code, I also modified the icons to ensure the meta tags stood out separately from the BBCODE. I think the final version looks good enough. I didn’t always find the prefect icon for my needs but they work. Plus, I have the tool tips to clear up any confusion. In the end, I have a working editor that suits my needs. Someday I’ll revamp the site and, when I do, perhaps add in something much more robust. Then again, maybe simple is better.