Question

I need to use a string/shortcode in a CMS text area to define a button… something simple for non-technical users like:

[button text=”Click Here” href=”http://www.google.com”%5D

Based on that string, I need to dynamically create a button using mootools (or javascript in general) on the front end (jquery isn’t avaialble in our environment). So far, I haven’t been able to parse code starting with brackets and then grab those attributes for use in code. I will then need to destroy the original shortcode. It doesn’t have to be setup exactly the way I have it above if there is a better way…Any suggestions are appreciated.

Thanks!

Answer 1

Here’s the solution I came up… It’s a bit of a hack, but it worked. The CMS that I am working with is Coldfusion-based, but the method should be transferrable…

Another complexity: In our case, we needed the editable button to appear in a place separate from the editable area of the template. Basically, we had a non-editable button in a sidebar that we wanted to make easily editable from the main content area. So, if the user defines a button, we would replace the sidebar button with a user-defined button. So I have an extra step where I used mootools to grab the button that is created, replace the button in the sidebar on the page and then destroy the original button.

The goal was for a user to enter a short-code somewhere in a text area in the CMS, something like:

[button id="override-button" title="XXX" href="YYY"][/button]

The backend would translate this into a DOM element, and the on the front end, we would use mootools to position the button where it needs to be and then destroy the original markup.

First, I searched for the code in the DB output…

<cfset find1='\[button'>    <!-- open-->
<cfset find2='\]\[/button]'>    <!-- close -->

Next, using regular expression replace in coldfusion, I replaced the first instance of the button with the markup… (rs.body refers the body data returned from the database)…

<cfset replace1 = "<button">
<cfset replace2 = "></button>">
<cfset rs.body=#REReplace(rs.body,find1,replace1,"ONE")#>
<cfset rs.body=#REReplace(rs.body,find2,replace2,"ONE")#>

So, the resulting markup would be:

<button id="override-button" title="XXX" href="YYY"></button>

Next, I used mootools to manipulate that DOM element. As mentioned, there was already a button in the sidebar with the id “open-form-button,” so this grabs that button and replaces the text and link with the attributes defined above, then destroys the element defined above.

var overrideBtn = $('override-button');
var overrideBtn_title,overrideBtn_href = null;

if (overrideBtn) {
overrideBtn_title = overrideBtn.getProperty('title');
overrideBtn_href = overrideBtn.getProperty('href');

if (overrideBtn_title && overrideBtn_href)
{
    $('open-form-button').set('text', overrideBtn_title);
    $('open-form-button').setProperty('href',overrideBtn_href);
    overrideBtn.dispose();
}
}

And that’s it. I don’t know how helpful this will be to anyone else, but since Julian suggested I post my solution, I hope it helps someone along the way! Good luck!