設定Rich Text Editor外掛程式

RTE功能可透過一系列外掛程式提供，每個外掛程式都包含features屬性。 您可以配置features屬性以啟用或禁用一個或多個RTE功能。 本文說明如何具體配置RTE插件。

有關其他RTE配置的詳細資訊，請參見 Configure Rich Text Editor。

啟動外掛程式並設定features屬性

若要啟動外掛程式，請依照下列步驟進行。 只有在您第一次設定外掛程式時，才需要一些步驟，因為對應的節點不存在。

預設情況下，format、link、list、justify和control插件及其所有功能都在RTE中啟用。

1. 使用CRXDE Lite，找出專案的文字元件。

2. 如果<rtePlugins-node>的父節點不存在，請先建立<a0/>的父節點，然後再配置任何RTE插件：

   • 根據您的元件，父節點包括：

     • config: .../text/cq:editConfig/cq:inplaceEditing/config
     • 替代配置節點：.../text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig
     • text: .../text/dialog/items/tab1/items/text

   • 類型：jcr:primaryType cq:Widget

   • 兩者皆具有下列屬性：

     • 名稱 name
     • 類型 String
     • 值 ./text

3. 根據您為配置的介面，建立節點<rtePlugins-node>（如果節點不存在）:

   • 名稱 rtePlugins
   • 類型 nt:unstructured

4. 在此下，為要激活的每個插件建立一個節點：

   • 類型 nt:unstructured
   • 為 所需插件的插件ID命名

啟動外掛程式後，請依照下列准則來設定features屬性。

瞭解findreplace增效模組

findreplace外掛程式不需要任何設定。 它是現成可用的。

使用替換功能時，應與查找字串同時輸入要替換的替換字串。 不過，您仍可以按一下「尋找」，在取代字串之前先搜尋字串。 如果在按一下「查找」後輸入了替換字串，則搜索將重置為文本的開頭。

當點按尋找時，尋找和取代對話方塊會變為透明，當點按取代時，對話方塊會變成不透明。 這可讓作者檢閱作者將要取代的文字。 如果用戶按一下「全部替換」(replace all)，則對話框將關閉並顯示已替換的數量。

配置貼上模式

使用RTE時，作者可以在以下三種模式之一中貼上內容：

• 瀏覽器模式:使用瀏覽器的預設貼上實作來貼上文字。它不是建議的方法，因為它可能會引入不想要的標籤。

• 純文字檔案模式:將剪貼簿內容貼為純文字。在AEM元件中插入之前，會先從複製的內容移除所有樣式和格式元素。

• MS Word模式:從MS Word複製時，使用格式化貼上文字（包括表格）。不支援從其他來源（例如網頁或MS Excel）複製和貼上文字，並僅保留部分格式。

配置RTE工具欄上的「貼上」選項

您可以在RTE工具列中為作者提供以下三個表徵圖：

• 貼上(Ctrl+V):可預先設定，以對應上述三種「貼上」模式之一。

• 貼上為文字:提供純文字檔案模式功能。

• 從Word貼上:提供MS Word模式功能。

要配置RTE以顯示所需的表徵圖，請遵循以下步驟。

1. 導覽至您的元件，例如/apps/<myProject>/components/text。
2. 導航到節點rtePlugins/edit。 如果節點不存在，請參見激活插件。
3. 在edit節點上建立features屬性，並添加一個或多個功能。 儲存所有變更。

設定「貼上」(Ctrl+V)圖示和捷徑的行為

您可以使用下列步驟預先設定​貼上(Ctrl+V)​圖示的行為。 此設定也定義作者用來貼上內容的鍵盤快速鍵Ctrl+V的行為。

此配置允許以下三種類型的使用案例：

• 使用瀏覽器的預設貼上實作來貼上文字。 它不是建議的方法，因為它可能會引入不想要的標籤。 使用下面的browser進行配置。

• 將剪貼簿內容貼為純文字。 在AEM元件中插入之前，會先從複製的內容移除所有樣式和格式元素。 使用下面的plaintext進行配置。

• 從MS Word複製時，使用格式化貼上文字（包括表格）。 不支援從其他來源（例如網頁或MS Excel）複製和貼上文字，並僅保留部分格式。 使用下面的wordhtml進行配置。

1. 在元件中，導航至<rtePlugins-node>/edit節點。 如果節點不存在，則建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在edit節點中，使用以下詳細資訊建立屬性：

   • 名稱 defaultPasteMode
   • 類型 String
   • 值 所需的貼上模式 browser、 plaintext或之一 wordhtml。

配置貼上內容時允許的格式

您可進一步設定「貼上方式-Microsoft-Word」(paste-wordhtml)模式，以便您明確定義從其他程式（例如Microsoft Word）在AEM中貼上時允許使用哪些樣式。

例如，如果在AEM中貼上時僅允許使用粗體格式和清單，您可以篩選掉其他格式。 這稱為可設定的貼上篩選，可針對下列兩種方式執行：

• 文字
• 連結

對於連結，您也可以定義自動接受的通訊協定。

若要設定從其他程式將文字貼到AEM時允許的格式：

1. 在元件中，導航到節點<rtePlugins-node>/edit。 如果節點不存在，則建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在edit節點下建立一個節點以保存HTML貼上規則：

   • 名稱 htmlPasteRules
   • 類型 nt:unstructured

3. 在htmlPasteRules下建立一個節點，以保存允許的基本格式的詳細資訊：

   • 名稱 allowBasics
   • 類型 nt:unstructured

4. 要控制接受的各種格式，請在allowBasics節點上建立以下一個或多個屬性：

   • 名稱 bold
   • 名稱 italic
   • 名稱 underline
   • 名稱 anchor （同時適用於連結和命名定位點）
   • 名稱 image

   所有屬性均為​Type Boolean，因此，在適當的​Value​中，您可以選擇或移除複選標籤以啟用或停用功能。

   注意

   如果未明確定義，則使用預設值true並接受格式。

5. 還可以使用其他屬性或節點範圍定義其他格式，這些屬性或節點也應用於htmlPasteRules節點：

有效htmlPasteRules結構的示例：

"htmlPasteRules": {
    "allowBasics": {
        "italic": true,
        "link": true
    },
    "allowBlockTags": [
        "p", "h1", "h2", "h3"
    ],
    "list": {
        "allow": false,
        "ignoreMode": "paragraph"
    },
    "table": {
        "allow": true,
        "ignoreMode": "paragraph"
    }
}

1. 儲存所有變更。

配置文本樣式

作者可以套用「樣式」來變更部分文字的外觀。 這些樣式是以您在CSS樣式表中預先定義的CSS類別為基礎。 使用class屬性將樣式化內容括在span標籤中，以引用CSS類別。 例如：

<span class=monospaced>Monospaced Text Here</span>

當第一次啟用「樣式」外掛程式時，就不提供預設的「樣式」。 快顯清單是空的。 若要為作者提供樣式，請執行下列動作：

• 啟用「樣式」下拉式選取器。
• 指定樣式表的位置。
• 指定可從「樣式」下拉式清單中選取的個別樣式。

對於稍後（重新）的配置，例如要添加更多樣式，請只按照說明參考新樣式表並指定其他樣式。

啟用「樣式」下拉式選擇器清單

若要這麼做，請啟用樣式外掛程式。

1. 在元件中，導航到節點<rtePlugins-node>/styles。 如果節點不存在，則建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在styles節點上建立features屬性：

   • 名稱 features
   • 類型 String
   • 值 * （星號）

3. 儲存所有變更。

指定樣式表位置

然後，指定要參照的樣式表的位置：

1. 導覽至文字元件的根節點，例如/apps/<myProject>/components/text。

2. 將屬性externalStyleSheets添加到<rtePlugins-node>的父節點：

   • 名稱 externalStyleSheets
   • Type String[] (multi-string;按一 ​​下多重CRXDE)
   • 值要包 含的每個樣式表的路徑和檔案名。使用儲存庫路徑。
   注意

   您可以隨後將參照添加到其他樣式表。

3. 儲存所有變更。

#CQ td {
// defines the style for viewing
}

#CQrte td {
// defines the style for editing
}

在快顯清單中指定可用的樣式

1. 在元件定義中，導航到在啟用樣式下拉式選擇器中建立的節點<rtePlugins-node>/styles。

2. 在節點styles下，建立新節點（也稱為styles）以保存要提供的清單：

   • 名稱 styles
   • 類型 cq:WidgetCollection

3. 在styles節點下建立新節點以表示單個樣式：

   • 名稱，您可以指定名稱，但應適合樣式
   • 類型 nt:unstructured

4. 將屬性cssName添加到此節點以引用CSS類：

   • 名稱 cssName
   • 類型 String
   • 值 CSS類別的名稱（不含前面的'.'）;例如，cssClass而非.cssClass)

5. 將屬性text添加到同一節點；這定義了選擇框中顯示的文本：

   • 名稱 text
   • 類型 String
   • 值 樣式描述；顯示在「樣式」下拉式選擇框中。

6. 儲存變更。

   對每個所需樣式重複上述步驟。

配置RTE，以便在日文中獲得最佳單字分隔

使用AEM來製作日文語言內容的作者可以將樣式套用至字元，以避免在不需要分行符的情況下出現分行符號。 這可讓作者讓句子在所要的位置中斷。 此功能的樣式是以CSS樣式表中預先定義的CSS類別為基礎。

若要建立作者可套用至日文文字的樣式，請遵循下列步驟：

1. 在樣式節點下建立新節點。 請參閱指定新樣式。

   • 名稱: jpn-word-wrap
   • 類型：'nt':unstructure

2. 將屬性cssName新增至節點以參考CSS類別。 此類別名稱是日文繞字功能的保留名稱。

   • 名稱: cssName
   • 類型: String
   • 值：jpn-word-wrap（不含前面的.）

3. 將屬性文本添加到同一節點。 該值是作者在選擇樣式時看到的樣式名稱。

   • 名稱：text
     *類型：
     String
   • 值: Japanese word-wrap

4. 建立樣式表並指定其路徑。 請參閱指定樣式表的位置。 將下列內容新增至樣式表。 視需要變更背景顏色。

   .text span.jpn-word-wrap {
       display:inline-block;
   }
   .is-edited span.jpn-word-wrap {
       background-color: #ffddff;
   }
   

   

配置段落格式

在RTE中編寫的任何文本都放在塊標籤中，預設值為<p>。 啟用paraformat外掛程式，即可使用下拉式選擇清單，指定可指派給段落的其他區塊標籤。 段落格式通過指定正確的塊標籤來確定段落類型。 作者可以使用「格式」選擇器來選取並指派它們。 範例區塊標籤包括標準段落<p>和標題<h1>、<h2>等。

首次啟用「段落格式」外掛程式時，不提供預設的「段落格式」。 快顯清單是空的。 要向作者提供段落格式，請執行以下操作：

• 啟用「格式」下拉式選取器清單。
• 指定可從下拉式清單中選取為段落格式的區塊標籤。

對於以後的（重新）配置，例如要添加更多格式，請只遵循說明的相關部分。

啟用「格式」下拉式選擇器

首先啟用paraformat外掛程式：

1. 在元件中，導航到節點<rtePlugins-node>/paraformat。 如果節點不存在，則建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在paraformat節點上建立features屬性：

   • 名稱 features
   • 類型 String
   • 值 * （星號）

指定可用的段落格式

段落格式可供下列人士選擇：

1. 在元件定義中，導航到在啟用格式下拉選擇器中建立的節點<rtePlugins-node>/paraformat。

2. 在paraformat節點下建立一個新節點，以保存格式清單：

   • 名稱 formats
   • 類型 cq:WidgetCollection

3. 在formats節點下建立新節點，這將保存單個格式的詳細資訊：

   • 名稱，您可以指定名稱，但它應適合格式（例如myparagraph、myheading1）。
   • 類型 nt:unstructured

4. 要使用此節點，請添加屬性以定義使用的塊標籤：

   • 名稱 tag

   • 類型 String

   • 值 格式的塊標籤；例如：p、h1、h2等。

     您不需要輸入定界角括弧。

5. 對於同一節點，添加另一個屬性，以便說明性文本顯示在下拉清單中：

   • 名稱 description
   • 類型 String
   • 值 此格式的描述性文字；例如，段落、標題1、標題2等。此文本顯示在「格式」(Format)選擇清單中。

6. 儲存變更。

   對每種必要格式重複步驟。

配置特殊字元

在標準AEM安裝中，當misctools外掛程式針對特殊字元(specialchars)啟用時，就會立即提供預設選擇供使用；例如，著作權和商標符號。

您可以配置RTE，使自己選擇的字元可供使用；定義不同的字元或整個序列。

定義單一字元

1. 在元件中，導航到節點<rtePlugins-node>/misctools。 如果節點不存在，則建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在misctools節點上建立features屬性：

   • 名稱 features

   • 類型 String[]

   • 值 specialchars

     （或String / *，如果套用此外掛程式的所有功能）

3. 在misctools下建立一個節點以保存特殊字元配置：

   • 名稱 specialCharsConfig
   • 類型 nt:unstructured

4. 在specialCharsConfig下建立另一個節點以保存字元清單：

   • 名稱 chars
   • 類型 nt:unstructured

5. 在chars下添加新節點以保存單個字元定義：

   • 名 稱可以指定名稱，但應反映字元；例如，一半。
   • 類型 nt:unstructured

6. 要添加到此節點，請添加以下屬性：

   • 名稱 entity
   • 類型 String
   • 評 估所需字元的HTML表示；例如，對 &189; 於一半的分數。

7. 儲存變更。

在CRXDE中，保存屬性後，將顯示所表示的字元。 請參閱下方的一半範例。 重複上述步驟，讓作者可使用更多特殊字元。

定義字元範圍

1. 使用定義單字元中的步驟1到3。

2. 在chars下添加新節點，以保存字元範圍的定義：

   • 名 稱可以指定名稱，但應反映字元範圍；比如鉛筆。
   • 類型 nt:unstructured

3. 在此節點下（根據您的特殊字元範圍命名）新增下列兩個屬性：

   • 名稱 rangeStart

     類型 Long
     估 值范 圍中第一個字元的Unicoderepresentation(decimal)

   • 名稱 rangeEnd

     類型 Long
     估 值范 圍內最後一個字元的Unicodederepresentation(decimal)

4. 儲存變更。

   例如，定義範圍為9998 - 10000，提供下列字元。

   

   圖：在CRXDE中，定義要在RTE中提供的字元範圍

   

配置表樣式

樣式通常套用在文字上，但也可套用在表格或數個表格儲存格上的個別樣式集。 作者可從「儲存格屬性」或「表格屬性」對話方塊的「樣式選取器」方塊中，使用此類樣式。 在「文本」(Text)元件（或衍生）中編輯表時，這些樣式是可用的，在標準「表」(Table)元件中不可用。

1. 在元件中導航到節點<rtePlugins-node>/table。 如果節點不存在，則建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在table節點上建立features屬性：

   • 名稱 features
   • 類型 String
   • 值 *
   注意

   如果不想啟用所有表功能，可以將features屬性建立為：

   • 類型 String[]
   • 視需要，為下列其中一項或兩項設定值：
     • table 允許編輯表屬性；包括樣式。
     • cellprops 以允許編輯儲存格屬性，包括樣式。

3. 定義CSS樣式表的位置以參照這些樣式表。 請參閱指定樣式表的位置，因為這與定義文本](#textstyles)的[樣式時相同。 如果定義了其他樣式，則可定義該位置。

4. 在table節點下建立以下新節點（根據需要）:

   • 要定義整個表的樣式（可在​表屬性​下使用）:

     • 名稱 tableStyles
     • 類型 cq:WidgetCollection

   • 要定義各個單元格的樣式（可在​單元格屬性​下使用）:

     • 名稱 cellStyles
     • 類型 cq:WidgetCollection

5. 建立新節點（在tableStyles或cellStyles節點下，視情況建立）以表示單個樣式：

   • 名 稱可指定名稱，但應反映樣式。
   • 類型 nt:unstructured

6. 在此節點上建立以下屬性：

   • 要定義要引用的CSS樣式

     • 名稱 cssName
     • 類型 String
     • 值 CSS類別的名稱(例如，不含 .前面的 cssClass 名稱 .cssClass)

   • 要定義要在下拉式選擇器中顯示的描述性文本，請執行以下操作：

     • 名稱 text
     • 類型 String
     • 估 值要出現在選擇清單中的文本

7. 儲存所有變更。

對每個所需樣式重複上述步驟。

為協助工具設定表格中的隱藏標題

有時，您可能會在欄標題中建立不含視覺文字的資料表格，並假設欄與其他欄的視覺關係暗示標題的用途。 在這種情況下，必須在標題儲存格的儲存格內提供隱藏的內文，讓螢幕閱讀程式和其他輔助技術協助有不同需求的讀者瞭解欄目的用途。

為了增強此類場景中的輔助功能，RTE支援隱藏的標題單元格。 此外，它還提供與表格中隱藏標題相關的配置設定。 這些設定可讓您在編輯和預覽模式中，將CSS樣式套用至隱藏的標題。 若要協助作者在編輯模式中識別隱藏的標題，請在程式碼中加入下列參數：

• hiddenHeaderEditingCSS:指定編輯RTE時，在隱藏標題單元格上應用的CSS類的名稱。
• hiddenHeaderEditingStyle:指定在編輯RTE時應用於隱藏標題單元格的樣式字串。

如果您在程式碼中同時指定CSS和Style字串，CSS類別會優先於樣式字串，而且可能會覆寫Style字串所做的任何設定變更。

若要協助作者在預覽模式中將CSS套用在隱藏的標題上，您可在程式碼中加入下列參數：

• hiddenHeaderClassName:指定在預覽模式中套用在隱藏標題儲存格上的CSS類別名稱。
• hiddenHeaderStyle:指定在預覽模式下應用於隱藏標題單元格的樣式字串。

如果您在程式碼中同時指定CSS和Style字串，CSS類別會優先於樣式字串，而且可能會覆寫Style字串所做的任何設定變更。

為拼寫檢查器添加字典

當spellcheck外掛程式啟動時，RTE會針對每個適當的語言使用字典。 然後根據網站的語言選擇，分別從子樹中抽取語言屬性或從URL中抽取語言；例如。 /en/分支會勾選為英文，而/de/分支則為德文。

標準AEM安裝包含美國英文(en_us)和英文(en_gb)的字典。 若要新增更多字典，請依照下列步驟進行。

1. 導覽至頁面https://extensions.openoffice.org/。

2. 執行下列任一項作業，以尋找您選擇的語言字典：

   • 搜尋您選擇的語言字典。 在字典頁面上，找到原始來源或作者網頁的連結。 在此頁面上找到v2.x的字典檔案。
   • 在https://wiki.openoffice.org/wiki/User:Khirano/Dictionaries搜尋v2.x字典檔案。

3. 下載包含拼字定義的封存檔。 解壓檔案系統上的存檔內容。

   注意

   僅支援MySpell格式的OpenOffice.org v2.0.1或更舊版本字典。 由於字典現在是封存檔案，因此建議您在下載後確認封存。

4. 找到。aff和。dic檔案。 將檔案名稱保留為小寫。 例如，de_de.aff和de_de.dic。

5. 在/apps/cq/spellchecker/dictionaries的儲存庫中載入。aff和。dic檔案。

配置還原和重做操作的歷史記錄大小

RTE允許作者還原或重做最後幾次編輯。 依預設，50個編輯會儲存在歷史記錄中。 您可以視需要設定此值。

1. 在元件中導航到節點<rtePlugins-node>/undo。 如果節點不存在，請建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在undo節點上建立屬性：

   • 名稱 maxUndoSteps
   • 類型 Long
   • 估 計要保存在歷史記錄中的撤消步驟數。預設值為50。 使用0可完全停用還原／重做。

3. 儲存變更。

配置頁籤大小

當在任何文本中按下Tab字元時，將插入預定數量的空格；預設情況下，這是三個非斷開空格和一個空格。

要定義標籤大小，請執行以下操作：

1. 在元件中，導航到節點<rtePlugins-node>/keys。 如果節點不存在，則建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在keys節點上建立屬性：

   • 名稱 tabSize
   • 類型 String
   • 估 計用於表格的空格字元數。

3. 儲存變更。

設定縮進邊界

啟用縮進（預設）時，可以定義縮進大小：

1. 在元件中導航到節點<rtePlugins-node>/lists。 如果節點不存在，請建立這些節點。 如需詳細資訊，請參閱啟用外掛程式。

2. 在lists節點上建立identSize參數：

   • 名稱: identSize
   • 類型: Long
   • 值:縮進邊界所需的像素數。

配置可編輯空間的高度

您可以定義元件對話框中顯示的可編輯空間的高度：

1. 在元件的對話框定義中的../items/text節點上，建立新屬性：

   • 名稱 height
   • 類型 Long
   • 以像 素為單位來評估編輯畫布的高度。
   注意

   這不會更改對話框窗口的高度。

2. 儲存變更。

配置連結的樣式和協定

在AEM中新增連結時，您可以定義：

• 要使用的CSS樣式
• 自動接受協定

若要設定如何從其他程式在AEM中新增連結，請定義HTML規則。

1. 使用CRXDE Lite，找出專案的文字元件。

2. 在與<rtePlugins-node>相同的級別建立新節點，即在<rtePlugins-node>的父節點下建立節點：

   • 名稱 htmlRules
   • 類型 nt:unstructured
   注意

   ../items/text節點具有以下屬性：

   • 名稱 xtype
   • 類型 String
   • 值 richtext

   ../items/text節點的位置可能因對話結構而異；兩個範例包括：

   • /apps/myProject>/components/text/dialog/items/text
   • /apps/<myProject>/components/text/dialog/items/panel/items/text

3. 在htmlRules下，建立新節點。

   • 名稱 links
   • 類型 nt:unstructured

4. 在links節點下，根據需要定義屬性：

   • 內部連結的CSS樣式：

     • 名稱 cssInternal
     • 類型 String
     • ​​值CSS類的名稱（不帶前面的'.'）;例如，cssClass而非.cssClass)

   • 外部連結的CSS樣式

     • 名稱 cssExternal
     • 類型 String
     • ​​值CSS類的名稱（不帶前面的'.'）;例如，cssClass而非.cssClass)

   • 有效​協定的陣列。 支援的通訊協定有http://、https://、file://和mailto:。

     • 名稱 protocols
     • 類型 String[]
     • 值，一個或多個協定

   • defaultProtocol ( String​類型的屬性):當用戶未明確指定協定時使用的協定。

     • 名稱 defaultProtocol
     • 類型 String
     • 值，一個或多個預設協定

   • 如何處理連結的目標屬性的定義。 建立新節點：

     • 名稱 targetConfig
     • 類型 nt:unstructured

     在節點targetConfig上：定義所需屬性：

     • 指定目標模式：

       • 名稱 mode

       • 類型 String)

       • 值:

         • auto:意指自動選取目標

           （由targetExternal屬性為外部連結指定，或targetInternal為內部連結指定）。

         • manual:不適用於此上下文

         • blank:不適用於此上下文

     • 內部連結的目標：

       • 名稱 targetInternal
       • 類型 String
       • 評 估內部連結的目標(僅在模式為時使用 auto)

     • 外部連結的目標：

       • 名稱 targetExternal
       • 類型 String
       • 評 估外部連結的目標(僅在模式為時 auto使用)。

5. 儲存所有變更。