跳到內容

XForms/在文字區域框中插入 BBcode 的觸發器

來自華夏公益教科書,開放的書籍,開放的世界

使用觸發器將 BBcode 或其他文字新增到輸入或文字區域控制元件

[編輯 | 編輯原始碼]

這是一個簡單的方法,使用按鈕(觸發器)將常用的文字新增到您的 xforms-input 或 xforms-textarea 控制元件。這可以是許多東西,例如 BBcode(粗體/非粗體程式碼)、日期時間戳、常用的格式化文字(例如信頭、簽名塊)、不容易記住的特殊程式碼——所有這些都取決於您的表單的用途和您的特定需求。

[編輯 | 編輯原始碼]

載入示例 XForms 應用程式


一個更高階的示例,用於在文字的開頭或結尾插入(帶有一些額外的程式碼插入,例如連結和影像)

載入示例 XForms 應用程式

程式結構

[編輯 | 編輯原始碼]

為了簡化,我們在模型/例項中使用單個 <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"/>
下一頁: 多個模型比較 | 上一頁: 增量模型載入
首頁: XForms
華夏公益教科書