Differences

This shows you the differences between two versions of the page.

--- texteditor [2026/01/08 09:20] – [Second row] jsmith
+++ texteditor [2026/08/11 16:54] (current) – [Text+ (Toolbar)] Added contrast link to one-line text editor page tadachi
@@ Line 1: / Line 1: @@
 ====== Text+ (Toolbar) ======
-Most of the editing and formatting of text is done in boxes we have labelled **Text+**.   Many of the features available are similar to those in word-processing software such as Word (e.g. bold, italics, underlining, bullet points, indenting). On this page we have picked out some of the features which may be less familiar, but which are particularly helpful.
+Most of the editing and formatting of text is done in fields we have named **Text+**. These offer more formatting options than [[onelinetexteditor|one-line text fields]] (e.g. titles).  Many of the features available in Text+ are similar to those in word-processing software such as Word (e.g. bold, italics, underlining, bullet points, indenting). On this page we have picked out some of the features which may be less familiar, but which are particularly helpful.
 You may have text prepared in another format (for example in Word) that you want to paste into the** Text+ **window. If so, it is always better to paste it into **Notepad **(or **TextEdit **for Mac users) and then copy and paste it into Xerte, because this will strip out any formatting that may cause display issues.  You may have to put back the formatting you wanted to keep, but it will avoid potential problems.
-==== Top row ====
+The division of the toolbar into groups/rows will be determined by the size/resolution of your editor window.  In this reference the toolbar is split arbitrarily into 5 groups below.
+==== Group 1 ====
 {{:xerte-texteditor-toprow.jpg|Top row of toolbar.}}
-{{:xerte-texteditor-source.jpg?70 }}Displays the content in the source code format. If you are familiar with HTML, you will be able to edit here, in particular to solve formatting issues or insert embed codes.  If you are not familiar with HTML, it is definitely worth learning the basic principles and the code needed to resolve the most common issues.  To learn the basics, you can visit this [[https://www.w3schools.com/html/|HTML Tutorial]] resource.
+{{:xerte-texteditor-source.jpg?70|Source}}Displays the content in the source code format. If you are familiar with HTML, you will be able to edit here, in particular to solve formatting issues or insert embed codes.  If you are not familiar with HTML, it is definitely worth learning the basic principles and the code needed to resolve the most common issues.  To learn the basics, you can visit this [[https://www.w3schools.com/html/|HTML Tutorial]] resource.
 When you go into the source code this reveals a menu of 5 additional features, which we have not described here.
-{{:xerte-texteditor-accessibility.jpg?30 }}Provides an automated check for accessibility. It does not guarantee to identify all accessibility issues, but will, for example identify issues round use of headings and paragraphing to optimise effective screen-reading.
+{{:xerte-texteditor-accessibility.jpg?30|Check Accessibility}}Provides an automated check for accessibility. It does not guarantee to identify all accessibility issues, but will, for example identify issues round use of headings and paragraphing to optimise effective screen-reading.
-{{:xerte-texteditor-pasteastext.jpg?30 }}Pastes copied text as unformatted text.  This is generally a better option than pasting from Word (see below).
+{{:xerte-texteditor-pasteastext.jpg?30|Paste as plain text (Ctrl+Shift+V)}}Pastes copied text as unformatted text.  This is generally a better option than pasting from Word (see below).
-{{:xerte-texteditor-pasteasword.jpg?30 }}Pastes text copied from Word and preserves the formatting.
+{{:xerte-texteditor-pasteasword.jpg?30|Paste from Word}}Pastes text copied from Word and preserves the formatting.
-{{:xerte-texteditor-find.jpg?30 }}Search for a specific word or string of characters.
+{{:xerte-texteditor-find.jpg?30|Find}}Search for a specific word or string of characters.
-{{:xerte-texteditor-replace.jpg?30 }}Search for a specific word or string of characters, and replace it with with another word or string of characters.
+{{:xerte-texteditor-replace.jpg?30|Replace}}Search for a specific word or string of characters, and replace it with with another word or string of characters.
-==== Second row ====
+==== Group 2 ====
-{{:xerte-texteditor-row2.jpg|Second row of toolbar}}
+{{toolbar_z.jpg?600&direct}}
-{{:playground:toolbar_z.jpg?direct&400|}}
+{{:xerte-texteditor-ruby.jpg?30|Phonetic Guide / Ruby Text}}Adds "ruby text", typically phonemic transcriptions displayed in small letters just above the text they refer to.
-{{:xerte-texteditor-ruby.jpg?30 }}Adds "ruby text", typically phonemic transcriptions displayed in small letters just above the text they refer to.
+{{highlight_icon.jpg?30|Marked Text}}:!: **New in 3.14**, this **Marked Text** button allows sections of text to be highlighted in an accessible way. When background colours alone are used to give text a highlighted appearance, this information is not described by screen readers. Using the **Marked Text** button for highlights will allow screen readers to announce sections of text as highlighted.
-{{:xerte-texteditor-copyformatting.jpg?30 }}Copies formatting from selected text, which can then be applied to another section of text.
+{{:xerte-texteditor-copyformatting.jpg?3|Copy Formatting (Ctrl+Shift+C)}}Copies formatting from selected text, which can then be applied to another section of text.
-{{:xerte-texteditor-removeformatting.jpg?30 }}Removes formatting from selected text.
+{{:xerte-texteditor-removeformatting.jpg?30|Remove Format}}Removes formatting from selected text.
-{{:xerte-texteditor-addlink.jpg?30 }}Adds a link to a URL or email address, which can appear in the same window, a new window, or (if the destination page permits) opens in a lightbox.
+{{:xerte-texteditor-addlink.jpg?30|Link (Ctrl+K)}}Adds a link to a URL or email address, which can appear in the same window, a new window, or (if the destination page permits) opens in a lightbox.
-{{:xerte-texteditor-removelink.jpg?30 }}Removes a link.
+{{:xerte-texteditor-removelink.jpg?30|Unlink}}Removes a link.
-{{:xerte-texteditor-pagelink.jpg?30 }}Adds a link to another page in the Xerte project.
+{{:xerte-texteditor-pagelink.jpg?30|Xerte Page Link}}Adds a link to another page in the Xerte project.
 \\
-==== Third row ====
+==== Group 3 ====
 {{:xerte-texteditor-row3.jpg |Third row of toolbar.}} \\  \\
-{{:xerte-texteditor-styles.jpg?100 }}Adds styles to the selected text (e.g. speech bubbles, panels, or side-highlighting etc.) and is a useful option for formatting text quickly, and it is worth experimenting with.
+{{:xerte-texteditor-styles.jpg?100|Formatting Styles}}Adds styles to the selected text (e.g. speech bubbles, panels, or side-highlighting etc.) and is a useful option for formatting text quickly, and it is worth experimenting with.
-{{:xerte-texteditor-format.jpg?100 }}Formats the selected text as a normal (paragraph text) or as a heading.
+{{:xerte-texteditor-format.jpg?100|Paragraph Format}}Formats the selected text as a normal (paragraph text) or as a heading.
-{{:xerte-texteditor-font.jpg?100 }}Changes the font type.
+{{:xerte-texteditor-font.jpg?100|Font Name}}Changes the font type.
-{{:xerte-texteditor-size.jpg?100 }}Changes the font size.
+{{:xerte-texteditor-size.jpg?100|Font Size}}Changes the font size.
 \\
-==== Fourth row ====
+==== Group 4 ====
 {{:xerte-texteditor-row4.jpg |Fourth row of toolbar.}} \\
-{{:xerte-texteditor-fontcolourjpg.jpg?30 }}Changes the colour of the font for selected text.
+{{:xerte-texteditor-fontcolourjpg.jpg?30|Text Colour}}Changes the colour of the font for selected text.
-{{:xerte-texteditor-backgroundcolour.jpg?30 }}Changes the colour of the background to selected text.
+{{:xerte-texteditor-backgroundcolour.jpg?30|Background Colour}}Changes the colour of the background to selected text.
-{{:xerte-texteditor-expand.jpg?30 }}Maximises the text editor so it fills the entire window.
+{{:xerte-texteditor-expand.jpg?30|Maximise}}Maximises the text editor so it fills the entire window.
-{{:xerte-texteditor-blocks.jpg?30 }}Shows Blocks which highlights the HTML used to build the page.  Can be helpful for those who understand the underlying HTML source code.
+{{:xerte-texteditor-blocks.jpg?30|Show Blocks}}Shows Blocks which highlights the HTML used to build the page.  Can be helpful for those who understand the underlying HTML source code.
-{{:xerte-texteditor-addimage.jpg?30 }}Embeds either an image on another website (via a URL) or an image that you upload to the Media Browser.
+{{:xerte-texteditor-addimage.jpg?30|Image}}Embeds either an image on another website (via a URL) or an image that you upload to the Media Browser.
-{{:xerte-texteditor-addmedia.jpg?30 }}Embeds media content from a supported site (e.g. YouTube, Vimeo, Flickr).
+{{:xerte-texteditor-addmedia.jpg?30|Embed Media from External Sites}}Embeds media content from a supported site (e.g. YouTube, Vimeo, Flickr).
-{{:xerte-texteditor-insertcodesnippet.jpg?30 }}Enables you to add code snippet, and when a programming language is chosen, it displays in the formatting style of that language.
+{{:xerte-texteditor-insertcodesnippet.jpg?30|Insert Code Snippet}}Enables you to add code snippet, and when a programming language is chosen, it displays in the formatting style of that language.
-{{:xerte-texteditor-fontawesome.jpg?30 }}Inserts Font Awesome characters.
+{{:xerte-texteditor-fontawesome.jpg?30|Insert Font Awesome}}Inserts Font Awesome characters.
-{{:xerte-texteditor-insertsound.jpg?30 }}Embeds audio either from another website (via a URL) or uploaded as MP3 into Media Browser.
+{{:xerte-texteditor-insertsound.jpg?30|Insert HTML5 Audio}}Embeds audio either from another website (via a URL) or uploaded as MP3 into Media Browser.
-{{:xerte-texteditor-recordaudio.jpg?30 }}Enables you to record audio and deploy it, all within Xerte.
+{{:xerte-texteditor-recordaudio.jpg?30|Record Audio}}Enables you to record audio and deploy it, all within Xerte.
-{{:xerte-texteditor-maths.jpg?30 }}Creates mathematical formulae, in LaTeX, AsciiMath or MathML.
+{{:xerte-texteditor-maths.jpg?30|Math}}Creates mathematical formulae, in LaTeX, AsciiMath or MathML.
-{{:xerte-texteditor-flash.jpg?30 }}This feature is deprecated and is not present in the toolbar from version 3.13. **New in 3.13**.
+{{:xerte-texteditor-flash.jpg?30}}This feature is deprecated and is not present in the toolbar from version 3.13. **New in 3.13**.
-{{:xerte-texteditor-inserttable.jpg?30 }}Inserts a non-interactive table.
+{{:xerte-texteditor-inserttable.jpg?30|Table}}Inserts a non-interactive table.
-{{:xerte-texteditor-horizline.jpg?30 }}Inserts a horizontal line across the page or panel.
+{{:xerte-texteditor-horizline.jpg?30|Insert Horizontal Line}}Inserts a horizontal line across the page or panel.
-{{:xerte-texteditor-specialcharacter.jpg?30 }}Inserts a special character (e.g. fractions, European language characters with accents)
+{{:xerte-texteditor-specialcharacter.jpg?30|Insert Special Character}}Inserts a special character (e.g. fractions, European language characters with accents)
-{{:xerte-texteditor-iframe.jpg?30 }}Inserts an iframe, which allows permissable web content to be displayed inside the Xerte page.
+{{:xerte-texteditor-iframe.jpg?30|IFrame}}Inserts an iframe, which allows permissable web content to be displayed inside the Xerte page.
-{{:xerte-texteditor-smiley.jpg?30 }}Inserts an emoticon/smiley/sticker.\\  \\
+{{:xerte-texteditor-smiley.jpg?30|Emoji List}}Inserts an emoticon/smiley/sticker.\\  \\
-==== Bottom Row ====
+==== Group 5 ====
 {{:xerte-texteditor-row5.jpg |Bottom row of toolbar.}}\\  \\  \\  {{:xerte-texteditor-columns.jpg?30 }}Puts the selected text into columns.
-{{:xerte-texteditor-blockquote.jpg?30 }}Puts the selected text into quotation marks.
+{{:xerte-texteditor-blockquote.jpg?30|Block Quote}}Puts the selected text into quotation marks.
-{{:xerte-textedior-lefttoright.jpg?30 }}Produces text left to right (default for European language).
+{{:xerte-textedior-lefttoright.jpg?30|Text direction from left to right}}Produces text left to right (default for European language).
-{{:xerte-textedior-lefttoright.jpg?30 }}Produces text right to left (e.g. for Arabic).
+{{:xerte-textedior-lefttoright.jpg?30|Text direction from right to left}}Produces text right to left (e.g. for Arabic).
-{{:xerte-text-editor-setlanguage.jpg?30 }}Sets language.
+{{:xerte-text-editor-setlanguage.jpg?30|Set Language}}Sets language.
 {{tag>pagetype all_pages}}