Menambahkan kontrol editor teks kaya ke aplikasi yang diarahkan model

Kontrol editor teks kaya adalah editor berbasis HTML ringan yang dibangun di atas CKEditor yang populer. Ia memungkinkan Anda membuat, menempelkan, dan mengedit teks yang diformat di aplikasi yang diarahkan model Anda. Untuk memformat teks di editor, Anda dapat gunakan toolbar editor, menyisipkan tag HTML, atau menempelkan teks yang diformat dari aplikasi lain, seperti browser web atau Word.

Anda dapat menyesuaikan tampilan, fitur, dan perilaku editor.

Penyempurnaan editor teks modern

Editor teks modern dirancang untuk selaras dengan antarmuka aplikasi Microsoft yang akrab dan intuitif seperti Outlook, Word, dan OneNote. Pengalaman ini, diatur secara default, memperkenalkan desain modern, mode gelap, tema kontras tinggi, dan fitur Copilot baru untuk meningkatkan kemampuan pengeditan teks Anda.

Note

• Versi klasik dari editor teks kaya tidak digunakan lagi pada April 2025. Jika Anda mengalami masalah dengan peningkatan atau penggunaan editor teks kaya modern, hubungi Microsoft Dukungan Pelanggan.
• Jika Anda menyesuaikan versi editor teks kaya sebelumnya, Anda mungkin perlu membuat ulang kustomisasi Anda di editor teks kaya modern.

Menambahkan kontrol editor teks kaya ke kolom teks pada formulir

1. Masuk ke Power Apps.

2. Di panel navigasi kiri, pilih Solusi.

3. Buka solusi, lalu buka tabel dalam solusi.

4. Di area Pengalaman data, pilih Formulir, lalu buka formulir yang berisi kolom teks yang ingin Anda tambahkan editor teks kayanya.

5. Pada kanvas desainer formulir, pilih kolom teks yang ada. Atau, pilih Kolom tabel baru untuk membuat kolom teks baru, masukkan Nama tampilan, pilih Teks>Teks Kaya untuk jenis Data, lalu pilih Simpan.

   Note

   Jika Anda ingin menambahkan kontrol editor teks kaya ke kolom yang sudah ada, Anda harus terlebih dahulu mengubah jenis data kolom menjadi Teks (jika belum menjadi kolom teks) lalu pilih Format menggunakan opsi Teks kaya.

6. Pada panel properti kolom kanan, perluas bagian Komponen, pilih + Komponen, lalu pilih Kontrol Editor Teks Kaya.

7. Di panel Kontrol Tambahkan Editor Teks Kaya, pilih Web, Ponsel, dan Tablet untuk mengizinkan aplikasi yang berjalan di perangkat apa pun menggunakan editor.

   Jika Anda ingin menyesuaikan editor, masukkan URL file konfigurasinya, sumber daya web JavaScript yang berisi properti yang ingin Anda ubah, di kotak Nilai statis. Jika Anda membiarkan bidang ini kosong, editor menggunakan konfigurasi defaultnya.

8. Pilih Selesai. Kolom teks kaya ditambahkan ke formulir.

   

9. Pilih Simpan dan Terbitkan, untuk menerapkan perubahan Anda ke formulir.

Menambahkan kontrol editor teks kaya ke kolom teks

Anda juga dapat membuat kolom untuk tabel yang menggunakan kontrol editor teks kaya. Langkah-langkah berikut menunjukkan cara membuat kolom teks yang nantinya dapat Anda tambahkan ke formulir untuk aplikasi berbasis model.

1. Masuk ke Power Apps.

2. Di panel navigasi kiri, pilih Solusi.

3. Buka solusi dan tabel dalam solusi.

4. Di area Skema, pilih Kolom, lalu buka kolom teks.

   Jika tabel tidak berisi kolom teks, pilih Kolom baru dan masukkan nama untuk kolom.

5. Di panel kanan, pilih Format, lalu pilih Teks kaya.

6. Simpan kolom.

Sesuaikan kontrol editor teks kaya

Penyesuaian berikut tersedia dalam pengalaman editor teks kaya klasik.

Power Apps memungkinkan Anda mengubah properti kontrol editor teks kaya untuk menyesuaikan tampilan, fitur, dan perilakunya. Untuk menyesuaikan instans kontrol tertentu, tentukan properti dan nilainya dalam file konfigurasi berformat JSON individual. Untuk menyesuaikan konfigurasi global kontrol, ubah properti dalam file konfigurasi default.

Tingkat penyesuaian

Anda dapat menerapkan hingga tiga tingkat, atau lapisan, konfigurasi untuk mengonfigurasi editor teks kaya fitur.

1. Pada tingkat yang paling mendasar, setiap instans kontrol mengambil konfigurasinya dari file RTEGlobalConfiguration_Readonly.json. File ini hanya baca, jadi Anda tidak dapat mengubah properti ini secara langsung.

   Note

   RTEGlobalConfiguration.json tidak berlaku untuk email, artikel pengetahuan, templat email, dan tanda tangan.

2. Pada tingkat berikutnya, setiap instans kontrol mengambil konfigurasinya dari properti dalam file RTEGlobalConfiguration.json, jika ada. Konfigurasi ini dilapisi di atas yang sebelumnya, sehingga properti dalam file ini menggantikan properti bernama yang sama dalam file hanya-baca.

3. Akhirnya, pada tingkat tertinggi, instans kontrol tertentu mengambil konfigurasinya dari file konfigurasi tertentu, jika ada. Konfigurasi ini dilapisi di atas yang sebelumnya, sehingga properti dalam file ini menggantikan properti bernama yang sama dalam dua file level lebih rendah.

Sistem tidak mengganti semua properti dengan yang ada dalam konfigurasi tingkat yang lebih tinggi. Properti extraPlugins digabungkan untuk memungkinkan penggunaan berbagai plug-in eksternal dan siap pakai dalam konfigurasi default. Operasi penggabungan ini memungkinkan Anda mengaktifkan dan menonaktifkan plug-in sesuai kebutuhan dalam file konfigurasi untuk instans kontrol tertentu.

Menyesuaikan instans tertentu dari editor teks kaya

1. Di Visual Studio Code atau editor teks lainnya, buat file dan beri nama yang bermakna.

   File RTEGlobalConfiguration.json berisi konfigurasi default editor teks kaya, atau global. Jika Anda menyesuaikan kontrol dalam, katakanlah, formulir kontak, Anda dapat menamai file seperti RTEContactFormConfiguration.json.

2. Salin dan tempel cuplikan kode berikut ke dalam file:

{
"defaultSupportedProps": {
  "propertyName": "value",
  "propertyName": "value",
  "propertyName": "value"
},
"propertyName": "value",
"propertyName": "value",
}

Pasangan propertyName:value terakhir tidak diakhiri dengan koma.

3. Ganti propertyName dan nilai dengan properti kontrol editor teks kaya yang ingin Anda ubah. Nilai string harus diapit dalam tanda kutip.

   Kami menyediakan beberapa contoh konfigurasi untuk Anda, tetapi Anda dapat menentukan konfigurasi lain yang sesuai dengan kebutuhan Anda.

4. Di Power Apps, buat JavaScript (JS) jenis sumber daya web menggunakan file JSON yang Anda buat di langkah 1.

5. Tambahkan kontrol editor teks kaya ke kolom teks pada formulir, dan di panel Kontrol Tambahkan Editor Teks Kaya>Nilai statis, masukkan URL relatif sumber daya web JavaScript.

   Meskipun Anda dapat memasukkan URL absolut sumber daya web, sebaiknya masukkan URL relatif. Dengan begitu, sumber daya web masih berfungsi jika Anda mengimpornya sebagai solusi ke lingkungan yang berbeda, asalkan jalur relatifnya sama.

   Misalnya, jika URL sumber daya web adalah https://yourorg.crm.dynamics.com/WebResources/rtecontactform, URL relatifnya adalah /WebResources/rtecontactform.

6. Pilih Selesai.

7. Pilih Simpan dan Terbitkan, untuk menerapkan perubahan Anda ke formulir.

Sesuaikan editor teks kaya secara global

File konfigurasi global RTEGlobalConfiguration.json yang dapat diedit adalah tingkat penyesuaian tingkat kedua yang dapat Anda terapkan. Secara default, file kosong. Itu berarti bahwa semua instans editor teks kaya menggunakan properti dalam file RTEGlobalConfiguration_Readonly.json baca-saja, kecuali Anda membuat file konfigurasi untuk instans kontrol tertentu.

Jika kebutuhan bisnis Anda mengharuskan Anda menyesuaikan kontrol di mana saja, tentukan nilai yang Anda butuhkan dalam file RTEGlobalConfiguration.json. Gunakan file baca-saja sebagai contoh untuk memastikan bahwa Anda memasukkan pasangan properti-nilai dalam format yang benar.

Menggunakan Copilot untuk menyempurnakan teks di editor

Copilot menggunakan algoritma pemrosesan bahasa alami untuk membantu meningkatkan konten tertulis. Anda dapat tambahkan Copilot ke editor teks kaya lalu mendapatkan saran untuk meningkatkan tata bahasa, kejelasan, atau kualitas teks Anda secara keseluruhan. Pelajari cara menggunakan Copilot di editor teks kaya.

Properti Editor teks kaya

File JSON yang menentukan "tampilan dan nuansa" instans editor teks kaya berisi dua set properti:

• Bagian defaultSupportedProps ini berisi properti plug-in yang menentukan apa yang dapat dilakukan kontrol. Anda tidak terbatas pada properti CKEditor dan plugin-nya. Anda juga dapat mengatur nilai untuk properti plug-in yang Anda tambahkan atau buat.
• Bagian properti individual berisi properti yang menentukan seperti apa tampilan kontrol.

Contoh file konfigurasi

Kode berikut adalah contoh file JSON yang berisi properti defaultSupportedProps dan properti konfigurasi individual. Jika properti memiliki nilai default, nilai default akan ditampilkan. Jika properti tidak memiliki nilai default, nilai sampel ditampilkan untuk mengilustrasikan sintaks. Properti dijelaskan dalam dua tabel berikut.

{
    "defaultSupportedProps": {
        "height": 185,
        "stickyStyle": {
            "font-size": "12pt",
            "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
        },
        "enterMode": 1,
        "stickyStyles_defaultTag": "div",
        "font_defaultLabel": "Segoe UI",
        "fontSize_defaultLabel":"12",
        "toolbarLocation": "top",
        "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" ]
        ],
        "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",
        "toolbarcollapser_enableResizer": false,
        "placeholder":"",
        "linkTargets": ["notSet", "_blank"],
        "stylesSet": "default",
        "fontSize_sizes": "8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px",
        "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 PGothic', 'ＭＳ Ｐゴシック', 'MS Gothic','ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;ＭＳ Ｐ明朝/'MS PMincho', 'ＭＳ Ｐ明朝', 'MS Mincho', 'ＭＳ 明朝', 'Hiragino Mincho ProN', serif",
        "copyFormatting_allowRules": "b s u i em strong span p div td th ol ul li(*)[*]{*}"
    },
    "readOnlySettings": {
    "height": 500,
    "showFullScreenExpander": true
    },
    "sanitizerAllowlist": {
    "attributes": [],
    "cssProperties": [],
    "domains": [],
    "protocols": [],
    "tags": []
    },
    "disableContentSanitization": true,
    "disableOnLoadEditModeSanitization": true,
    "disableDefaultImageProcessing": true,
    "showFullScreenExpander": false,
    "showAsTabControl": false,
    "showHtml": false
}

defaultSupportedProps

Tabel berikut menjelaskan properti yang paling umum digunakan, tetapi Anda dapat mengonfigurasi semua properti yang didukung CKEditor. Kontrol editor teks kaya menggunakan CKEditor 4.

Property	Description	Nilai standar
height	Mengatur tinggi awal area konten, dalam piksel.	"185"
stickyStyle	Mengatur font dan ukuran editor.	Lihat defaultSupportedProps
stickyStyles_defaultTag	Membuat pembungkus di sekitar teks di area konten editor. Awalnya diatur ke "div", tetapi Anda dapat mengubahnya menjadi "p" atau tag alternatif apa pun.	"div"
font_defaultLabel	Mengatur label font yang ditampilkan di toolbar. Label hanya untuk penampilan dan tidak berfungsi. Properti stickyStyle menentukan font dan ukuran editor.	"Segoe UI"
fontSize_defaultLabel	Mengatur label ukuran font yang ditampilkan di toolbar. Label hanya untuk penampilan dan tidak berfungsi. Properti stickyStyle menentukan font dan ukuran editor.	"9"
toolbarLocation	Mengatur lokasi bilah alat di area konten editor. Nilai yang didukung adalah "atas" dan "bawah."	"bawah"
bar alat	Mencantumkan tombol bilah alat untuk ditampilkan.	Lihat defaultSupportedProps
plugin	Mencantumkan plug-in prasetel yang dapat digunakan editor. Plug-in dalam daftar ini mungkin berbeda dari plug-in yang dimuat, jika extraPlugins dan removePlugins diberi nilai. Jika Anda mengatur properti ini ke string kosong, editor dimuat tanpa Toolbar.	Lihat defaultSupportedProps
extraPlugins	Menambahkan plug-in ke daftar plugins untuk memuat lebih banyak plug-in. Banyak plug-in memerlukan plug-in lain agar berfungsi. Editor Rich Text secara otomatis menambahkannya, dan Anda tidak dapat menggunakan properti ini untuk menimpanya. Gunakan removePlugins sebagai gantinya.	Lihat defaultSupportedProps
removePlugins	Mencantumkan plug-in yang tidak boleh dimuat. Gunakan untuk mengubah plug-in mana yang dimuat tanpa mengubah daftar plugins dan extraPlugins.	Lihat defaultSupportedProps
superimageImageMaxSize	Mengatur ukuran maksimum dalam megabita (MB) diizinkan untuk gambar yang disematkan saat menggunakan plugin superimage.	"5"
linkTarget	Memungkinkan Anda mengkonfigurasi pilihan target tautan yang tersedia untuk pengguna saat mereka membuat tautan: - "notSet": Tidak ada target yang ditetapkan - "frame": Buka dokumen dalam bingkai yang ditentukan - popupWindow": Membuka dokumen di jendela popup - "_blank": membuka dokumen di jendela atau tab baru - "_top": Membuka dokumen dalam badan penuh jendela - "_self": Buka dokumen di jendela atau tab yang sama tempat tautan diaktifkan - "_parent": Buka dokumen dalam bingkai induk	"notSet", "_blank"

Properti individu

Tabel berikut menjelaskan lebih banyak properti yang dapat Anda gunakan untuk menyesuaikan kontrol editor teks kaya.

Property	Description	Nilai standar
attachmentEntity	Untuk menerapkan keamanan lebih lanjut pada file yang diunggah dengan menggunakan tabel selain default, atur properti ini dan tentukan tabel yang berbeda. Sintaks:: "name": "tableName", "fileAttributeName": "attributeNameofBlobReference"	Lihat defaultSupportedProps
disableContentSanitization	Sanitasi konten menghapus beberapa atribut atau tag kustom dari konten teks kaya. Ini dinonaktifkan secara default, untuk memungkinkan menyalin dan merekatkan konten teks kaya dari sumber eksternal. Properti ini hanya berlaku untuk mode edit. Saat kontrol editor hanya baca atau dinonaktifkan, konten selalu dibersihkan.	true
disableDefaultImageProcessing	Secara default, gambar yang disisipkan di editor diunggah ke attachmentEntity yang ditentukan dalam konfigurasi. Pengguna eksternal mungkin tidak memiliki hak istimewa untuk melihat konten dalam tabel. Sebagai gantinya, atur properti ini ke true untuk menyimpan gambar sebagai string base64 langsung di kolom yang dikonfigurasi untuk menggunakan kontrol editor teks kaya.	false
disableImages	Menentukan apakah gambar dapat disisipkan di editor. Properti ini memiliki prioritas tertinggi. Ketika properti ini diatur ke true, gambar dinonaktifkan, terlepas dari nilai properti imageEntity.	false
imageEntity	Untuk menerapkan keamanan lebih lanjut pada gambar dengan menggunakan tabel selain default, atur properti ini dan tentukan tabel yang berbeda. Sintaks: "imageEntityName": "tableName", "imageFileAttributeName": "attributeNameofBlobReference"	Lihat defaultSupportedProps
readOnlySettings	Properti ini menentukan perilaku kolom saat dilihat dalam status baca-saja atau dinonaktifkan. Anda dapat menentukan properti yang didukung.	Tidak ada; lihat defaultSupportedProps untuk contoh
sanitizerAllowlist	Mencantumkan jenis konten lain yang dapat ditampilkan di editor.	Lihat defaultSupportedProps
showAsTabControl	Memungkinkan Anda menampilkan lebih banyak perintah di atas area konten. Harus diatur ke true untuk menggunakan properti berikut: showFullScreenExpander, showHtml, showPreview, showPreviewHeaderWarning	false
showFullScreenExpander	Menentukan apakah editor dapat digunakan dalam mode layar penuh. showAsTabControl harus diatur ke true.	false
showHtml	Memungkinkan pengguna untuk menampilkan dan mengedit konten HTML secara langsung. showAsTabControl harus diatur ke true.	false
showPreview	Memungkinkan pengguna untuk melihat pratinjau konten editor yang dirender sebagai HTML. showAsTabControl harus diatur ke true.	false
showPreviewHeaderWarning	Memungkinkan Anda menampilkan/menyembunyikan pesan peringatan yang ditampilkan saat mempratinjau konten. showAsTabControl dan showPreview harus diatur ke true.	false
allowSameOriginSandbox	Memungkinkan konten di editor diperlakukan sebagai dari asal yang sama dengan aplikasi rendering. Gunakan properti ini dengan hati-hati. Hanya gunakan konten eksternal tepercaya. Ketika properti ini diatur ke true, konten eksternal apa pun dapat memiliki akses ke sumber daya internal.	false

Contoh konfigurasi

Contoh konfigurasi berikut membuat penyesuaian khusus dari editor teks kaya dalam pengalaman klasik. Anda dapat menggunakannya apa adanya atau sebagai titik awal untuk menyesuaikan instans tertentu dari editor teks kaya atau secara global.

Atur font default ke Calibri 11 poin

Atur properti defaultSupportedProps ini di file konfigurasi. Setiap nilai kecuali yang terakhir harus diikuti dengan koma (,).

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

Membuat tombol Enter menyisipkan baris baru, bukan blok paragraf

Secara default, menekan tombol Enter membuat blok paragraf dengan tag HTML <p>. HTML menggunakan blok paragraf untuk mengelompokkan informasi, seperti paragraf dalam dokumen Word. Browser dapat memformat <p> tag sedikit berbeda, jadi untuk konsistensi visual, Anda mungkin ingin menggunakan <tag br\> pemisah baris atau tag baris baru sebagai gantinya.

Atur properti defaultSupportedProps ini di file konfigurasi. Ikuti nilai ini dengan koma (,) kecuali itu adalah properti terakhir dalam file.

"enterMode": 2,

Izinkan editor menggunakan layar penuh

Atur properti individual ini di file konfigurasi. Setiap nilai kecuali yang terakhir harus diikuti dengan koma (,).

"showFullScreenExpander": true,

Izinkan melihat dan mengedit konten HTML

Untuk memungkinkan pengguna melihat dan mengedit HTML konten mereka secara langsung, tampilkan tab HTML.

Atur properti individual ini di file konfigurasi. Setiap nilai kecuali yang terakhir harus diikuti dengan koma (,).

"showAsTabControl": true,
"showHtml": true,

Tampilkan toolbar yang disederhanakan atau hapus seluruhnya

Secara default, bilah alat editor berisi semua alat pemformatan yang tersedia. Untuk menyediakan toolbar yang disederhanakan, gunakan properti toolbar dan tentukan alat yang dapat digunakan pengguna untuk memformat konten mereka.

Atur properti defaultSupportedProps ini di file konfigurasi. Ikuti nilai ini dengan koma (,) kecuali itu adalah properti terakhir dalam file.

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

Untuk menghapus bilah alat sepenuhnya, atur nilai toolbar ke '[]' (dua tanda kurung siku).

Tambahkan daftar font baru dan atur Brush Script MT 20 poin sebagai font default

Atur properti defaultSupportedProps ini di file konfigurasi. Setiap nilai kecuali yang terakhir harus diikuti dengan koma (,).

"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/8pt;12/12pt;20/20pt;32/32pt"
"fontSize_defaultLabel": "20"
"stickyStyle": {
  "font-size": "20pt",
  "font-family": "'Brush Script MT', cursive"
},

Posisikan toolbar di bagian atas editor teks kaya

Atur properti defaultSupportedProps ini di file konfigurasi. Ikuti nilai ini dengan koma (,) kecuali itu adalah properti terakhir dalam file.

"toolbarLocation": "top",

Mulai editor dengan tinggi 30 piksel dan kembangkan agar sesuai dengan konten

Atur properti defaultSupportedProps ini di file konfigurasi. Setiap nilai kecuali yang terakhir harus diikuti dengan koma (,).

"autoGrow_onStartup": false,
"autoGrow_maxHeight": 8000,
"autoGrow_minHeight": 30,
"height": 30,

Perbaiki tinggi editor pada 500 piksel

Atur properti defaultSupportedProps ini di file konfigurasi. Setiap nilai, kecuali yang terakhir, harus diikuti oleh koma.

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

Membuat menu konteks (klik kanan) menggunakan menu konteks default browser

Untuk mengganti menu konteks kontrol editor dengan menu konteks default browser, hapus plug-in contextmenu.

Atur properti defaultSupportedProps ini di file konfigurasi. Ikuti nilai ini dengan koma (,) kecuali itu adalah properti terakhir dalam file.

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

Toolbar editor teks kaya

Tabel berikut menjelaskan alat pemformatan yang tersedia di editor teks kaya secara default.

Icon	Name	Tombol pintasan	Description
	Salin Pemformatan	Ctrl+Shift+C, Ctrl+Shift+V	Terapkan tampilan bagian tertentu ke bagian lain.
	Nama Font	Ctrl+Shift+F	Pilih font. Aplikasi mempertimbangkan font yang Anda pilih sebagai font default. Segoe UI adalah font default jika Anda tidak memilih apa pun. Saat Anda memilih konten yang diformat, nama font yang diterapkan padanya akan ditampilkan. Jika pilihan Anda berisi beberapa font, yang pertama diterapkan pada pilihan akan ditampilkan.
	Ukuran Huruf	Ctrl+Shift+P	Ubah ukuran teks Anda. Aplikasi mempertimbangkan ukuran font yang Anda pilih sebagai ukuran font default. 12 adalah ukuran default jika Anda tidak memilih apa pun. Saat Anda memilih konten yang diformat, ukuran font yang diterapkan padanya akan ditampilkan. Jika pilihan Anda berisi beberapa ukuran, yang pertama diterapkan pada pilihan akan ditampilkan.
	Bold	Ctrl+B	Buat teks tebal.
	Cetak miring	Ctrl+I	Miringkan teks Anda.
	Garisbawah	Ctrl+U	Menggarisbawahi teks Anda.
	Warna Latar Belakang		Buat teks Anda menonjol dengan menyorotnya dalam warna cerah.
	Warna Teks		Ubah warna teks Anda.
	Masukkan/Hapus Daftar Berbutir		Membuat daftar butir.
	Masukkan/Hapus Daftar Bernomor		Buat daftar bernomor.
	Kurangi Indentasi		Pindahkan paragraf lebih dekat ke margin.
	Tambah Indentasi		Pindahkan paragraf lebih jauh dari margin.
	Kutipan dengan Blok		Terapkan format kuotasi tingkat blok ke konten Anda.
	Rata Kiri	Ctrl+L	Sejajarkan konten Anda dengan margin kiri.
	Rata Tengah	Ctrl+E	Tengahkan konten di halaman.
	Rata Kanan	Ctrl+R	Sejajarkan konten Anda dengan margin kanan.
	Link		Buat tautan di dokumen Anda untuk akses cepat ke halaman web dan sumber daya cloud lainnya. Masukkan atau tempel teks jangkar di kotak Teks Tampilan, lalu masukkan atau tempel URL di kotak URL. Secara opsional, pilih Jenis Tautan dan protokol jika tautan tersebut ke sesuatu selain halaman web. Untuk menentukan tempat tautan jenis URL harus terbuka, pilih tab Target, lalu pilih Target. Teks URL yang ditempelkan atau diketik otomatis diubah menjadi tautan. Misalnya, http://myexample.com menjadi <a href="http://myexample.com">http://myexample.com</a>.
	Batalkan tautan		Hapus tautan dari jangkar dan buat teks biasa.
	Superscript		Ketik huruf kecil tepat di atas baris teks.
	Subskrip		Ketik huruf kecil tepat di bawah baris teks.
	Coretan		Silang teks dengan menggambar garis melewatinya.
	Gambar		Untuk menyisipkan gambar, tempelkan dari clipboard Anda ke area konten atau seret file gambar dari folder ke area konten. Tarik sudut gambar apa pun untuk mengubah ukurannya. Kontrol ini mendukung gambar .png, .jpg., dan .gif. Untuk memiliki kontrol lebih besar atas sumber, tampilan, dan perilaku gambar, pilih tombol Gambar. Telusuri file gambar di folder lokal atau masukkan URL-nya. Jika gambar disimpan di server eksternal, masukkan jalur absolut. Jika berada di server lokal, Anda dapat memasukkan jalur relatif. Atau, masukkan tinggi dan lebar tertentu untuk mengubah ukuran gambar, dan pilih perataan. Anda juga harus memasukkan teks alt untuk mendeskripsikan gambar bagi orang yang menggunakan pembaca layar. Jika gambar juga merupakan tautan ke halaman web atau sumber daya cloud lainnya, masukkan URL sumber daya di kotak URL Target dan, jika perlu, pilih Target tempat tautan harus dibuka.
	Arah teks dari kiri ke kanan		Ubah teks menjadi kiri ke kanan. Pengaturan ini adalah bawaan.
	Arah teks dari kanan ke kiri		Ubah teks menjadi kanan ke kiri untuk konten bahasa dua arah.
	Batalkan		Balikkan perubahan terakhir yang Anda buat pada konten.
	Mengulangi		Urungkan pembatalan terakhir Anda, atau terapkan kembali perubahan terakhir yang Anda buat pada konten.
	Hapus Format		Hapus semua pemformatan dari teks yang dipilih.
	Table		Sisipkan tabel dengan jumlah baris dan kolom yang Anda pilih. Untuk memiliki kontrol lebih besar atas ukuran dan tampilan tabel, pilih tombol Tabel>lainnya dan ubah propertinya. Anda juga dapat mengeklik kanan tabel untuk melihat dan mengubah propertinya. Untuk mengubah lebar kolom, seret batasnya. Anda dapat memilih satu atau beberapa sel, baris, atau kolom dan menerapkan pemformatan tertentu, menambahkan tautan ke teks yang dipilih, dan memotong, menyalin, dan menempelkan seluruh baris atau kolom.
	Pengaturan Personalisasi		Atur font dan ukuran font default Anda.
	Bantuan Aksesibilitas	Alt+0	Buka daftar pintasan keyboard yang dapat Anda gunakan di editor teks kaya.
	Perluas Toolbar		Ketika jendela terlalu sempit untuk menampilkan seluruh bilah alat, pilih untuk memperluas bilah alat ke baris kedua.

Tip

Untuk menggunakan pemeriksa ejaan bawaan browser Anda, tekan tombol Ctrl saat Anda mengklik kanan teks yang ingin Anda periksa. Jika tidak, menu klik kanan (konteks) menyediakan pemformatan kontekstual untuk elemen yang Anda pilih.
Alternatif untuk pemeriksa ejaan bawaan browser Anda adalah ekstensi browser Microsoft Editor. Microsoft Editor bekerja dengan mulus dengan kontrol editor teks kaya, dan saat diaktifkan, menyediakan kemampuan tata bahasa dan pemeriksaan ejaan sebaris yang cepat dan mudah.

Gunakan editor teks kaya offline

Kontrol editor teks kaya tersedia saat Anda bekerja offline, meskipun tanpa beberapa fitur dan fungsionalitas yang biasa Anda gunakan. Gambar yang Anda upload menggunakan konfigurasi default editor tidak tersedia saat Anda bekerja secara offline.

Plugin berikut tersedia untuk editor teks kaya saat offline:

• ajax, autogrow, basicstyles, bidi, blockquote, button, confighelper, contextmenu, dialog, dialogui, editorplaceholder, enterkey, entitas, fakeobjects, floatingspace, floatpanel, format, horizontalrule, htmlwriter, inden, indentblock, indentlist, membenarkan, lineutils, daftar, listblock, memaksimalkan, menu, menubutton, pemberitahuan, notificationaggregator, panel, panelbutton, popup, pratinjau, removeformat, mengubah ukuran, richcombo, selectall, showborders, sourcearea, specialchar, stylescombo, tab, textmatch, textwatcher, toolbar, undo, widgetselection, wysiwygarea, xml

Alat pemformatan berikut tersedia di editor teks kaya saat offline:

• Tebal, miring, menggarisbawahi, berpoin, dan bernomor, mengurangi dan menambah indentasi, kutip blok, rata kiri, rata tengah, rata kanan, dicoret, teks dua arah, membatalkan dan mengulangi, dan menghapus pemformatan

Praktik terbaik untuk menggunakan editor teks kaya

• Bidang teks kaya menyimpan tag HTML untuk pemformatan bersama dengan data yang dimasukkan pengguna. Saat Anda menetapkan ukuran maksimum kolom teks kaya, pastikan untuk mengizinkan tag HTML dan data pengguna.

• Untuk performa terbaik, pertahankan konten HTML Anda hingga 1 MB atau kurang. Pada ukuran yang lebih besar, Anda mungkin melihat waktu respons yang lebih lambat untuk memuat dan mengedit.

• Dalam konfigurasi default, gambar tidak memengaruhi performa secara negatif karena disimpan secara terpisah dari konten HTML. Namun, gambar disimpan sebagai konten base64 di kolom teks saat pengguna yang mengunggahnya tidak memiliki izin di tabel msdyn_richtextfiles. Konten Base64 berukuran besar, jadi Anda umumnya tidak perlu menyimpan gambar sebagai bagian dari konten bidang.

• Jika Anda memiliki administrator sistem atau peran keamanan pengguna dasar, fitur personalisasi pengguna berfungsi secara default. Jika Anda tidak memiliki peran ini, Anda harus memiliki hak istimewa untuk membuat, membaca, dan menulis di tabel msdyn_customcontrolextendedsettings agar plug-in personalisasi pengguna berfungsi.

• Dalam konfigurasi editor teks kaya default, jika Anda menyeret dan melepas file gambar ke editor teks kaya, file tersebut akan mengunggah gambar sebaris ke tabel msdyn_richtextfiles. Agar pengguna yang sesuai dapat melihat gambar sebaris, pastikan Anda menerapkan izin yang benar untuk msdyn_richtextfiles.

Keterbatasan editor teks kaya

Saat menggunakan editor teks kaya, pertimbangkan batasan yang tercantum di bagian ini. Untuk pertanyaan tentang ketersediaan fitur, hubungi Microsoft Dukungan Pelanggan.

Important

Editor teks kaya modern adalah pengalaman baru. Agar fungsionalitas berfungsi dengan benar, Anda harus menghapus versi klasik. Jika tidak, templat Anda mungkin tidak ditampilkan dengan benar.

Batasan editor teks kaya meliputi:

• Anda tidak dapat menggunakan konten editor teks kaya dari sumber eksternal apa pun seperti Microsoft Word, Excel, dan sebagainya.
• Editor teks kaya mendukung jenis file berikut untuk lampiran: .aac, .avi, .csv, .doc, .docx, .gif, .html, .jpeg, .mid, .midi, .mp3, .mp4, .mpeg, .msg, .pdf, .png, .ppt, .pptx, .svg, .txt, .vsd, .wav, .xls, .xlsm, dan .xlsx. Anda dapat mengonfigurasi ekstensi yang diizinkan untuk lingkungan Anda di pengaturan lanjutan Anda dengan membuka Administrasi>Umum>Atur ekstensi file yang diblokir untuk lampiran dan menghapus ekstensi yang ingin Anda izinkan.
• Editor teks kaya tidak mendukung plugin non-Microsoft.

Template email dan tanda tangan:

• Jika Anda mengalami masalah dengan cara template email dirender, sebaiknya buat ulang di editor modern.
• Struktur HTML berlapis—seperti elemen <div> atau <tabel> yang bersarang dalam—dapat menyebabkan masalah rendering di editor teks kaya. Sebaiknya Anda menyederhanakan struktur HTML dengan menghapus tag <div> atau <tabel> bersarang yang tidak perlu untuk memastikan rendering yang konsisten di seluruh klien.

Tag HTML

Tag HTML berikut tidak lagi didukung atau digantikan oleh alternatif modern di editor teks kaya.

Tag	Description	Alternatif editor teks berformat kompleks modern
<Singkatan>	Menentukan akronim	<abbr>
<Applet>	Menyematkan applet Java	<objek>
<basefont>	Mengatur ukuran dan warna huruf default	CSS
<besar>	Memperbesar teks	Ukuran font CSS
<Blink>	Membuat teks berkedip	Animasi CSS
<pusat>	Pusatkan konten	Perataan teks CSS
<Dir>	Daftar direktori	<Ul>
<Font>	Font gaya	CSS
<bingkai>	Menentukan bingkai	<Iframe>
<frameset>	Kerangka Grup	<Iframe>
<isindex>	Input baris tunggal	<format>
<Marquee>	Teks bergulir	Animasi CSS
<Menu>	Daftar menu	<ul>
<noframe>	Langkah alternatif tanpa dukungan bingkai	Tidak diperlukan
<Plaintext>	Menampilkan teks biasa	<pre>
<s>	Teks coretan	<del>, CSS
<serang>	Teks coretan	<del>, <s>
<Tt>	Teks teletipe	<kode>, CSS
<U>	Teks bergaris bawah	Dekorasi teks CSS
<Xmp>	Teks yang telah diformat sebelumnya	<Pre>

Atribut HTML

Atribut HTML berikut tidak lagi didukung atau digantikan oleh alternatif modern di editor teks kaya.

Karakteristik	Tag yang terpengaruh	Alternatif editor teks berformat kompleks modern
ratakan	Banyak	Perataan teks CSS, float
alink, vlink, tautan	<badan>	CSS :link, :visited
latar belakang	<isi>, <tabel>	Gambar latar belakang CSS
bgcolor	Banyak	Warna latar belakang CSS
batas	<img>, <tabel>
tinggi, lebar	<body>, <td>	CSS tinggi, lebar
hspace, vspace	<img>
bahasa	<Script>	type="text/JavaScript"
nowrap	<td>	CSS white-space: nowrap
tipe (pada <li>, <ul>)	Lists	Jenis gaya daftar CSS

Tanya jawab umum

Mengapa karakter yang diketik ditampilkan secara perlahan?

Jika Anda memiliki banyak konten di editor, waktu respons dapat meningkat. Untuk performa terbaik, pertahankan konten hingga 1 MB atau kurang. Pemeriksaan ejaan atau tata bahasa juga dapat memperlambat kinerja pengetikan.

Mengapa konten saya tidak dirender sampai editor disegarkan?

Perilaku ini terjadi ketika kode kustom menyuntikkan konten ke editor teks kaya tanpa memicu rendering ulang kontrol. Editor teks kaya tidak secara otomatis mendeteksi pembaruan eksternal kecuali diberi tahu secara eksplisit.

Untuk mengatasi masalah ini, Anda dapat melakukan salah satu tindakan berikut:

• Gunakan pemroses peristiwa (misalnya, formContext.data.entity.addOnSave) untuk memicu refresh setelah konten disuntikkan.

• Gunakan formContext.ui.refreshRibbon() atau API serupa untuk memaksa pembaruan.

Contoh:

window.top.addEventListener('rteEditorReady', (event) => {
    const { parentEntity } = event.detail;

    if (parentEntity?.typeName === 'email' &&
        parentEntity?.fieldName === 'description') {

        const descriptionAttr = Xrm.Page.getAttribute("description");
        if (descriptionAttr) {
            descriptionAttr.setValue(emailSignature);
        }
    }
}, { once: true });

Dalam contoh ini, pendengar acara secara otomatis dihapus setelah acara rteEditorReady dipicu. Pendekatan ini memastikan bahwa pendengar (listener) hanya dijalankan sekali, yang membantu mencegah kebocoran memori dan penggunaan sumber daya yang tidak perlu.

Mengapa saya tidak dapat mengunggah gambar? Mengapa pratinjau gambar gagal dimuat?

Jika nama file gambar, termasuk jalur, panjang, file mungkin gagal diunggah, atau pratinjau mungkin tidak ditampilkan. Coba persingkat nama file atau pindahkan ke lokasi dengan jalur yang lebih pendek, lalu unggah lagi.

Mengapa saya melihat HTML dalam teks saya?

Jika Anda menggunakan kontrol editor teks kaya dalam kolom yang tidak diformat untuk teks kaya, konten muncul di HTML yang mendasar alih-alih sebagai teks yang diformat.

Berapa batas ukuran konten HTML?

Untuk performa terbaik, pertahankan konten HTML Anda hingga 1 MB atau kurang. Pada ukuran yang lebih besar, Anda mungkin melihat waktu respons yang lebih lambat untuk memuat dan mengedit.

Untuk mengatasi masalah ini, pastikan format kolom diatur ke Teks kaya.

Saya melebihi batas karakter, tetapi jumlah karakternya lebih sedikit dari batas tersebut. Why?

Database menyimpan seluruh pemformatan HTML, bukan hanya karakter, yang memakan ruang ekstra.

Mengapa saya tidak melihat editor teks kaya modern?

Kontrol editor teks kaya modern adalah bagian dari tampilan baru untuk aplikasi yang diarahkan model dan tidak muncul kecuali setelan aplikasi diaktifkan. Tanpa pengaturan diaktifkan, Anda mungkin melihat versi editor yang lebih lama.

Informasi terkait

• Buat dan edit kolom untuk Microsoft Dataverse menggunakan portal Power Apps
• Gunakan Copilot di editor teks kaya untuk email