將 rich text editor 控制項新增至模型導向應用程式

rich text editor 控制項提供應用程式使用者用於格式化文字的 WYSIWYG 編輯區域。 控制項的輸入和輸出格式為 HTML。 控制項可讓複製的 RTF 文字(例如從網頁瀏覽器或 Word)貼至控制項中。

一些可用的格式選項為:

  • 粗體、斜體、底線和刪除線
  • 文字色彩、醒目提示色彩
  • 字型和大小
  • 編號清單與項目符號清單
  • 超連結
  • 表格
  • 影像

有關預設選項的完整清單,請參閱使用 RTF 文字編輯器工具列

Rich text control editor in a model-driven app

新增或取代文字資料行以進行 RTF 編輯

建立新的文字資料行並設定控制項,或取代現有的文字資料行。 rich text editor 控制項可以用於單一或多行文字資料行。

簡易設定

若要在任何新增或現有文字資料行上使用預設值來啟用 RTF 編輯器,您可以使用下列步驟將 格式 選項設定為 RTF。 有關預設值的詳細資訊:使用預設的 web 資源來進行全組織變更

  1. 登入 Power Apps

    備註

    如果您有現有的 RTF 欄位,則可以使用 API 將格式變更為 Richtext。 其他資訊:資料類型格式轉換

  2. 在左瀏覽窗格中,選取 解決方案,打開所需的解決方案,打開所需的資料表,然後選取 資料行 區域。

  3. 選取 + 新增 > 資料行,輸入資料行的名稱,選取文字 資料 類型,然後選取 RTF 文字 格式選項。

  4. 儲存。 您現在可以將新資料行新增至此資料表的任何現有表單或新的表單。

進階設定

rich text editor 控制項隨附一組豐富的設定選項,讓您可以自訂其外觀、功能和行為。 若要在新的或現有的資料行上啟用具有特定設定的 RTF 編輯器,請完成下列步驟。

  1. 登入 Power Apps
  2. 在左瀏覽窗格中,選取 解決方案,打開所需的解決方案,打開所需的資料表,然後選取 表單 區域。
  3. 選取表單,然後選取 編輯表單 > 在新索引標籤中編輯表單
  4. 在表單設計工具畫布上新增或建立文字資料行,或選取現有的文字資料行 (例如本文中使用的自訂多行文字資料行)。
  5. 在右資料行屬性窗格中,展開 元件 區段,選取 + 元件,然後選取 Rich Text Editor 控制項
  6. 新增 rich text editor 控制項 窗格中,選取以下選項,然後選取 已完成
    • 繫結至資料表資料行:不建議啟用此選項,因為此屬性不支援繫結至其他資料表資料行。

    • 靜態值:如果您要自訂 RTF 編輯器的外觀、功能和行為,請輸入包含您所需屬性 JavaScript Web 資源的相對 URL。 其他資訊:為 rich text editor 控制項建立和使用進階設定

    • Web手機平板電腦:若要讓所有的用戶端應用程式都能使用資料行中的 RTF,請全部啟用。

      Rich text control editor configuration
  7. 儲存發佈 表單。

為 rich text editor 控制項建立和使用進階設定

若要為 rich text editor 控制項建立和使用進階設定,請遵循以下步驟:

  1. 建立 JavaScript (.js) 檔案,其中包含具有所需的 defaultSupportedProps 結構與設定的 JSON 格式文字檔。 其他資訊:更多 RTF 編輯器設定範例RTF 編輯器屬性

  2. 在 Power Apps 中,使用在步驟 1 中建立的 JSON 檔案,建立 JavaScript (JS) 類型的 Web 資源。 其他資訊:建立或編輯模型導向應用程式 Web 資源以擴充應用程式

  3. 新增 rich text editor 控制項 窗格的 靜態值 欄位中,新增 JavaScript Web 資源的相對 URL (例如 /WebResources/contoso_toolbartoprte)。 詳細資訊:新增或取代文字資料行以進行 RTF 編輯

    提示

    • Web 資源 URL 位於您在上一個步驟建立的 Web 資源定義中,URL 欄位旁邊。
    • 雖然您可以使用 靜態值 的絕對 URL,但如果使用相對 URL,在將 Web 資源做為解決方案匯入其他環境之後,Web 資源仍會繼續運作。 JavaScript Web 資源的 URL
  4. 儲存發佈 表單。

使用 RTF 文字編輯器的最佳做法

使用 RTF 文字編輯器時,請考慮下列事項:

  • 當 HTML 內容的大小小於或等於 1 MB 時,能達到最佳效能。 當 HTML 內容大小超過 1 MB 時,您可能會發現載入和編輯內容的回應時間變慢。 根據預設,影像內容是從內容 HTML 參照的,但不會儲存為 HTML 內容的一部分,因此在預設設定中,影像不會對效能造成負面影響。

  • RTF 文字欄位將儲存格式化所需的 HTML 標籤以及使用者輸入資料。 設定欄位的最大大小時,請務必為 HTML 標籤和使用者輸入資料指派足夠的大小。

  • 根據預設,RTF 文字編輯器會將影像上傳至 Azure Blob 儲存體,而且它們不會儲存為欄位的一部分。 當提交者沒有 msdyn_richtextfiles 實體的權限時,影像會儲存在與 Base64 相同的欄位中。 Base64 內容很大,因此一般不會希望將影像儲存為 Base64。

如何將設定套用至 RTF 編輯器

RTF 編輯器的體驗和功能都是由設定來控制。 rich text editor 控制項的預設設定具有滿足一般 RTF 需求,但可以調整的屬性和值。 您可以將設定屬性與值套用至特定的 rich text editor 控制項執行個體。 每個 RTF 編輯器執行個體最多可以有三個層級的設定。 用來套用屬性與值的邏輯如下:

  1. 已載入無法編輯的全域設定檔 RTEGlobalConfiguration_Readonly.json。

  2. 已載入可編輯的全域設定檔 RTEGlobalConfiguration.json。

    • 此設定中的屬性會 取代* 先前設定檔中名稱相同的屬性。
  3. 已載入執行個體特定設定檔 (如果有的話)。 如需執行個體等級設定的詳細資訊,請參閱 進階設定

    • 此設定中的屬性會 取代* 先前任一設定檔中名稱相同的屬性。

    備註

    除了 已合併的 extraPlugins 之外,所有屬性都會被取代。 合併 extraPlugins 可讓您使用 externalPlugins 和現成提供的外掛程式,在 RTEGlobalConfiguration.json 中使用各種外掛程式。 然後,只有必要的外掛程式可以透過將其新增至執行個體特定設定中的 extraPlugins 值,才能啟動。

啟用 RTF 資料行有一組有限的設定,可以設定為唯讀或停用狀態。 您可以從 "readOnlySettings" 屬性描述中了解更多關於此設定的資訊。

RTF 編輯器屬性

JSON 檔案由設定為名稱和值對的屬性所組成。 有兩種類型的設定:defaultSupportedProps 區段,以及提供各種功能的各個組態設定。

defaultSupportedProps 是外掛程式的一組屬性,包含對所有 CKEditor 設定的支援。 其他資訊:RTF 編輯器設定檔的視覺化defaultSupportedProps 不僅限於 CKEditor 所記載的外掛程式屬性,也可讓您為新增或建立的其他外掛程式設定屬性。 外掛程式的詳細資訊:使用外掛程式來擴充商業流程

單一組態設定可讓您變更編輯器的行為和功能。

RTF 文字編輯器設定檔的視覺效果

以下兩個影像以視覺化方式識別兩個設定部分。 如果是完整設定檔,請移至使用預設 Web 資源來進行全組織變更

defaultSupportedProps

其他資訊:defaultSupportedProps defaultsupportedprops 組態視覺效果。

個別組態設定

其他資訊:個別組態設定 個別組態設定視覺化效果。

defaultSupportedProps

您可以在此屬性下設定所有 CKEditor 支援的屬性。 下面介紹了一些常用設定和自訂設定。 如需 CKEditor 設定的完整文件,請參閱 CKEditor.config。RTF 編輯器目前使用 CKEditor 4.17.1 版。

屬性 描述 預設值
高度

設定內容編輯器的初始高度。 預設值為 185 像素。

"height": 185

stickyStyle

設定實際的預設字型大小和樣式。

StickyStyle 外掛程式使用由「stickyStyles_defaultTag」指定的元素 (最初設為 "div" 並且可以變更為 "p" 或任何其他標籤),在您的內容周圍建立包裝函式。

"stickyStyle": {
   "font-size": "9pt",
   "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
},
"stickyStyles_defaultTag": "div"
font_defaultLabel

設定顯示在工具列中的預設標籤,以供字型樣式使用。 預設值為 Segoe UI。 預設標籤只有視覺效果且無法運作,而且 stickyStyle 設定會套用功能字型和大小。

"font_defaultLabel": "Segoe UI"

fontSize_defaultLabel

設定顯示在工具列中的預設標籤,以供字型大小使用。 預設值為 9。 預設標籤只有視覺效果且無法運作,而且 stickyStyle 設定會套用功能字型和大小。

"fontSize_defaultLabel": "9"

toolbarLocation

要呈現工具列的使用者介面位置。 支援的值為 topbottom。 預設為底部。

"toolbarLocation": "bottom"

工具列

將要載入的工具列按鈕清單。

"toolbar": [
  [ "CopyFormatting" ],
  [ "Font" ],
  [ "FontSize" ],
  [ "Bold" ],
  [ "Italic" ],
  [ "Underline" ],
  [ "BGColor" ],
  [ "TextColor" ],
  [ "BulletedList" ],
  [ "NumberedList" ],
  [ "Outdent" ],
  [ "Indent" ],
  [ "Blockquote" ],
  [ "JustifyLeft" ],
  [ "JustifyCenter" ],
  [ "JustifyRight" ],
  [ "Link" ],
  [ "Unlink" ],
  [ "Subscript" ],
  [ "Superscript" ],
  [ "Strike" ],
  [ "Image" ],
  [ "BidiLtr" ],
  [ "BidiRtl" ],
  [ "Undo" ],
  [ "Redo" ],
  [ "RemoveFormat" ],
  [ "Table" ]
]
plugins

要在編輯器執行個體中使用的以逗號分隔的外掛程式清單。 載入的實際外掛程式可能仍然會受到其他兩個設定的影響:extraPluginsremovePlugins

更新此設定可能會從工具列移除外掛程式。 若將此屬性設定為空白字串,則會載入編輯器,而不會載入工具列。

如果您要將一個或多個外掛程式新增至工具列,建議您使用 extraPlugins。 如果您想要從預設清單移除一或多個,請使用 removePlugins

"plugins": [["button,toolbar,dialogui,dialog,autogrow,notification,clipboard,textmatch,fakeobjects,link,autolink,basicstyles,bidi,blockquote,panelbutton,panel,floatpanel,colorbutton,colordialog,listblock,richcombo,menu,contextmenu,copyformatting,enterkey,entities,popup,find,floatingspace,font,format,htmlwriter,horizontalrule,indent,indentblock,indentlist,justify,lineutils,openlink,list,liststyle,maximize,undo,menubutton,notificationaggregator,xml,ajax,pastetools,pastefromword,pastetext,preview,table,quicktable,removeformat,resize,selectall,showborders,sourcearea,specialchar,stylescombo,tab,tabletools,tableresize,tableselection,widgetselection,widget,wysiwygarea,textwatcher"]]

extraPlugins

要載入其他外掛程式的清單 (以逗號分隔)。 此設定可輕鬆新增外掛程式而不需觸及外掛程式設定。

其他外掛程式必須有許多外掛程式才能運作。 例如,連結外掛程式必須有對話方塊外掛程式。 RTF 文字編輯器會自動新增這些屬性,而您不能透過更新此屬性來覆寫它們。 此設定將直接附加至先前清單中的新外掛程式。

如果您想要移除任何預設,建議您使用 removePlugins 屬性。

"extraPlugins": "accessibilityhelp,autogrow,autolink,basicstyles,bidi,blockquote,button,collapser,colorbutton,colordialog,confighelper,contextmenu,copyformatting,dialog,editorplaceholder,filebrowser,filetools,find,floatpanel,font,iframerestrictor,indentblock,justify,notification,panel,panelbutton,pastefromword,quicktable,selectall,stickystyles,superimage,tableresize,tableselection,tabletools,uploadfile,uploadimage,uploadwidget"

removePlugins

不應載入的外掛程式清單。 這項設定可避免載入已在 plugins/extraPlugins 設定中定義的外掛程式,而不需觸及這些外掛程式。

"removePlugins": "a11yhelp,codemirror,magicline,scayt,showborders"

superimageImageMaxSize

使用 superimage 外掛程式時,內嵌影像允許的最大大小 (以 MB 為單位)。 預設值為 5。

"superimageImageMaxSize": 5

disallowedContent

可讓您禁止不想要包含在內容中的元素。 您可以禁止整個元素或屬性、類別及樣式。 如需 CKEditor "disallowedContent" 設定的詳細資訊,請參閱禁止內容規則

"disallowedContent": "form[action]; *[formaction]; script; *[on*]"

linkTargets

允許您設定使用者建立連結時可使用的連結目標選項。

連結目標 - ```notSet```:錨點標籤中沒有為文件設定目標 - ```frame```:會在指定的框架中打開文件 - ```popupWindow```:在快顯視窗中打開文件 - ```_blank```:在新窗口或索引標籤中打開文件 - ```_top```:在完整視窗本文中打開文件 - ```_self```:在已啟動連結的相同視窗或索引標籤中打開文件 - ```_parent```:會在上層框架中打開文件



範例:

"linkTargets": ["notSet", "_blank"]

個別組態設定

您可以設定其他會影響編輯器運作方式的組態設定。

屬性 描述 預設值
attachmentEntity

透過設定此屬性並指定不同的資料表,您就可以避免使用檔案的預設資料表,以便可以在需要時執行更安全的安全性。

其他資訊:檔案資料行 (Microsoft Dataverse) - Power Apps

語法:

 "attachmentEntity": {
   "name": "<<name of the image table>>",
   "fileAttributeName": "<<attribute name of the blob reference>>"
}

範例:

"attachmentEntity": {
  "name": "msdyn_mystorageforcustomizedsecurity",
  "fileAttributeName": "msdyn_customfilestorage"
}

預設:

"attachmentEntity": {
  "name": "msdyn_richtextfiles",
  "fileAttributeName": "msdyn_fileblob"
}
disableContentSanitization 根據預設,會停用內容清理以允許從外部來源成功複製和貼上 RTF 內容。 啟用後,內容清理將移除某些自訂屬性或標籤。 此設定僅套用至編輯模式。 將一律清理唯讀或停用狀態呈現。

"disableContentSanitization": true

disableDefaultImageProcessing

根據預設,會使用用戶端 API 上傳影像。 只要將影像新增至編輯器,就會將它上載至平台。 若要處理影像,請將此屬性設為 True。

"disableDefaultImageProcessing": false

disableImages

將此屬性設定為 true 將停用影像。 此屬性的優先順序最高。 這表示當此屬性設為 true 時,不論 imageEntity 屬性值如何,都會停用影像。 依預設會啟用影像。

"disableImages": false

externalPlugins

透過使用此屬性,您可以撰寫自己的外掛程式,並將它們用在 rich text editor 控制項中。

無預設值,因為您可以新增非原始提供的其他外掛程式來擴充您的功能。 路徑值可以是絕對或相對 URL。

範例:

"externalPlugins": [
    {
      "name": "<<Plugin Name>>",
      "path": "<<Plugin’s folder path>>”
    }
  ]

範例:

"externalPlugins": [
  {
    "name": "EmbedMedia",
    "path": "/WebResources/msdyncrm_/myplugins/embedmedia/"
  }
]
imageEntity

透過設定此屬性並指定不同的資料表,您就可以避免使用影像的預設資料表,以便可以在需要時執行更安全的安全性。

其他資訊:影像資料行 (Microsoft Dataverse) - Power Apps

語法:

 "imageEntity": {
   "imageEntityName": "<<name of the image table>>",
   "imageFileAttributeName": "<<attribute name of the blob reference>>"
}

範例:

"imageEntity": {
  "imageEntityName": "msdyn_mystorageforcustomizedsecurity",
  "imageFileAttributeName": "msdyn_customimagestorage"
}

預設:

"imageEntity": {
  "imageEntityName": "msdyn_richtextfiles",
  "imageFileAttributeName": "msdyn_imageblob"
}
readOnlySettings

透過設定此屬性,當以唯讀或停用狀態查看時,您可以設定資料行的其他行為。

範例:

"readOnlySettings": {
  "height:": 500,
  "showFullScreenExpander": true
}

預設:

"readOnlySettings": {
}
readOnlySettings

透過設定此屬性,您可以允許顯示更多的內容。

範例:

 "sanitizerAllowlist": {
   "attributes": ["data-id-wrapper"],
   "cssProperties": ["filter","list-style-type"],
   "domains": ["([a-z0-9]+[.])*.youtube.com","www.randomsite.com"],
   "protocols": ["file","ftp"],
   "tags": ["input"]
}

預設:

"sanitizerAllowlist": {
  "attributes": [],
  "cssProperties": [],
  "domains": [],
  "protocols": [],
  "tags": []
}
showAsTabControl

透過設定此屬性,您可以在編輯器視窗上方顯示更多命令。

必須設為 True,才能啟用下列屬性:

  • showFullScreenExpander
  • showHtml
  • showPreview
  • showPreviewHeaderWarning

"showAsTabControl": false

showFullScreenExpander

此屬性會新增 [全螢幕展開/摺疊] 功能,讓您以全螢幕模式展開和使用編輯器。

這需要將 showAsTabControl 設為 True。

"showFullScreenExpander": false

showHtml

此屬性會新增選項,以直接顯示和編輯 html 內容。

這需要將 showAsTabControl 設為 True。

"showHtml": false

showPreview

此屬性會新增選項,預覽以 html 呈現的編輯器內容。 透過預覽,您可以查看在編輯器外共用和呈現 HTML 內容時,其內容的顯示方式。

這需要將 showAsTabControl 設為 True。

"showPreview": false

showPreviewHeaderWarning

此屬性可讓您顯示/隱藏預覽內容時顯示的警告訊息。

這需要將 showAsTabControl 和 showPreview 設為 True。

"showPreviewHeaderWarning": false

常用的 RTF 編輯器設定

以下是 RTF 編輯器設定的常用設定。 這些範例設定可用於啟用特定類型的 RTF 體驗。 針對每個範例,您可以建立 JSON Web 資源,或修改預設的 Web 資源設定。 其他資訊:為 rich text editor 控制項建立和使用進階設定,並使用預設 Web 資源進行組織範圍的變更。

將預設字型設定為 Calibri,字體大小為 11pt

設定預設字型和大小以符合 Microsoft Windows 預設值。 此範例說明在體驗中執行此變更所使用的設定。

請在您的設定檔中設定這些 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "font_defaultLabel": "Calibri"
   
   "fontSize_defaultLabel": "11"
   
   "stickyStyle": {
     "font-size": "11pt",
     "font-family": "Calibri/Calibri, Helvetica, sans-serif;"
   }

進行換行 (Enter 鍵) 會建立 <br> 而不是 <p>

Enter 鍵的預設行為會建立具有 <p> HTML 標籤段落區塊 (也用於解釋貼上的內容)。 段落區塊在 HTML 中用於分組資訊。 在某些案例中,當從 Microsoft Word 或其他內容編輯器建立新資訊的或貼上資訊時,由於每個瀏覽器對段落區塊標記 (<p>) 格式的解釋略有不同,您可能會想要使用 <br> HTML 標籤而不是段落區塊。 在某些情況下,<br> HTML 標籤的垂直間距在各種瀏覽器和體驗中可能會更加一致。 以下範例說明如何從 <p> 變更為 <br>。

請在您的設定檔中設定此 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "enterMode": 2

所有貼上或建立的內容都符合 HTML 5

rich text editor 控制項最適合 HTML 5 內容,雖然 HTML 4 標籤和格式設定也可以順利使用。 在某些情況下,混合使用 HTML 4 和 HTML 5 標籤會在選取和設定字型和大小時造成可用性問題。 使用 "allowedContent" 可以確保所有的內容都是 HTML 5。 以下範例允許所有支援的 HTML 5 標籤。 任何不符合規範的標籤都會轉換成它們的 HTML 5 等效項。

請在您的設定檔中設定此 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "allowedContent": "a(*)[*]{*};abbr(*)[*]{*};address(*)[*]{*};area(*)[*]{*};article(*)[*]{*};aside(*)[*]{*};audio(*)[*]{*};b(*)[*]{*};base(*)[*]{*};bdi(*)[*]{*};bdo(*)[*]{*};blockquote(*)[*]{*};body(*)[*]{*};br(*)[*]{*};button(*)[*]{*};canvas(*)[*]{*};caption(*)[*]{*};cite(*)[*]{*};code(*)[*]{*};col(*)[*]{*};colgroup(*)[*]{*};data(*)[*]{*};datalist(*)[*]{*};dd(*)[*]{*};del(*)[*]{*};details(*)[*]{*};dfn(*)[*]{*};dialog(*)[*]{*};div(*)[*]{*};dl(*)[*]{*};dt(*)[*]{*};em(*)[*]{*};embed(*)[*]{*};fieldset(*)[*]{*};figcaption(*)[*]{*};figure(*)[*]{*};footer(*)[*]{*};form(*)[*]{*};h1(*)[*]{*};h2(*)[*]{*};h3(*)[*]{*};h4(*)[*]{*};h5(*)[*]{*};h6(*)[*]{*};head(*)[*]{*};header(*)[*]{*};hr(*)[*]{*};html(*)[*]{*};i(*)[*]{*};iframe(*)[*]{*};img(*)[*]{*};input(*)[*]{*};ins(*)[*]{*};kbd(*)[*]{*};label(*)[*]{*};legend(*)[*]{*};li(*)[*]{*};link(*)[*]{*};main(*)[*]{*};map(*)[*]{*};mark(*)[*]{*};meta(*)[*]{*};meter(*)[*]{*};nav(*)[*]{*};noscript(*)[*]{*};object(*)[*]{*};ol(*)[*]{*};optgroup(*)[*]{*};option(*)[*]{*};output(*)[*]{*};p(*)[*]{*};param(*)[*]{*};picture(*)[*]{*};pre(*)[*]{*};progress(*)[*]{*};q(*)[*]{*};rp(*)[*]{*};rt(*)[*]{*};ruby(*)[*]{*};s(*)[*]{*};samp(*)[*]{*};section(*)[*]{*};select(*)[*]{*};small(*)[*]{*};source(*)[*]{*};span(*)[*]{*};strong(*)[*]{*};style(*)[*]{*};sub(*)[*]{*};summary(*)[*]{*};sup(*)[*]{*};svg(*)[*]{*};table(*)[*]{*};tbody(*)[*]{*};td(*)[*]{*};template(*)[*]{*};textarea(*)[*]{*};tfoot(*)[*]{*};th(*)[*]{*};thead(*)[*]{*};time(*)[*]{*};title(*)[*]{*};tr(*)[*]{*};track(*)[*]{*};u(*)[*]{*};ul(*)[*]{*};var(*)[*]{*};video(*)[*]{*};wbr(*)[*]{*};"

更多 RTF 編輯器設定範例

新增全螢幕展開器

請在您的設定檔中設定這些 Individual configuration settings 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:個別組態設定)


 "showAsTabControl": true
 
 "showFullScreenExpander": true
 

Screen Expander 控制項。

新增 HTML 來源檢視索引標籤

請在您的設定檔中設定這些 Individual configuration settings 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:個別組態設定)


 "showAsTabControl": true
 
 "showHtml": true

HTML 索引標籤控制項。

新增具有字型大小、粗體、斜體、底線和醒目提示的簡易工具列

請在您的設定檔中設定此 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "toolbar": [ { "items": [ "FontSize", "Bold", "Italic", "Underline", "BGColor" ] } ]

簡易編輯器的控制項。

移除工具列以製作 RTF 文字表面

請在您的設定檔中設定此 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "toolbar": []

無工具列。

新增字型清單,並將 Brush Script MT 設為預設字型,預設大小為 20 像素

請在您的設定檔中設定這些 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "font_names": "Brush Script MT/'Brush Script MT', cursive;Calibri/Calibri, Helvetica, sans-serif;Calibri Light/'Calibri Light', 'Helvetica Light', sans-serif;"
   
   "font_defaultLabel": "Brush Script MT"
   
   "fontSize_sizes": "8/8px;12/12px;20/20px;32/32px"
   
   "fontSize_defaultLabel": "20"
   
   "stickyStyle": {
     "font-size": "20px",
     "font-family": "'Brush Script MT', cursive"
   }

設定新的預設字型。

將工具列置於 RTF 文字編輯器的頂端

請在您的設定檔中設定此 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "toolbarLocation": "top"

工具列已置於 RTF 文字編輯器的頂端。

以 30 像素的高度啟動編輯器,然後進行自動成長以符合內容大小

請在您的設定檔中設定這些 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "autoGrow_onStartup": false
   
   "autoGrow_maxHeight": 0
   
   "autoGrow_minHeight": 30
   
   "height": 30

輸入 RTF 文字區域將使其增加以符合內容。

將編輯器的高度固定為 500 像素

請在您的設定檔中設定這些 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "removePlugins": [ "autogrow" ]
   
   "height": 500

在固定的高度下,編輯器將保持在相同的高度。新增足夠的內容後,將出現捲軸。

建立純文字介面,移除除 "br" 標籤以外的所有 html 標籤

請在您的設定檔中設定這些 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "enterMode": 2
   
   "shiftEnterMode": 2
   
   "allowedContent": "*"
   
   "disallowedContent": "*"
   
   "forcePasteAsPlainText": true
   
   "toolbar": []
   
   "removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools"

請在您的設定檔中設定此 Individual configuration settings 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:個別組態設定)


 "disableImages": true

建立純文字介面可讓寬帶成為 html。

移除內容功能表,如此按一下右鍵就可以使用預設瀏覽器的拼字檢查

啟用此功能時,會移除在內容中按滑鼠右鍵進行編輯的功能。

請在您的設定檔中設定此 defaultSupportedProps 屬性。 每個值都必須後面跟著 , (comma),除非它是最後一個值:(其他資訊:defaultSupportedProps)


   "removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools"

移除內容功能表,如此按一下右鍵就可以使用預設瀏覽器拼字檢查。

使用預設 Web 資源來進行全組織變更

預設 RTE Web 資源適用於顯示名稱 RTEGlobalConfiguration.json。 此設定適用於 RTE 控制項的所有執行個體,並可用於進行全組織變更。 這包括在時間表 RTF 文字附註中使用的 RTE、知識管理和設定為使用 RTE 控制項的單一和多行欄位。

{
    "defaultSupportedProps": {
        "allowedIframeDomains": [],
        "autoGrow_onStartup": true,
        "basicEntities": true,
        "browserContextMenuOnCtrl": true,
        "copyFormatting_allowRules": true,
        "customConfig": "",
        "dialog_backgroundCoverColor": "black",
        "disableNativeSpellChecker": false,
        "enterMode": 3,
        "extraPlugins": "accessibilityhelp,autogrow,autolink,basicstyles,bidi,blockquote,button,collapser,colorbutton,colordialog,confighelper,contextmenu,copyformatting,dialog,editorplaceholder,filetools,find,floatpanel,font,iframerestrictor,indentblock,justify,panel,panelbutton,pastefromword,quicktable,selectall,stickystyles,superimage,tableresize,tableselection,tabletools",
        "fillEmptyBlocks": true,
        "font_defaultLabel": "Segoe UI",
        "font_names": "Angsana New/'Angsana New', 'Leelawadee UI', Sathu, serif;Arial/Arial, Helvetica, sans-serif;Arial Black/'Arial Black', Arial, sans-serif;Calibri Light/'Calibri Light', 'Helvetica Light', sans-serif;Calibri/Calibri, Helvetica, sans-serif;Cambria/Cambria, Georgia, serif;Candara/Candara, Optima, sans-serif;Century Gothic/'Century Gothic', sans-serif;Comic Sans MS/'Comic Sans MS';Consolas/Consolas, Courier, monospace;Constantia/Constantia, 'Hoefler Text', serif;Corbel/Corbel, Skia, sans-serif;Cordia New/'Cordia New', 'Leelawadee UI', Silom, sans-serif;Courier New/'Courier New';DaunPenh/DaunPenh, 'Leelawadee UI', 'Khmer MN', sans-serif;Franklin Gothic Book/'Franklin Gothic Book', 'Avenir Next Condensed', sans-serif;Franklin Gothic Demi/'Franklin Gothic Demi', 'Avenir Next Condensed Demi Bold', sans-serif;Franklin Gothic Medium/'Franklin Gothic Medium', 'Avenir Next Condensed Medium', sans-serif;Garamond/Garamond, Georgia, serif;Gautami/Gautami, 'Nirmala UI', 'Telugu MN', sans-serif;Georgia/Georgia, serif;Impact/Impact, Charcoal, sans-serif;Iskoola Pota/'Iskoola Pota', 'Nirmala UI', 'Sinhala MN', sans-serif;Kalinga/Kalinga, 'Nirmala UI', 'Oriya MN', sans-serif;Kartika/Kartika, 'Nirmala UI', 'Malayalam MN', sans-serif;Latha/Latha, 'Nirmala UI', 'Tamil MN', sans-serif;Leelawadee UI/'Leelawadee UI', Thonburi, sans-serif;Lucida Console/'Lucida Console', Monaco, monospace;Lucida Handwriting/'Lucida Handwriting', 'Apple Chancery', cursive;Lucida Sans Unicode/'Lucida Sans Unicode';Mangal/Mangal, 'Nirmala UI', 'Devanagari Sangam MN', sans-serif;Nirmala UI/'Nirmala UI', sans-serif;Nyala/Nyala, Kefa, sans-serif;Palatino Linotype/'Palatino Linotype', 'Book Antiqua', Palatino, serif;Raavi/Raavi, 'Nirmala UI', 'Gurmukhi MN', sans-serif;Segoe UI/'Segoe UI', 'Helvetica Neue', sans-serif;Shruti/Shruti, 'Nirmala UI', 'Gujarati Sangam MN', sans-serif;Sitka Heading/'Sitka Heading', Cochin, serif;Sitka Text/'Sitka Text', Cochin, serif;Sylfaen/Sylfaen, Mshtakan, Menlo, serif;TW Cen MT/'TW Cen MT', 'Century Gothic', sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/'Times New Roman', Times, serif;Times/Times, 'Times New Roman', serif;Trebuchet MS/'Trebuchet MS';Tunga/Tunga, 'Nirmala UI', 'Kannada MN', sans-serif;Verdana/Verdana, Geneva, sans-serif;Vrinda/Vrinda, 'Nirmala UI', 'Bangla MN', sans-serif;メイリオ/Meiryo, メイリオ, 'Hiragino Sans', sans-serif;仿宋/FangSong, 仿宋, STFangsong, serif;微軟正黑體/'Microsoft JhengHei', 微軟正黑體, 'Apple LiGothic', sans-serif;微软雅黑/'Microsoft YaHei', 微软雅黑, STHeiti, sans-serif;新宋体/NSimSun, 新宋体, SimSun, 宋体, SimSun-ExtB, 宋体-ExtB, STSong, serif;新細明體/PMingLiU, 新細明體, PMingLiU-ExtB, 新細明體-ExtB, 'Apple LiSung', serif;楷体/KaiTi, 楷体, STKaiti, serif;標楷體/DFKai-SB, 標楷體, BiauKai, serif;游ゴシック/'Yu Gothic', 游ゴシック, YuGothic, sans-serif;游明朝/'Yu Mincho', 游明朝, YuMincho, serif;隶书/SimLi, 隶书, 'Baoli SC', serif;黑体/SimHei, 黑体, STHeiti, sans-serif;굴림/Gulim, 굴림, 'Nanum Gothic', sans-serif;궁서/Gungsuh, 궁서, GungSeo, serif;돋움/Dotum, 돋움, AppleGothic, sans-serif;맑은 고딕/'Malgun Gothic', '맑은 고딕', AppleGothic, sans-serif;바탕/Batang, 바탕, AppleMyungjo, serif;바탕체/BatangChe, 바탕체, AppleMyungjo, serif;MS Pゴシック/'MS PGothic', 'MS Pゴシック', 'MS Gothic', 'MS ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;MS P明朝/'MS PMincho', 'MS P明朝', 'MS Mincho', 'MS 明朝', 'Hiragino Mincho ProN', serif",
        "fontSize_defaultLabel": "9",
        "fontSize_sizes": "8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt;22/22pt;24/24pt;26/26pt;28/28pt;36/36pt;48/48pt;72/72pt;",
        "height": 185,
        "keystrokes": [],
        "linkDefaultProtocol": "https://",
        "listStylePosition": "inside",
        "pasteAzureBlobImageAsBase64": false,
        "qtCellBorderColor": "rgb(171, 171, 171)",
        "qtCellBorderStyle": "solid",
        "qtCellBorderWidth": "1px",
        "qtCellPadding": "1",
        "qtCellSpacing": "0",
        "qtCellWith": "120px",
        "pasteFilter": null,
        "qtColumns": 8,
        "qtRows": 6,
        "qtStyle": {
            "border-collapse": "collapse",
            "font-size": "9pt"
        },
        "removeDialogTabs": "flash:Upload;link:upload",
        "removePlugins": "a11yhelp,codemirror,magicline,scayt,showborders",
        "skin": "superowa",
        "stickyStyle": {
            "font-size": "9pt",
            "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
        },
        "stickyStyles_defaultTag": "div",
        "superimageImageMaxSize": 5,
        "toolbarcollapser_enableResizer": true,
        "toolbarLocation": "bottom",
        "uploadRecordId": []
    },
    "attachmentEntity": {
        "name": "msdyn_richtextfiles",
        "fileAttributeName": "msdyn_fileblob"
    },
    "disableContentSanitization": true,
    "disableDefaultImageProcessing": false,
    "disableImages": false,
    "imageEntity": {
        "imageEntityName": "msdyn_richtextfiles",
        "imageFileAttributeName": "msdyn_imageblob"
    },
    "readOnlySettings": {
    },
    "sanitizerAllowlist": {
        "attributes": [],
        "cssProperties": [],
        "domains": [],
        "protocols": [],
        "tags": []
    },
    "showAsTabControl": false,
    "showFullScreenExpander": false,
    "showHtml": false,
    "showPreview": false,
    "showPreviewHeaderWarning": false
}

尋找 RTF 文字編輯器設定的目前設定

  1. 在 Microsoft Edge 或 Google Chrome 網頁瀏覽器中,執行模型導向應用程式,並開啟包含 rich text editor 控制項的表單,例如客戶資料列。

  2. 在按一下 rich text editor 控制項區域時按住 Ctrl 鍵,然後選取 檢查

  3. 在 [檢查] 窗格中,選取 主控台 索引標籤,然後在命令列的下拉式清單方塊中選取上層 Main.aspx 頁面。

    選取 [主控台] 索引標籤,然後在命令列的下拉式清單方塊中選取上層 Main.aspx 頁面。

  4. 在檢查窗格的命令列上選取 清除主控台

    清除主控台命令。

  5. 在檢查窗格主控台中,輸入 CKEDITOR.config. 以顯示不同的設定。

    CK 編輯器設定清單。

  6. 選取設定 (例如 autoGrow_minHeight) 來顯示目前的設定。

使用 RTF 文字編輯器工具列

RTF 文字編輯器工具列提供功能,讓您在附註和電子郵件中使用 RTF 文字格式。

格式設定選項

下表描述可在 RTF 文字編輯器中使用之不同格式的功能和選項。

圖示 名稱 捷徑索引標籤 描述
複製格式。 複製格式 Ctrl+Shift+C、Ctrl+Shift+V 將特定區段的外觀套用至另一個區段。
字型。 字型 Ctrl+Shift+F 選取您所需的字型。 預設字型是 Segoe UI。

注意:選取任何格式化的內容時,該內容的字型名稱會顯示。 如果您的選取範圍包含多個字型,就會顯示選取範圍的最上方字型名稱。
字型大小。 字型大小 Ctrl+Shift+P 變更文字的大小。 預設大小為 12。

注意:選取任何格式化的內容時,該內容的字型大小會顯示。 如果您的選取範圍包含多個字型大小,就會顯示選取範圍的最上方字型名稱。
粗體。 粗體 Ctrl+B 將文字設為粗體。
斜體。 Italic Ctrl+I 將文字設為斜體。
底線。 底線 Ctrl+U 將文字加上底線。
文字反白色彩。 文字反白色彩 以鮮明色彩來亮顯文字,使文字突出。
字型色彩。 字型色彩 變更文字的色彩。
項目符號。 項目符號 建立項目符號清單。
編號。 編號 建立編號清單。
減少縮排。 減少縮排 移動段落使其更靠近邊界。
增加縮排。 增加縮排 移動段落使其離邊界更遠。
引用段落。 引用段落 在內容中套用區塊層級引文格式。
靠左對齊。 靠左對齊 Ctrl+L 將內容對齊左邊界。 (通常用於本文使其更容易閱讀)。
置中對齊。 置中對齊 Ctrl+E 使內容在頁面上居中。 (通常用於正式外觀)。
靠右對齊。 靠右對齊 Ctrl+R 將內容與右邊界對齊。 (通常用於正式外觀)。
連結 URL。 連結 在文件中建立連結,以便快速存取網頁和檔案。

貼上或鍵入的 URL 文字會轉換成連結。 例如,"http://myexample.com" 會變成 "http://myexample.com"。

連結 對話方塊中,選擇您要插入的連結類型。

連結資訊 索引標籤可讓您選擇連結類型,以及設定連結通訊協定和 URL。

目標 索引標籤僅適用於 URL 連結類型。 這會指定您選取連結後,該連結開啟所在的位置。
移除連結。 取消連結 刪除電子郵件或文件中的連結。

當您將游標放在連結上,工具列上的 取消連結 按鈕就會作用。 選取按鈕移除連結,讓它變成純文字。
上標。 上標 略高於文字行輸入小型字母。
下標。 下標 略低於文字行輸入小型字母。
刪除線。 刪除線 在文字上畫一條線,將其刪去。
插入影像。 插入影像 您可以直接在編輯器中複製和貼上映像,將它從您的桌面或本機資料夾中直接拖曳到編輯器中,或是鍵入 URL。 支援的格式如下:.PNG、.JPG.,或 .GIF。

若要在文章中插入影像內嵌:
1. 拖放影像,或直接在文章中將其複製並貼上。
2. 拖曳映像的任何角落以調整大小。

若要使用 URL 插入映像或瀏覽至本機映像:
1. 選擇 [插入影像]。
2. 請在 映像 屬性對話方塊中,從下列選項選擇:
  • 選取 瀏覽 以瀏覽至電腦上的影像。
  • 或者,指定影像的網址,並指定屬性以定義影像在電子郵件或文章中的顯示方式。

  • 附註:
    • 如果影像位於外部伺服器,請使用完整的絕對路徑。
    • 如果影像位於本機伺服器,您可以使用相對路徑。
    • 如果您想要將影像連結至目標,請新增影像的 URL。
    • 您也可以指定要讓目標頁面在新的視窗、最上方視窗、相同視窗還是在上層視窗中開啟。
從左至右。 從左至右 將段落、標題、表格或清單等內容的文字變更為從左至右。 通常用於雙向語言內容。 這是預設設定。
從右至左。 從右至左 將段落、標題、表格或清單等內容的文字變更為從右至左。 通常用於雙向語言內容。 預設設定是從左至右。
復原鍵入。 復原鍵入 復原您對內容所做的變更。
取消復原鍵入。 取消復原鍵入 重做您對內容所做的變更。
清除所有格式設定。 清除所有格式設定 從文字中選取範圍移除所有格式設定,僅保留未格式化的一般文字。
新增資料表。 新增表格 將表格新增至內容。

新增表格之後,您可以執行下列任一動作:

  • 按一下並拖曳滑鼠,將各欄調整到所需的寬度,以調整表格欄的大小。
  • 選取表格中的一個或多個儲存格,然後套用特定格式、新增連結至選取範圍,或是剪下、複製或貼上整個列或欄。
  • 以滑鼠右鍵按一下以存取屬性。 這支援一些功能,例如儲存格類型、寬度和高度、文字換行、對齊方式、橫向和縱向合併和分割儲存格、插入或刪除列和欄、列和欄範圍,以及儲存格和框線色彩。
協助工具說明 Alt + 0 說明使用 RTF 編輯器控制項時可用的協助工具捷徑清單。
展開工具列。 展開工具列 在工具列摺疊且未顯示所有選項時顯示。 選取以展開工具列,並讓所有選項都可見。

提示

您可以透過選擇 Ctrl + 按滑鼠右鍵,以存取瀏覽器的內容功能表。 如果您需要使用瀏覽器內建的拼字檢查工具,這會很有幫助。 不然,您可以按滑鼠右鍵,為您使用的任何元素提供內容格式設定。

此外,您的瀏覽器內建拼字檢查程式的另一種方式是 Microsoft 編輯器瀏覽器擴充功能。 Microsoft 編輯器可以與 rich text editor 控制項一起順利運作,啟用後可提供快速方便的內嵌語法與拼字檢查功能功能。

協助工具快速鍵

下表說明了使用 rich text editor 控制項時可用的協助工具捷徑清單。 您可以在撰寫內容時按 Alt+0,以存取此清單。

類型​ 快速鍵 描述
一般 Alt+F11 切換全螢幕檢視。
索引標籤導覽 Alt+Ctrl+0 移至編輯器工具列。
索引標籤導覽 Alt + 1 移至 RTF 編輯器。
索引標籤導覽 Alt + 2 移至 HTML 編輯器。
索引標籤導覽 Alt + 3 移至預覽檢視。
一般編輯器命令 Alt+F10 瀏覽至編輯器工具列。 使用 Tab 和 Shift+Tab 移至下一個和上一個工具列群組。使用向右鍵或向左鍵移至下一個和上一個工具列按鈕。 按空格鍵或 Enter 啟動工具列按鈕。
一般編輯器命令 Alt+- 展開/摺疊編輯器工具列。
一般編輯器命令 查看描述。 編輯器對話方塊:在對話方塊內部,按 Tab 瀏覽至下一個對話方塊元素、按 Shift+Tab 移至上一個對話方塊元素、按 Enter 提交對話方塊、按 ESC 取消對話方塊。 對話方塊有多個索引標籤時,可以使用 Alt+F10 或使用 Tab,依對話方塊 Tab 鍵順序巡遍索引標籤清單。 當焦點在索引標籤清單上,使用向左鍵和向左鍵分別移至下一個和上一個索引標籤。
一般編輯器命令 查看描述。 編輯器清單方塊:在清單方塊內部,使用 Tab 鍵或向下鍵移至下一個清單項目。 使用 Shift+Tab 或向上鍵移至上一個清單項目。 按 Enter 或空格鍵選取清單選項。 按 ESC 關閉清單方塊。
基本命令 Ctrl+Z 復原命令。
基本命令 Shift+Ctrl+Z 取消復原命令。
基本命令 Ctrl+B 粗體命令。
基本命令 Ctrl+I 斜體命令。
基本命令 Ctrl+U 底線命令。
基本命令 Alt + 0 協助工具說明。
基礎命令 Esc 取消作業。

離線體驗

使用基本設定離線工作時,可以使用 rich text editor 控制項。 以下是離線工作時支援的外掛程式和格式化選項的清單。 離線時,所有透過 Web 資源檔案新增的設定都無法使用。

外掛程式可離線使用

離線時,RTF 編輯器可以使用下列外掛程式。

ajax,autogrow,basicstyles,bidi,blockquote,button,confighelper,contextmenu,dialog,dialogui,editorplaceholder,enterkey,entities,fakeobjects,floatingspace,floatpanel,format,horizontalrule,htmlwriter,indent,indentblock,indentlist,justify,lineutils,list,listblock,maximize,menu,menubutton,notification,notificationaggregator,panel,panelbutton,popup,preview,removeformat,resize,richcombo,selectall,showborders,sourcearea,specialchar,stylescombo,tab,textmatch,textwatcher,toolbar,undo,widgetselection,wysiwygarea,xml

離線格式選項

下表描述離線時 RTF 文字編輯器中可用之不同格式的功能和選項。

圖示 名稱 捷徑索引標籤 描述
粗體。 粗體 Ctrl+B 將文字設為粗體。
斜體。 斜體 Ctrl+I 將文字設為斜體。
底線。 底線 Ctrl+U 將文字加上底線。
項目符號。 項目符號 建立項目符號清單。
編號。 編號 建立編號清單。
減少縮排。 減少縮排 移動段落使其更靠近邊界。
增加縮排。 增加縮排 移動段落使其離邊界更遠。
引用段落。 引用段落 在內容中套用區塊層級引文格式。
靠左對齊。 靠左對齊 Ctrl+L 將內容對齊左邊界。 (通常用於本文使其更容易閱讀)。
置中對齊。 置中對齊 Ctrl+E 使內容在頁面上居中。 (通常用於正式外觀)。
靠右對齊。 靠右對齊 Ctrl+R 將內容與右邊界對齊。 (通常用於正式外觀)。
刪除線。 刪除線 在文字上畫一條線,將其刪去。
從左至右。 從左至右 將段落、標題、表格或清單等內容的文字變更為從左至右。 通常用於雙向語言內容。 這是預設設定。
從右至左。 從右至左 將段落、標題、表格或清單等內容的文字變更為從右至左。 通常用於雙向語言內容。 預設設定是從左至右。
復原鍵入。 復原鍵入 復原您對內容所做的變更。
取消復原鍵入。 取消復原鍵入 重做您對內容所做的變更。
清除所有格式設定。 清除所有格式設定 從文字中選取範圍移除所有格式設定,僅保留未格式化的一般文字。

常見問題

問:為何輸入的字元顯示緩慢?

答: 如果內容較大可能會造成延遲。 其他詳細資訊:使用 RTF 文字編輯器的最佳做法。 拼字或文法檢查也會降低輸入速度。

已知問題

  • 為設定為使用 rich text editor 控制項的資料行顯示 HTML 標記,這些資料行顯示在元件中,而不是將格式設定為 RichText 的表單上的資料行。 例如,這會發生在檢視表、子格、分頁報表和入口網站中。

在子格中顯示資料行的 HTML 標籤。 若要解決此問題,請參閱 簡單設定,了解將 表單 選項設為 RTF 文字 所需的步驟。

另請參閱

使用 Power Apps 入口網站建立和編輯 Microsoft Dataverse 的資料行

備註

是否能請您告知您偏好的慣用文件語言? 請填寫問卷。 (請注意,本問卷為英文版)

完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。