使用Mootools / Javascript解析简码

Question

我需要在CMS文本区域中使用字符串/简码来定义按钮...对于非技术用户来说，这很简单：

[button text =“ Click Here” href =“ http://www.google.com”]

基于该字符串，我需要在前端使用mootools（或一般而言的javascript）动态创建按钮（jquery在我们的环境中不可用）。 到目前为止，我还无法解析以方括号开头的代码，然后再获取这些属性以供代码使用。 然后，我需要销毁原始的简码。 如果有更好的方法，则不必完全按照我上面的方法进行设置。

谢谢！

Answer 1

这是我想出的解决方案...有点破解，但是有效。 我正在使用的CMS是基于Coldfusion的，但是该方法应该可以转移...

另一个复杂性：就我们而言，我们需要可编辑按钮出现在与模板的可编辑区域分开的位置。 基本上，我们在侧边栏中有一个不可编辑的按钮，我们希望可以从主内容区域轻松对其进行编辑。 因此，如果用户定义了按钮，则我们将侧边栏按钮替换为用户定义的按钮。 因此，我有一个额外的步骤，其中我使用mootools来抓取所创建的按钮，替换页面上侧栏中的按钮，然后销毁原始按钮。

目标是让用户在CMS文本区域中的某个地方输入短代码，例如：

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

后端会将其转换为DOM元素，而在前端，我们将使用mootools将按钮定位在需要的位置，然后销毁原始标记。

首先，我在数据库输出中搜索了代码...

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

接下来，在Coldfusion中使用正则表达式替换，我用标记替换了按钮的第一个实例...（rs.body引用从数据库返回的主体数据）...

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

因此，结果标记将是：

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

接下来，我使用mootools来操作该DOM元素。 如前所述，侧边栏中已经有一个按钮，其ID为“ open-form-b​​utton”，因此它将抓住该按钮，并用上面定义的属性替换文本和链接，然后破坏上面定义的元素。

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();
}
}

就是这样。 我不知道这对其他人有多大帮助，但是由于朱利安建议我发布我的解决方案，因此我希望它能对整个过程有所帮助！ 祝好运！