使用Mootools的/ Javascript來解析簡碼

我需要在一個CMS文本區域使用字符串/簡碼定義按鈕...對於非技術用戶喜歡簡單的東西：使用Mootools的/ Javascript來解析簡碼

[按鈕文本=「點擊這裏「href =」http://www.google.com「]

基於該字符串，我需要動態地創建一個按鈕使用mootools（或一般的JavaScript）在前端（jQuery的是不可用的我們的環境）。到目前爲止，我還沒有能夠從括號開始解析代碼，然後獲取這些屬性以用於代碼。然後我需要銷燬原始的簡碼。如果有更好的方法，它不需要按照上面的方式進行設置......任何建議都會被讚賞。

謝謝！

來源

2012-09-24 tofraser

嗯，我正要通過做一些服務器端腳本來將shortcode風格的字符串重新格式化爲一個有效的DOM元素來解決我的問題。一旦我將它作爲一個DOM元素，我使用Mootools來進行操作。 – tofraser

解決自己的問題不是很好嗎？隨意詳細說明您的流程作爲答案，並接受它，讓其他人可以受益。 –

下面是我提出的解決方案...這有點破解，但它工作。我正在使用的CMS是基於Coldfusion的，但方法應該是可轉移的...

另一個複雜性：在我們的例子中，我們需要可編輯按鈕出現在與模板的可編輯區域分開的地方。基本上，我們在側邊欄中有一個不可編輯的按鈕，我們希望從主要內容區域進行輕鬆編輯。所以，如果用戶定義了一個按鈕，我們會用用戶定義的按鈕替換側邊欄按鈕。所以我有一個額外的步驟，我使用mootools來抓取創建的按鈕，替換頁面邊欄上的按鈕，然後銷燬原始按鈕。

我們的目標是爲用戶在文本區域在CMS某處輸入一個簡短的代碼，類似：

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

後端將轉換到這個DOM元素，並在前面最後，我們將使用mootools將按鈕定位到需要的位置，然後銷燬原始標記。

首先，我搜索在DB輸出的代碼...

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

接着，使用正則表達式替換ColdFusion中，我取代了按鈕的第一實例與所述標記...（RS 。體是指從數據庫返回的主體數據）...

<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-button」的按鈕，因此它會抓取該按鈕並用上面定義的屬性替換文本和鏈接，然後銷燬上面定義的元素。

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

就是這樣。我不知道這會對其他人有多大的幫助，但是因爲朱利安建議我發佈我的解決方案，所以我希望它能幫助其他人！祝你好運！

來源

2012-10-31 14:40:48 tofraser

使用Mootools的/ Javascript來解析簡碼

回答

相關問題