Profile	Language	Actions
Dr. Jane Doe Hidden	English	… …

` per document. A document row lays out its values in `ace-cell` elements, each with an `ace-label` and an `ace-value`, in grid columns, and ends with its `ace-actions`: its state `ace-state` and the buttons `ace-sort-handle`, `ace-sort-up`, `ace-sort-down`, `ace-visibility-toggle`, `ace-view-toggle`, `ace-edit` and `ace-delete`. A section without documents shows an `ace-empty`. A contract holds its contacts the same way, in a section of its own with an `ace-itemlist` of `ace-item` rows. A row ends with an `ace-collapse`. When a document is edited, viewed or deleted, the script opens the document editor there, a `

` holding an `ace-form` with its `ace-title`, an `ace-message ace-error`, a confirmation text `ace-copy` before a deletion, the fields of the document, the contacts of a contract in an `ace-contacts`, and its buttons. A new document opens its editor in the section of its kind. ### The buttons {#styling-buttons} Every button is an `ace-control` with the action it performs and the Bootstrap button classes of its kind: | Class | Action | | --- | --- | | `ace-edit` | Open a field, the image or a document for editing. | | `ace-save`, `ace-apply` | Save a field or a document, apply the open fields. `ace-apply` means the application link of a program in **EXT:academic_programs**. Scoped by the outermost element, a rule for one does not reach the other. | | `ace-undo`, `ace-clear`, `ace-discard`, `ace-cancel` | Undo a change, clear a field, discard the changes, cancel a dialog. | | `ace-add`, `ace-delete` | Add or delete a document or the image. | | `ace-sort ace-sort-handle`, `ace-sort-up`, `ace-sort-down` | Move a document. The contacts of a contract have no handle. | | `ace-visibility-toggle`, `ace-view-toggle` | Show or hide a document on the profile, show its details. The contacts of a contract name the same two buttons `ace-visibility` and `ace-view`. | | `ace-close` | Close a message, with the Bootstrap class `btn-close`. | | `ace-help` | Show the help text of a field. In the form partials of **EXT:academic_base**, `ace-help` is the help text itself. | ### Further classes of the editor {#styling-more-classes} | Class | Element | | --- | --- | | `ace-spinner` | An empty `` in the save and delete buttons of the image editor, the document editor and the contact editor, shown while a request is pending. It has no content, so it is invisible without a rule of the site stylesheet, a spinning border for example. | | `ace-counter` | The character count of a rich text field with a length limit. | | `ace-alternate` | Every other row of fields, on its `ace-field-group`. | | `ace-image-editor`, `ace-image-cropper` | The section of the image editor, and the area of the image in it that is cropped. | | `ace-helptext` | A help text of the image editor. Elsewhere, `ace-help` names the button of a help text in this editor and the help text itself in the form partials of **EXT:academic_base**. | | `ace-document-editor`, `ace-collapse`, `ace-contacts`, `ace-copy` | The document editor, the place below a row it opens in, the contacts of a contract in it, and the confirmation text of a deletion, see [The documents](https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:styling-documents@main). The dialog about unsaved changes uses `ace-copy` for its text as well. | | `ace-fieldset` | The `

` of the personal fields, with a `visually-hidden` legend. | | `ace-control-wrap` | The wrapper of a text area or of a rich text control. | | `ace-button-label` | The icon inside a field action button, hidden from screen readers. | ## What the editor script writes {#styling-script-classes} The editor script works with the `data-pe-*` attributes, apart from the `ace-message` of a field or a group, which it finds by its class and writes the message of a refused value into, so an override keeps that class. It writes these classes, which a site stylesheet should show. The editor does not work without it: `plugin.tx_academicpersonsedit.assets.js` switches it off only for a site that brings an editor script of its own, see [Load the script or bring your own](https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:configuration-javascript@main). | Class | Written on | | --- | --- | | `is-invalid` | The control of a field whose value was rejected, and its editor element: the `ace-editor` of the field or of its group, for a rich text field the `ace-control-wrap`. On a switch of the header, the checkbox whose change was rejected. This is the name of Bootstrap for the state the form partials of **EXT:academic_base** call `invalid`. | | `show`, `showing`, and one of `ace-message-success`, `ace-message-info`, `ace-message-warning`, `ace-message-danger` | The `ace-message` of the `ace-messages` that reports a result. With the Bootstrap toast script on the page, the toast shows and hides it. Without it, the editor sets `show`, so the site stylesheet hides an `ace-message` there that is not `show`. | | `active` | The button of the header that opens all fields, while they are open, with `aria-pressed="true"`. | | `ace-empty`, `ce-bodytext` | The value of a field after it was saved, as the template renders it. | | `ace-limit-exceeded` | The `ace-counter` of a rich text field over its length limit. | | `is-dragging`, `is-drag-active`, `is-drop-before`, `is-drop-after`, `is-drop-at-end` | The dragged document row, its list, and the place it would drop to. | | `is-image-closing` | The editor while the image editor closes. | | `col-lg-4`, `col-lg-8`, `col-lg-12` | The columns of the image and the fields, which the image editor widens and narrows. | | `academic-persons-profile-editing-image-editor-enter-active`, `-enter-from`, `-leave-active`, `-leave-to`, and the same with `academic-persons-profile-editing-document-collapse` | The `ace-image-editor` and an `ace-document-editor` while they open and close. The script waits for the transition the stylesheet declares on them, and goes on at once when there is none. | ## The rich text editor {#styling-rich-text-editor} The rich text fields of the editor are CKEditor 5, imported from the import map of **EXT:rte_ckeditor**. The extension uses its scripts only, and ships no stylesheet for the toolbar, the buttons, the link balloon and the dialogs of the editor. Where those styles come from depends on the patch level of TYPO3: | TYPO3 | CKEditor 5 | Interface styles | | --- | --- | --- | | 13.4.35, 14.3.7 | 47.6.0 | Injected by the CKEditor scripts into the page they run on. Nothing to do for the site. | | 13.4.36, 14.3.8 and later | 48.5.2 or later | In `EXT:rte_ckeditor/Resources/Public/Css/editor.css`, which only the backend form links. **The site has to link it**, or the toolbar shows its icons at the size of their SVG files and the editor has no layout. | Link the file of the core rather than a copy of it. It belongs to the CKEditor build the core ships, so it stays in step with the editor when a core update brings a new CKEditor release. Linking it does no harm on the patch levels of the first row, where the file only holds a few rules TYPO3 adds. The file is served from the site's own origin, below `_assets/` in a Composer installation, so a Content Security Policy that allows `style-src 'self'` covers it. It is some 220 KB, so link it on the page of the editor only. The development site of the extensions does it like this, in TypoScript the site package can copy: **EXT:my_sitepackage/Configuration/Sets/MySite/setup.typoscript** ```typoscript page.includeCSS.richTextEditor = EXT:rte_ckeditor/Resources/Public/Css/editor.css page.includeCSS.richTextEditor.if.isTrue.numRows { table = tt_content select.where = {#CType} = 'academicpersonsedit_profileediting' } ``` The condition counts the profile editing elements on the current page. An element shown on another page, through an **Insert records** element for example, is not on that page. Name the page that holds the element then, with its uid in place of the default `this`, or link the file on every page: ```typoscript page.includeCSS.richTextEditor.if.isTrue.numRows.select.pidInList = 42 ``` The stylesheet uses the light colours of CKEditor. A site changes them through the custom properties of CKEditor, such as `--ck-color-toolbar-background` or `--ck-color-base-border`, in a rule of its own stylesheet that comes after the link. The buttons of the toolbar are `

Assigned profiles