diff --git a/Documentation/ContentElements/RichTextEditor/Index.rst b/Documentation/ContentElements/RichTextEditor/Index.rst index f7ff725..a86ecb6 100644 --- a/Documentation/ContentElements/RichTextEditor/Index.rst +++ b/Documentation/ContentElements/RichTextEditor/Index.rst @@ -1,81 +1,97 @@ -.. include:: /Includes.rst.txt - - -.. _rte: +.. include:: /Includes.rst.txt +.. _rte: ==================== The rich text editor ==================== .. image:: /Images/ManualScreenshots/ContentElements/RegularText.png - :alt: Content element Regular Text in the TYPO3 backend - :class: img-thumbnail float-end - :width: 250 + :alt: Content element Regular Text in the TYPO3 backend + :class: img-thumbnail float-end ms-1 + :width: 250 + +Start by `Creating a content element `_ +of type "Text & Images", "Text & Media", or "Regular Text Element". You can find them in the +tab `Typical page content `_. The TYPO3 text editing interface is not much different from a word processor. The options available in the toolbars vary depending on how your TYPO3 installation is configured. -.. include:: /Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.rst.txt +.. figure:: /Images/ManualScreenshots/ContentElements/Text/RichTextEditor.png + :alt: Screenshot of a typical rich text editor in the TYPO3 backend + + The options you see depend on the configuration of your site You can format text, set the alignment, insert tables and symbols and add internal and external links to text. - -.. _rte-linking: +.. _rte-linking: Creating a link =============== -#. Select the text you want to link. -#. Click the :guilabel:`Link` icon in the toolbar. - The :guilabel:`Link Browser` window displays. +Select the text you want to link. - .. figure:: /Images/ManualScreenshots/Link/LinkBrowser.png - :alt: The TYPO3 CMS link browser - :class: with-border +Click the :guilabel:`Link` icon in the toolbar or use the shortcut +:kbd:`Ctrl + K` or :kbd:`Cmd + K`. This shortcut only works when +your focus is within the editor. Outside the editor the same +shortcut would open the live search. + +.. figure:: /Images/ManualScreenshots/ContentElements/Text/Link.png + :alt: Linking the highlighted text in the TYPO3 rich text editor + +The :guilabel:`Link Browser` window displays. This window lets you link to an internal page, file, folder, external URL, email address or phone number. +.. _rte-linking-internal: + Internal links -------------- + +.. figure:: /Images/ManualScreenshots/Link/LinkBrowser.png + :alt: The TYPO3 CMS link browser + You can link to an internal file, folder, page or content element on a page. -On the :guilabel:`Page` tab, select the page in the page tree that you want to link to. +On the :guilabel:`Page` tab, select the page in the page tree that you want +to link to, then click the :guilabel:`Link to ...` button. -Alternatively, you can link to a specific point (anchor) on the page. Browse -to the page you want to link to, then click the arrow icon next to the page -name. The content elements on that page are displayed and you can select the -content element you want to link to. +You can also link directly to a content element. In that case an anchor +(link with a hashtag) is used so your readers will automatically jump to the +desired content element. -.. figure:: ../../Images/ManualScreenshots/Link/LinkBrowserAnchor.png - :alt: Display the anchors on a page - :class: with-border +You can also link to uploaded files, for example PDF files: -The :guilabel:`Link Browser` window closes and the link is added to your text. +.. figure:: /Images/ManualScreenshots/Link/LinkBrowserFile.png + :alt: Linking to a file for download in TYPO3 +.. _rte-linking-external: External links -------------- -#. In the :guilabel:`Link Browser` window, go to the :guilabel:`*External URL` tab. -#. Type your link in the :guilabel:`URL` field. -#. In the Target drop-down list, select :guilabel:`New window` to open the - link in a new browser window. +#. In the :guilabel:`Link Browser` window, go to the :guilabel:`External URL` tab. +#. Type your link in the :guilabel:`URL` field. +#. In the Target drop-down list, select :guilabel:`New window` to open the + link in a new browser window. - .. figure:: ../../Images/ManualScreenshots/Link/LinkBrowserExternal.png - :alt: Display the anchors on a page - :class: with-border + .. figure:: /Images/ManualScreenshots/Link/LinkBrowserExternal.png + :alt: Display the anchors on a page + :class: with-border -#. Click the :guilabel:`Set Link` button to close the :guilabel:`Link Browser` - window. +#. Click the :guilabel:`Set Link` button to close the :guilabel:`Link Browser` + window. +.. _rte-linking-remove: Removing a link =============== To remove a link from text, put your cursor anywhere in the linked text then -click the :guilabel:`Unlink` icon on the toolbar. +click the :guilabel:`Unlink` button in the popover: -.. include:: /ContentElements/TipKeyboardCommands.rst.txt +.. figure:: /Images/ManualScreenshots/ContentElements/Text/Unlink.png + :alt: Unlinking using the popover in the rich text editor diff --git a/Documentation/Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.png b/Documentation/Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.png deleted file mode 100644 index 73ed58f..0000000 Binary files a/Documentation/Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.png and /dev/null differ diff --git a/Documentation/Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.rst.txt b/Documentation/Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.rst.txt deleted file mode 100644 index 8a45562..0000000 --- a/Documentation/Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.rst.txt +++ /dev/null @@ -1,6 +0,0 @@ -.. Automatic screenshot: Remove this line if you want to manually change this file - -.. figure:: /Images/AutomaticScreenshots/EditContent/EditContentRichTextEditor.png - :class: with-shadow - - A typical rich text editor \ No newline at end of file diff --git a/Documentation/Images/ManualScreenshots/ContentElements/Text/Link.png b/Documentation/Images/ManualScreenshots/ContentElements/Text/Link.png new file mode 100644 index 0000000..50b9ced Binary files /dev/null and b/Documentation/Images/ManualScreenshots/ContentElements/Text/Link.png differ diff --git a/Documentation/Images/ManualScreenshots/ContentElements/Text/RichTextEditor.png b/Documentation/Images/ManualScreenshots/ContentElements/Text/RichTextEditor.png new file mode 100644 index 0000000..4330cc4 Binary files /dev/null and b/Documentation/Images/ManualScreenshots/ContentElements/Text/RichTextEditor.png differ diff --git a/Documentation/Images/ManualScreenshots/ContentElements/Text/Unlink.png b/Documentation/Images/ManualScreenshots/ContentElements/Text/Unlink.png new file mode 100644 index 0000000..d31f266 Binary files /dev/null and b/Documentation/Images/ManualScreenshots/ContentElements/Text/Unlink.png differ diff --git a/Documentation/Images/ManualScreenshots/Link/LinkBrowser.png b/Documentation/Images/ManualScreenshots/Link/LinkBrowser.png index 621f887..2c714b2 100644 Binary files a/Documentation/Images/ManualScreenshots/Link/LinkBrowser.png and b/Documentation/Images/ManualScreenshots/Link/LinkBrowser.png differ diff --git a/Documentation/Images/ManualScreenshots/Link/LinkBrowserAnchor.png b/Documentation/Images/ManualScreenshots/Link/LinkBrowserAnchor.png deleted file mode 100644 index 7c1e0cb..0000000 Binary files a/Documentation/Images/ManualScreenshots/Link/LinkBrowserAnchor.png and /dev/null differ diff --git a/Documentation/Images/ManualScreenshots/Link/LinkBrowserExternal.png b/Documentation/Images/ManualScreenshots/Link/LinkBrowserExternal.png index 0cd287d..e3df8bd 100644 Binary files a/Documentation/Images/ManualScreenshots/Link/LinkBrowserExternal.png and b/Documentation/Images/ManualScreenshots/Link/LinkBrowserExternal.png differ diff --git a/Documentation/Images/ManualScreenshots/Link/LinkBrowserFile.png b/Documentation/Images/ManualScreenshots/Link/LinkBrowserFile.png new file mode 100644 index 0000000..a5efe52 Binary files /dev/null and b/Documentation/Images/ManualScreenshots/Link/LinkBrowserFile.png differ