Поділитися через


Додавання елемента керування «Редактор форматованого тексту» до модельної програми

Елемент керування редактором форматованого тексту — це легкий редактор на основі HTML, побудований на популярному CKEditor. Він дає змогу створювати, вставляти та редагувати форматований текст у програмах, керованих моделлю. Для форматування тексту в редакторі можна використовувати панель інструментів редактора, вставляти теги HTML або вставляти форматований текст з інших програм, наприклад веб-браузера або Word.

Ви можете налаштувати зовнішній вигляд, функції та поведінку редактора. Сучасний текст елемента керування показано на наступному знімку екрана.

Знімок екрана типового текстового редактора за замовчуванням у програмі, керованій моделлю.

Наразі редактор форматованого тексту доступний у двох різних варіантах:

  • Сучасний текстовий редактор: новий інтерфейс, який можна ввімкнути
  • Класичний текстовий редактор: інтерфейс за замовчуванням

Удосконалення сучасного текстового редактора

Сучасний текстовий редактор розроблений таким чином, щоб узгоджуватися зі знайомими та інтуїтивно зрозумілими інтерфейсами програм Microsoft, таких як Outlook, Word та OneNote. Це оновлення представляє сучасний дизайн, темний режим, висококонтрастні теми та нову функцію другого пілота для покращення ваших можливостей редагування тексту.

Примітка

Деякі функції, доступні в класичному редакторі форматованого тексту, поки що недоступні в сучасному режимі. До таких функціональних можливостей належать:

  • Параметри конфігурації, як описано в цій статті для класичного інтерфейсу
  • Згадки

Увімкніть сучасний редактор форматованого тексту

Класичний редактор форматованого тексту ввімкнено за замовчуванням. Виконайте наведені нижче кроки, щоб перейти до сучасного редактора форматованого тексту.

  1. У Dynamics 365 клацніть правою кнопкою миші програму, для якої потрібно ввімкнути сучасний редактор форматованого тексту, і виберіть ВІДКРИТИ В КОНСТРУКТОРІ ПРОГРАМ. Power Apps відкриває конструктор програм.
  2. На панелі команд виберіть елемент Настройки. Відкриється сторінка налаштувань.
  3. На панелі ліворуч у меню «Параметри» виберіть «Функції». Відкриється сторінка функцій.
  4. Встановіть перемикач у положення Так для будь-якого або всіх наведених нижче параметрів, залежно від ваших потреб:
    • Увімкніть сучасний інтерфейс керування RichTextEditor та описи електронних листів: вмикає сучасний редактор форматованого тексту для описів електронних листів. Цей параметр замінює будь-які налаштування, які ви раніше зробили в класичному (за замовчуванням) редакторі форматованого тексту.
    • Увімкнути сучасний інтерфейс керування RichTextEditor для елементів керування за замовчуванням: вмикає сучасний редактор форматованого тексту для типових, неналаштованих екземплярів.
    • Увімкнути сучасний інтерфейс керування RichTextEditor для створення нотаток: вмикає сучасний редактор форматованого тексту для нотаток. Цей параметр замінює будь-які настроювання, які ви раніше використовували в класичному (за замовчуванням) редакторі форматованого тексту для створення нотаток.
  5. Виберіть Зберегти.
  6. У конструкторі програм виберіть «Опублікувати».

Поверніться від сучасного редактора форматованого тексту до класичного

Якщо потрібно повернутися до класичного редактора форматованого тексту, виконайте ті самі дії, що й у розділі Увімкнення сучасного редактора форматованого тексту, але скасуйте вибір параметрів, вибраних на кроці 4.

Додавання елемента керування редактором форматованого тексту до текстового стовпця

Наведена нижче конфігурація доступна в класичному редакторі форматованого тексту.

Коли ви форматуєте текстовий стовпець як форматований текст, елемент керування редактором форматованого тексту за замовчуванням додається автоматично.

  1. Увійти до Power Apps.

  2. На панелі навігації ліворуч виберіть Рішення.

  3. Відкрийте розв’язок і таблицю в розчині.

  4. В області Стовпці та дані виділіть текстовий стовпець.

    Якщо таблиця не містить текстового стовпця, виберіть + (Новий стовпець) і введіть ім’я стовпця.

  5. У полі Тип даних виберіть > праворуч від пункту Текст, а потім виберіть відповідний параметр Форматований текст залежно від того, чи містить стовпець один рядок тексту чи кілька рядків.

  6. Збережіть стовпець, а потім додайте його до форми.

Додавання елемента керування редактором форматованого тексту до текстового стовпця у формі

Наведена нижче конфігурація доступна в класичному редакторі форматованого тексту.

  1. Увійти до Power Apps.

  2. На панелі навігації ліворуч виберіть Рішення.

  3. Відкрийте розв’язок і таблицю в розчині.

  4. В області «Дані · » виберіть «Форми», а потім знайдіть форму, яка містить текстовий стовпець, до якого потрібно додати редактор форматованого тексту.

  5. Виберіть > Редагувати > Редагувати в новій вкладці.

  6. На полотні конструктор форм виділіть, додайте або створіть текстовий стовпець.

  7. В області властивостей стовпців розгорніть список Компоненти, виберіть + Компонент, а потім виберіть Елемент керування редактором форматованого тексту.

  8. На панелі керування «Додати редактор форматованого тексту» виберіть «Інтернет», «Телефон» і «Планшет», щоб дозволити програмам, запущеним на будь-якому пристрої, використовувати редактор.

    Якщо ви хочете настроїти редактор, введіть відносну URL-адресу його конфігураційного файлу, веб-ресурсу JavaScript, який містить властивості, які потрібно змінити, у полі Статичне значення . Якщо ви залишите це поле порожнім, редактор використає типову конфігурацію.

  9. Виберіть Готово.

  10. Виберіть Зберегти та опублікувати, щоб застосувати зміни до форми.

Настроювання елемента керування редактором форматованого тексту

Наведені нижче налаштування доступні в класичному редакторі форматованого тексту.

Power Apps Дає змогу змінювати властивості елемента керування «Редактор форматованого тексту» для настроювання його вигляду, функцій і поведінки. Щоб настроїти певний екземпляр елемента керування, укажіть властивості та їхні значення в окремому файлі конфігурації у форматі JSON. Щоб настроїти глобальну конфігурацію елемента керування, змініть властивості у файлі конфігурації за промовчанням.

Рівні кастомізації

Для налаштування форматованого текстового редактора можна застосувати до трьох рівнів конфігурації:

  1. На найфундаментальнішому рівні кожен екземпляр елемента керування отримує свою конфігурацію з файлу RTEGlobalConfiguration_Readonly.json. Файл доступний лише для читання, тому ви не можете змінити ці властивості безпосередньо.
  2. На наступному рівні кожен екземпляр елемента керування отримує свою конфігурацію з властивостей у файлі RTEGlobalConfiguration.json, якщо такі є. Ця конфігурація накладається поверх попередньої, тому властивості у цьому файлі замінюють ті самі іменовані властивості у файлі, доступному лише для читання.
  3. Нарешті, на найвищому рівні конкретний екземпляр елемента керування бере свою конфігурацію з певного файла конфігурації, якщо такий існує. Ця конфігурація накладається поверх попередньої, тому властивості у цьому файлі замінюють однойменні властивості у двох файлах нижчого рівня.

Тут треба додати невелику кваліфікацію. Не всі властивості замінюються на властивості вищого рівня. Властивості extraPlugins об’єднуються, щоб уможливити використання широкого спектру зовнішніх і готових плагінів у конфігурації за замовчуванням. Це дає змогу активувати та деактивувати плагіни за потреби у файлі налаштувань для певних екземплярів елемента керування.

Настроювання певного екземпляра редактора форматованого тексту

  1. У Visual Studio Code або іншому текстовому редакторі створіть файл і дайте йому зрозуміле ім’я.

    Файл RTEGlobalConfiguration.json містить типову або глобальну конфігурацію редактора форматованого тексту. Якщо елемент керування настроюється, скажімо, у формі контактної інформації, файл можна назвати якось так RTEContactFormConfiguration.json.

  2. Скопіюйте та вставте у файл такі фрагмент коду:

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

    Остання пара propertyName:value не закінчується комою.

  3. Замініть propertyName і value на властивості редактора форматованого тексту, які потрібно змінити. Рядкові значення повинні бути взяті в лапки.

    Ми надали вам кілька прикладів конфігурацій, але ви можете визначити інші відповідно до ваших потреб.

  4. Створіть Power Apps веб-ресурс типу JavaScript (JS), використовуючи файл JSON, який ви створили на кроці 1.

  5. Додайте елемент керування редактором форматованого тексту до текстового стовпця у формі та в області Додати редактор форматованого тексту > Статичне значення) введіть відносну URL-адресу веб-ресурсу JavaScript.

    Хоча ви можете ввести абсолютну URL-адресу веб-ресурсу, ми рекомендуємо вводити відносну URL-адресу. Таким чином, веб-ресурс все одно працюватиме, якщо ви імпортуєте його як рішення в інше середовище, за умови, що відносний шлях однаковий.

    Наприклад, якщо URL-адреса https://yourorg.crm.dynamics.com/WebResources/rtecontactform веб-ресурсу, відносна URL-адреса – / WebResources/rtecontactform.

  6. Виберіть Готово.

  7. Виберіть Зберегти та опублікувати, щоб застосувати зміни до форми.

Глобальне налаштування редактора форматованого тексту

Редагований файл RTEGlobalConfiguration.json глобальної конфігурації — це другий рівень налаштування, який ви можете застосувати. За замовчуванням файл порожній. Це означає, що всі екземпляри форматованого текстового редактора використовують властивості файлу RTEGlobalConfiguration_Readonly.json, доступного лише для читання, якщо ви не створюєте файл конфігурації для певного екземпляра елемента керування.

Якщо потреби вашого бізнесу вимагають від вас скрізь налаштовувати елемент керування, вкажіть потрібні значення у файлі RTEGlobalConfiguration.json . Використовуйте файл лише для читання як приклад, щоб переконатися, що ви вводите пари властивості-значення в правильному форматі.

Використовуйте Copilot для уточнення тексту в редакторі

Copilot використовує алгоритми обробки природної мови, щоб допомогти покращити письмовий вміст. Ви можете додати Copilot до редактора форматованого тексту, а потім отримувати пропозиції щодо покращення граматики, чіткості або загальної якості вашого тексту. Дізнайтеся, як використовувати Copilot у редакторі форматованого тексту.

Властивості редактора форматованого тексту

JSON-файл, який визначає «зовнішній вигляд» екземпляра редактора форматованого тексту, містить два набори властивостей:

  • Розділ defaultSupportedProps містить властивості плагінів, які визначають, що може робити елемент керування. Ви не обмежені властивостями CKEditor та його плагінами. Також можна встановити значення властивостей плагінів, які ви додаєте або створюєте.
  • Розділ «Окремі властивості» містить властивості, які визначають, як виглядатиме елемент керування.

Приклад конфігураційного файлу

Наступний код є прикладом JSON-файлу, який містить як властивості, так defaultSupportedProps і окремі властивості конфігурації. Якщо властивість має значення за замовчуванням, відображається значення за замовчуванням. Якщо властивість не має значення за замовчуванням, для ілюстрації синтаксису відображається зразкове значення. Властивості описані в двох наступних таблицях.

"defaultSupportedProps": {
  "height": 185,
  "stickyStyle": {
    "font-size": "9pt",
    "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
  },
  "stickyStyles_defaultTag": "div",
  "font_defaultLabel": "Segoe UI",
  "fontSize_defaultLabel": "9",
  "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": [["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": "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": "a11yhelp,codemirror,magicline,scayt,showborders",
  "superimageImageMaxSize": 5,
  "disallowedContent": "form[action]; *[formaction]; script; *[on*]",
  "linkTargets": ["notSet", "_blank"],
},
"attachmentEntity": {
  "name": "msdyn_richtextfiles",
  "fileAttributeName": "msdyn_fileblob"
},
"disableContentSanitization": true,
"disableDefaultImageProcessing": false,
"disableImages": false,
"externalPlugins": [
  {
    "name": "EmbedMedia",
    "path": "/WebResources/msdyncrm_/myplugins/embedmedia/"
  }
],
"imageEntity": {
  "imageEntityName": "msdyn_richtextfiles",
  "imageFileAttributeName": "msdyn_imageblob"
},
"readOnlySettings": {
  "height": 500,
  "showFullScreenExpander": true
},
"sanitizerAllowlist": {
  "attributes": [],
  "cssProperties": [],
  "domains": [],
  "protocols": [],
  "tags": []
},
"showAsTabControl": false,
"showFullScreenExpander": false,
"showHtml": false,
"showPreview": false,
"showPreviewHeaderWarning": false,
"allowSameOriginSandbox": false

defaultSupportedProps

У наведеній нижче таблиці описано властивості, які використовуються найчастіше, але ви можете налаштувати всі властивості, які підтримує CKEditor. Елемент керування редактором форматованого тексту використовує CKEditor 4.

Властивість Опис Стандартне значення
висота Встановлює початкову висоту області вмісту в пікселях. "185"
stickyStyle Встановлює шрифт і розмір редактора. Дивись defaultSupportedProps
stickyStyles_defaultTag Створює обгортку навколо тексту в області вмісту редактора. Спочатку встановлено значення "div", але ви можете змінити його на "p" або будь-який альтернативний тег. "div"
font_defaultLabel Встановлює мітку шрифту, що відображається на панелі інструментів. Етикетка призначена лише для зовнішнього вигляду і не є функціональною. Властивість stickyStyle визначає шрифт і розмір редактора. "Segoe UI"
fontSize_defaultLabel Встановлює мітку розміру шрифту, що відображається на панелі інструментів. Етикетка призначена лише для зовнішнього вигляду і не є функціональною. Властивість stickyStyle визначає шрифт і розмір редактора. "9"
toolbarLocation Встановлює розташування панелі інструментів в області вмісту редактора. Підтримувані значення: «верх» і «низ». "Дно"
панель інструментів Містить список кнопок панелі інструментів для відображення. Дивись defaultSupportedProps
plugins Містить список попередньо встановлених додатків, які може використовувати редактор. Плагіни у цьому списку можуть відрізнятися від завантажуваних плагінів, якщо extraPlugins їм буде надано removePlugins значення. Якщо ви встановите для цієї властивості порожній рядок, редактор завантажуватиметься без панелі інструментів. Дивись defaultSupportedProps
extraPlugins Додає плагіни до plugins списку, щоб завантажити більше плагінів.
Для роботи багатьох плагінів потрібні інші плагіни. Редактор форматованого тексту автоматично додає їх, і ви не можете використовувати цю властивість для їх перевизначення. Використовуйте removePlugins натомість.
Дивись defaultSupportedProps
removePlugins Список плагінів, які не завантажуються. Використовуйте його, щоб змінити перелік додатків, які буде завантажено, без зміни списків plugins і extraPlugins . Дивись defaultSupportedProps
superimageImageMaxSize Встановлює максимальний розмір у мегабайтах (МБ), дозволений для вбудованих зображень під час використання додатка суперзображень. "5"
disallowedContent Дає змогу заборонити користувачам вставляти елементи, які ви не хочете мати у своєму вмісті. Ви можете заборонити цілі елементи або за атрибутами, класами та стилями. Дивись defaultSupportedProps
linkTargets Дає змогу налаштувати, які параметри таргетингу посилань доступні для користувачів під час створення посилань:
- "notSet": Цільового об’єкта не встановлено
- "frame": відкриває документ у вказаному кадрі
- popupWindow": відкриває документ у спливаючому вікні
- "_blank": відкриває документ у новому вікні або вкладці
- "_top": відкриває документ у повному тілі вікна
- "_self": відкриває документ у тому ж вікні або вкладці, де активовано посилання
- "_parent": відкриває документ у батьківському кадрі
"notSet", "_blank"

Індивідуальні властивості

У наведеній нижче таблиці описано додаткові властивості, які можна використовувати для настроювання елемента керування редактором форматованого тексту.

Властивість Опис Стандартне значення
attachmentEntity Щоб забезпечити більший захист завантажених файлів за допомогою таблиці, відмінної від стандартної, установіть цю властивість і вкажіть іншу таблицю.
Синтаксис: "name": "tableName", "fileAttributeName": "attributeNameofBlobReference"
Дивись defaultSupportedProps
disableContentSanitization Очищення вмісту видаляє деякі користувацькі атрибути або теги з форматованого текстового вмісту. За замовчуванням її вимкнено, щоб дозволити копіювання та вставлення форматованого тексту із зовнішніх джерел. Це властивість відноситься тільки до режим редагування. Якщо елемент керування редактора доступний лише для читання або вимкнено, вміст завжди дезінфікується. істина
disableDefaultImageProcessing За замовчуванням зображення, які вставляються в редактор, завантажуються до визначених attachmentEntity у конфігурації зображень. Зовнішні користувачі можуть не мати привілеїв для перегляду вмісту таблиці. Замість цього встановіть для цієї властивості значення true, щоб зберігати зображення як рядки base64 безпосередньо в стовпці, налаштованому на використання елемента керування редактором форматованого тексту. хибність
disableImages Визначає, чи можна вставляти зображення в редактор. Ця властивість має найвищий пріоритет. Якщо для цієї властивості встановлено значення true, зображення вимикаються, незалежно від значення imageEntity властивості. хибність
externalPlugins Містить список створених зовнішніх зовнішніх модулів або компонентів plug-in, які можна використовувати в елементі керування редактором форматованого тексту.
Синтаксис: "name": "pluginName", "path": "pathToPlugin" (значення шляху може бути абсолютною або відносною URL-адресою)
Ніхто; дивіться defaultSupportedProps для прикладу
imageEntity Щоб забезпечити більший захист зображень за допомогою таблиці, відмінної від стандартної, установіть цю властивість і вкажіть іншу таблицю.
Синтаксис: "imageEntityName": "назва_ таблиці", "imageFileAttributeName": "attributeNameofBlobReference"
Дивись defaultSupportedProps
readOnlySettings Ці властивості визначають поведінку стовпця при перегляді в стані, доступному тільки для читання або вимкнено. Ви можете вказати будь-який підтримуваний ресурс. Ніхто; дивіться defaultSupportedProps для прикладу
дезінфікуючий засібДопустимий список Перелічує інші види вмісту, які можуть бути показані в редакторі. Дивись defaultSupportedProps
showAsTabControl Дає змогу відображати більше команд над областю вмісту. Має бути встановлено значення true, щоб використовувати такі властивості: showFullScreenExpander, showHtml,, showPreview showPreviewHeaderWarning хибність
showFullScreenExpander Визначає, чи можна використовувати редактор у повноекранному режимі. showAsTabControl має бути встановлено значення true. хибність
showHtml Дозволяє користувачам безпосередньо відображати та редагувати HTML-вміст. showAsTabControl має бути встановлено значення true. хибність
showPreview Дозволяє користувачам попередньо переглядати вміст редактора, що відображається у форматі HTML. showAsTabControl має бути встановлено значення true. хибність
showPreviewHeaderWarning Дає змогу показувати або приховувати попереджувальне повідомлення, яке відображається під час попереднього перегляду вмісту. showAsTabControl і showPreview має бути встановлено значення true. хибність
allowSameOriginSandbox Дозволяє обробляти вміст у редакторі як такий, що походить з того самого джерела, що й програма візуалізації.
Використовуйте цю властивість з обережністю. Використовуйте лише надійний зовнішній вміст. Якщо для цієї властивості встановлено значення true, будь-який зовнішній вміст може мати доступ до внутрішніх ресурсів.
хибність

Приклади конфігурацій

У наведених нижче зразках конфігурацій можна настроїти редактор форматованого тексту в класичному форматі. Ви можете використовувати їх як є або як відправну точку для налаштування певного екземпляра редактора форматованого тексту або глобально.

Установіть шрифт за замовчуванням на 11-пунктовий Calibri

Встановіть ці defaultSupportedProps властивості у файлі конфігурації. Після кожного значення, крім останнього, слід поставити кому (,).

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

Зробіть так, щоб клавіша Enter вставила новий рядок замість блоку абзацу

За замовчуванням натискання клавіші Enter створює блок абзацу з тегом <p> HTML. HTML використовує блоки абзаців для групування інформації, як абзаци в документі Word. Веб-переглядачі можуть форматувати <p> тег дещо по-іншому, тому для візуальної узгодженості ви можете використовувати замість нього новий тег тегу рядка або розриву <br\> рядка.

Встановіть цю defaultSupportedProps властивість у файлі конфігурації. Після цього значення ставиться кома (,), якщо це не остання властивість у файлі.

"enterMode": 2,

Вставляйте або створюйте лише вміст HTML 5

Хоча елемент керування редактором форматованого тексту найкраще працює з вмістом HTML 5, ви можете використовувати теги HTML 4. Однак у деяких випадках змішування тегів HTML 4 і HTML 5 може створити проблеми з юзабіліті. Щоб переконатися, що весь вміст відповідає HTML 5, укажіть усі підтримувані теги HTML 5 у ресурсі allowedContent . Елемент керування редактора перетворює будь-які несумісні теги на еквівалент HTML 5.

Встановіть цю 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(*)[*]{*};",

Вставлення або створення простого тексту

Встановіть ці defaultSupportedProps властивості у файлі конфігурації. Після кожного значення, крім останнього, слід поставити кому (,).

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

Встановіть цю індивідуальну властивість у файлі конфігурації. Після цього значення ставиться кома (,), якщо це не остання властивість у файлі.

"disableImages": true,

Дозволити редактору використовувати повноекранний режим

Встановіть ці окремі властивості у файлі конфігурації. Після кожного значення, крім останнього, слід поставити кому (,).

"showAsTabControl": true,
"showFullScreenExpander": true,

Скріншот редактора форматованого тексту з виділеним повноекранним елементом керування розширювачем.

Дозволити перегляд і редагування HTML-вмісту

Щоб дозволити користувачам безпосередньо переглядати та редагувати HTML-код свого вмісту, покажіть вкладку HTML .

Встановіть ці окремі властивості у файлі конфігурації. Після кожного значення, крім останнього, слід поставити кому (,).

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

Знімок екрана редактора форматованого тексту з виділеною вкладкою HTML.

Відображення спрощеної панелі інструментів або її повне вилучення

За замовчуванням панель інструментів редактора містить усі доступні інструменти форматування. Щоб створити спрощену панель інструментів, скористайтеся властивістю toolbar та вкажіть інструменти, які користувачі можуть використовувати для форматування вмісту.

Встановіть цю defaultSupportedProps властивість у файлі конфігурації. Після цього значення ставиться кома (,), якщо це не остання властивість у файлі.

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

Скріншот редактора форматованого тексту з виділеною спрощеною панеллю інструментів.

Щоб повністю видалити панель інструментів, встановіть значення toolbar ’[]’ (дві квадратні дужки).

Додайте новий список шрифтів і встановіть 20-піксельний Brush Script MT як шрифт за замовчуванням

Встановіть ці 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"
},

Знімок екрана редактора форматованого тексту з типовим шрифтом Brush Script і новим списком шрифтів.

Розташуйте панель інструментів у верхній частині редактора форматованого тексту

Встановіть цю defaultSupportedProps властивість у файлі конфігурації. Після цього значення ставиться кома (,), якщо це не остання властивість у файлі.

"toolbarLocation": "top",

Запустіть редактор із висоти 30 пікселів і збільште його відповідно до вмісту

Встановіть ці defaultSupportedProps властивості у файлі конфігурації. Після кожного значення, крім останнього, слід поставити кому (,).

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

Знімок екрана, який ілюструє, що введення тексту в область форматованого тексту або вставлення зображення збільшує його відповідно до вмісту.

Зафіксуйте висоту редактора на рівні 500 пікселів

Встановіть ці defaultSupportedProps властивості у файлі конфігурації. Після кожного значення, крім останнього, слід поставити кому (,).

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

Знімок екрана, який ілюструє, що при фіксованій висоті, коли до області форматованого тексту додається достатня кількість вмісту, з’являється смуга прокручування.

Зробіть так, щоб контекстне меню (клацання правою кнопкою миші) використовувало контекстне меню браузера за замовчуванням

Щоб замінити контекстне меню елемента керування редактора контекстним меню браузера за замовчуванням, видаліть плагін контекстного меню.

Встановіть цю defaultSupportedProps властивість у файлі конфігурації. Після цього значення ставиться кома (,), якщо це не остання властивість у файлі.

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

Пошук конфігурації елемента керування редактора форматованого тексту

Якщо ви не впевнені, звідки береться конфігурація екземпляра редактора форматованого тексту, її можна знайти за допомогою інструментів розробника браузера.

  1. У Microsoft Edge Google Chrome або Google Chrome запустіть додаток на основі моделі та відкрийте форму з елементом керування редактором форматованого тексту.
  2. Клацніть правою кнопкою миші область вмісту редактора форматованого тексту та виберіть Перевірити.
  3. В області огляду виберіть вкладку Консоль .
  4. Виберіть сторінку-шаблон Main.aspx у списку на панелі команд.

Скріншот інструментів розробника браузера з виділеною вкладкою «Консоль» і сторінкою main.aspx.

  1. Виберіть піктограму Очистити консоль на панелі команд панелі перевірки, а потім введіть CKEDITOR.config. в консолі.

Скріншот інструментів розробника браузера з виділеною іконкою Очистити консоль.

  1. Щоб відобразилися різні конфігурації, на консолі області перевірки введіть CKEDITOR.config..

Список конфігурацій редактора CK.

  1. Щоб відобразити поточний параметр, виберіть конфігурацію, наприклад autoGrow_minHeight.

Панель інструментів редактора форматованого тексту

У наведеній нижче таблиці описано засоби форматування, доступні в редакторі форматованого тексту за промовчанням.

Icon Ім'я Сполучення клавіш Опис
Формат за зразком. Копіювати форматування 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-адреси .

За бажанням виберіть тип посилання та протокол, якщо посилання веде на щось інше, ніж веб-сторінка. Щоб указати, де має відкриватися посилання типу URL-адреси, перейдіть на вкладку Ціль, а потім виберіть Ціль.

Вставлена або введена URL-адреса автоматично перетворюється на посилання. Наприклад, http://myexample.com стає <a href="http://myexample.com">http://myexample.com</a>.
Видалити посилання. Від’єднати Видаліть посилання з анкора і зробіть його звичайним текстом.
Верхній індекс. Верхній індекс Введення малих літер понад рядком тексту.
Нижній індекс. Нижній індекс Введення малих літер попід рядком тексту.
Закреслений. Закреслення Текст буде викреслено прямою лінією.
Вставити зображення. Image Щоб вставити зображення, вставте його з буфера обміну в область вмісту або перетягніть файл зображення з папки в область вмісту. Потягніть будь-який куточок зображення, щоб змінити його розмір. Елемент керування підтримує зображення .png, .jpg та .gif.

Щоб мати більший контроль над джерелом, зовнішнім виглядом і поведінкою зображення, натисніть кнопку «Зображення ». Перейдіть до файлу зображення в локальній папці або введіть його URL-адресу. Якщо образ зберігається на зовнішньому сервері, введіть абсолютний шлях. Якщо він знаходиться на локальному сервері, ви можете ввести відносний шлях. За бажанням введіть певну висоту та ширину, щоб змінити розмір зображення, і виберіть вирівнювання. Ви також повинні ввести альтернативний текст, щоб описати зображення для людей, які використовують програми зчитування з екрана.

Якщо зображення також є посиланням на веб-сторінку або інший хмарний ресурс, введіть URL-адресу ресурсу в поле Цільова URL-адреса і, якщо потрібно, виберіть Ціль, де має відкриватися посилання.
Зліва направо. Напрямок тексту зліва направо Змініть текст зліва направо. Це значення вибрано за замовчуванням.
Справа наліво. Напрямок тексту справа наліво Змініть текст справа наліво для двонаправленого мовного вмісту.
Скасувати. Скасувати Скасуйте останню зміну, яку ви внесли до вмісту.
Повторити. Повторити Скасуйте останню дію або повторно застосуйте останню зміну, внесену до вмісту.
Очистити форматування. Очистити форматування Видаліть усе форматування з виділеного тексту.
Стіл. Table Вставте таблицю з вибраною кількістю рядків і стовпців. Щоб мати більший контроль над розміром і зовнішнім виглядом таблиці, натисніть кнопку Таблиця > Додатково та змініть її властивості. Також можна клацнути таблицю правою кнопкою миші, щоб переглянути та змінити її властивості.

Щоб змінити ширину стовпця, перетягніть його межу. Ви можете виділити одну або кілька клітинок, рядків або стовпців і застосувати певне форматування, додати посилання на виділений текст, а також вирізати, скопіювати та вставити цілі рядки або стовпці.
Особисті настройки Установіть шрифт і розмір шрифту за умовчанням.
Довідка зі спеціальних можливостей Alt + 0 Відкрийте список сполучень клавіш, які можна використовувати в редакторі форматованого тексту.
Розгорнути панель інструментів. Розгорнути панель інструментів Якщо вікно занадто вузьке, щоб відобразити всю панель інструментів, виберіть, щоб розгорнути панель інструментів до другого рядка.

Порада

Щоб скористатися вбудованим засобом перевірки орфографії у веб-переглядачі, натисніть клавішу Ctrl, клацнувши правою кнопкою миші текст, який потрібно перевірити. В іншому випадку контекстне меню, що відкривається правою кнопкою миші, забезпечує контекстне форматування вибраного елемента.
Альтернативою вбудованому засобу перевірки орфографії у вашому браузері є розширення для браузера Microsoft Editor. Редактор Microsoft бездоганно працює з елементом керування редактором форматованого тексту, а коли його ввімкнено, забезпечує швидку та просту вбудовану граматику та можливості перевірки орфографії.

Використання редактора форматованого тексту в автономному режимі

Елемент керування редактором форматованого тексту доступний, коли ви працюєте в автономному режимі, хоча й без деяких звичних для вас функцій. Зображення, які ви завантажуєте за допомогою стандартної конфігурації редактора, недоступні під час роботи в автономному режимі.

Наведені нижче плагіни доступні для редактора форматованого тексту в автономному режимі:

  • 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, maximize, menu, button, notification, notificationaggregator, panel, panel, popup, preview, removeformat, resize, richcombo, selectall, showborders, sourcearea, specialchar, stylescombo, tab, textmatch, textwatcher, панель інструментів, скасувати, widgetselection, wysiwygarea, xml

У редакторі форматованого тексту в автономному режимі доступні такі інструменти форматування:

  • Жирний шрифт, курсив, підкреслення, марковані та нумеровані списки, зменшення та збільшення відступу, блокування цитати, вирівнювання за лівим краєм, вирівнювання по центру, вирівнювання по правому краю, закреслення, двонаправлений текст, скасування та повторення, а також видалення форматування

Рекомендації щодо використання редактора форматованого тексту

  • Поля форматованого тексту зберігають HTML-теги для форматування разом із даними, введеними користувачем. Установлюючи максимальний розмір полів форматованого тексту, переконайтеся, що враховуються теги HTML і дані користувача.

  • Для найкращої продуктивності не перевищуйте 1 МБ HTML-вмісту. При більших розмірах ви можете помітити повільніший час відгуку на завантаження та редагування.

  • У конфігурації за замовчуванням зображення не впливають негативно на продуктивність, оскільки зберігаються окремо від HTML-вмісту. Однак зображення зберігаються як вміст base64 у текстовому стовпці, якщо користувач, який їх завантажує, не має дозволів на доступ до msdyn_richtextfiles таблиці. Вміст Base64 великий, тому ви зазвичай не хочете зберігати зображення як частину вмісту стовпця.

  • Якщо у вас системний адміністратор або базовий роль безпеки користувача, функція персоналізації користувачів працює за замовчуванням. Якщо у вас немає цих ролей, ви повинні мати привілеї для створення, читання та запису на msdyn_customcontrolextendedsettings таблиці, щоб плагін персоналізації користувачів працював.

Запитання й відповіді

Чому введені символи відображаються повільно?

Якщо у вас багато контенту в редакторі, час відгуку може збільшитися. Для найкращої продуктивності не перевищуйте 1 МБ вмісту. Також перевірка орфографії або граматики може вповільнювати введення тексту.

Чому я не можу завантажити зображення? Чому не завантажується попередній перегляд зображення?

Якщо ім’я файлу зображення, включно зі шляхом, довге, файл може не завантажитися або попередній перегляд може не відображатися. Спробуйте скоротити ім’я файлу або перемістити його в місце з коротшим шляхом, а потім завантажте його знову.

Чому я бачу HTML у своєму тексті?

Якщо елемент керування редактором форматованого тексту використовується у стовпці, який не відформатовано для форматованого тексту, вміст відображається в базовому HTML-коді, а не як форматований текст.

Знімок екрана HTML, що з’являється в області вмісту редактора.

Щоб вирішити цю проблему, перегляньте статтю Переконайтеся, що для формату стовпця встановлено значення Форматований текст.

Див. також

Примітка

Розкажіть нам про свої уподобання щодо мови документації? Візьміть участь в короткому опитуванні. (зверніть увагу, що це опитування англійською мовою)

Проходження опитування займе близько семи хвилин. Персональні дані не збиратимуться (декларація про конфіденційність).