XForms/在文字區域框中插入 BBcode 的觸發器
外觀
< XForms
這是一個簡單的方法,使用按鈕(觸發器)將常用的文字新增到您的 xforms-input 或 xforms-textarea 控制元件。這可以是許多東西,例如 BBcode(粗體/非粗體程式碼)、日期時間戳、常用的格式化文字(例如信頭、簽名塊)、不容易記住的特殊程式碼——所有這些都取決於您的表單的用途和您的特定需求。
一個更高階的示例,用於在文字的開頭或結尾插入(帶有一些額外的程式碼插入,例如連結和影像)
為了簡化,我們在模型/例項中使用單個 <text/> 元素來儲存我們的示例輸入。除了提供一個更大的文字區域來進行測試外,樣式並不是真正必要的。
表單的真正力量和簡潔之處在於 xforms-setvalue 元素的 value 屬性,它本身位於 xforms-trigger 內部。
value="concat(//text,'whatever you desire goes here')"
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Insert BB code</title>
<style type="text/css"> <!--mozilla specific style-->
@namespace xf url('http://www.w3.org/2002/xforms');
xf|textarea .xf-value{ width:25em; height:20ex; }
</style>
<xf:model>
<xf:instance>
<data xmlns="">
<text/>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<xf:trigger><xf:label>Bold</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="//text" value="concat(//text,'[b][/b] ')"/>
<xf:setfocus control="textArea"/>
</xf:action>
</xf:trigger><br/>
<xf:textarea id="textArea" ref="//text">
<xf:label>Post:</xf:label>
</xf:textarea>
</body>
</html>
此解決方案只會將插入的程式碼/文字附加到文字框中當前文字的末尾。要始終將其置於開頭,只需更改 concat 函式中引數的順序(參見上面的第二個示例連結)。
限制:此解決方案無法將程式碼/文字插入文字框中當前文字的中間。
您可以使用 html 實體來完成複雜的格式,例如信頭(如果您需要保留空格或粗體等) (!!注意:&符號被百分號替換,因為我不知道如何在華夏公益教科書中轉義 html 實體)
<xf:setvalue ref="//text" value="concat(//text,'
%lt;div xmlns=%quot;http://www.w3.org/1999/xhtml%quot;%gt;
%lt;p%gt;%lt;b%gt;Testing insert with HTMLentities%lt;/b%gt;
%lt;/p%gt;
%lt;p%gt;%lt;i%gt;Testing Insertwith HTMLenitites%lt;/i%gt;
%lt;/p%gt;
%lt;pre%gt; Indent Here%lt;/pre%gt;
%lt;/div%gt;')"/>
在這種情況下,請確保您的 xforms-output 具有 mediatype 屬性,如下所示
<xf:output ref="//text" mediatype="application/xhtml+xml"/>