Extension/VisualEditor

in real Helpdesk!

done
VisualEditor is a visual editing tool for wiki pages. It allows page content to be edited without using wikitext. BlueSpice uses a customized version of the MediaWiki VisualEditor extension. With VisualEditor, editors can format text, structure page content, insert links and media, and add other content to wiki pages.

VisualEditor overview

Numbered annotations for the menu items in the editor toolbar

VisualEditor

The VisualEditor is optimized for editing wiki pages. Important characteristics and functions are:

1. Close page without saving: Close the editor without saving your changes. A confirmation dialog allows you to cancel or discard the changes.
2. Undo and redo changes: Undo and redo your most recent changes.
3. Page structure: Apply heading levels to structure the page.
4. Text formatting: Format text using options such as bold, italic, superscript, subscript, or text color.
5. Links: Add links to wiki pages or external websites.
6. Lists: Create numbered lists, bulleted lists, or task lists.
7. Insert: Insert images, files, tables, templates, comments, galleries, formulas, status badges, and other special content.
8. Page layouts: Add a predefined layout to structure page content.
9. Special characters: Insert characters that are not available on your keyboard.
10. Mentions: Mention other users on a wiki page.
11. Content droplets: Insert predefined content elements. For more information, see Content droplets.
12. Page options: Change page settings and access additional page information.
13. Switch between edit modes: Switch between visual editing and source editing.
14. Save the page: Save your changes and add an optional summary to the version history. You can also mark the edit as minor.

Text editing

Menu in text editing with the icon of the AI editing assistant

Menu in text editing

When text is selected in VisualEditor, a context menu appears with options for formatting the selected text and adding links. Available formatting options include bold, italic, and text color. The context menu also provides access to the AI editing assistant.

Text formatting inspector showing color choices

Applying text color

Switching between edit modes

When creating or editing a page, VisualEditor opens by default. Pages can be edited in source editing mode using '''Switch editor'''. Source editing mode allows editing the page directly using Wikitext syntax.

Open menu actions for switching between edit modes

Edit modes

NoteUnsaved changes cannot be restored using the ‘Undo’ button after switching between visual and source text editing!

Menu

The Editor menus provide tools for formatting and structuring wiki pages and for inserting additional content.

Text formatting

The text formatting tools are available in the VisualEditor toolbar.

Function	Description
Undo and redo Undo and redo actions	Use the Undo arrow to undo the last action. Use the Redo arrow to restore an undone action. The arrows are unavailable when there is no action to undo or redo.
Format paragraph File:Visualeditor-paragraph-formatting.png	The Format paragraph menu provides options for applying heading levels and paragraph styles to the current paragraph. If a page contains more than three headings, VisualEditor automatically displays a table of contents. When editing a table, the available paragraph options depend on whether the cursor is in a content cell or a header cell. alternative-text=VisualEditor-paragraph2 alternative-text=VisualEditor-paragraph2
Style text File:Visualeditor-character-formatting.png	The following additional options are available in the text formatting menu Text formatting The Style text menu provides formatting options for selected text: Bold Italic Superscript Subscript Computer code: Displays the selected text as computer code. Strikethrough Underline Big: Increases the text size. Small: Decreases the text size. Language: Sets the language and text direction, such as left-to-right or right-to-left, for the selected text. Center align: Centers the selected paragraph. Indent: Indents the selected paragraph. (Note: Multiple indentation is only possible via the source text). Text color: Opens the color options for changing the color of the selected text. Remove: Removes all formatting from the selected text. If no text is selected, the formatting is applied at the current cursor position. For more information, see the VisualEditor user guide.
Insert link File:Visualeditor-insert-link.png	The Insert link option provides the following link types: Wiki link: Links to another page in the current wiki or to a page in another wiki in the BlueSpice Galaxy. External link: Links to a page on an external website. If no text is selected before inserting the link, a numbered link is inserted: [1] Link to file: Links to a file description page in the wiki. To edit an existing link, select the link to open the link options. When editing a link in a table cell, double-click the cell first, then select the link.
Structure File:Visualeditor-structure-options.png	The Structure menu provides options for creating: unordered lists ordered lists Task lists To add a paragraph break or image within a list item, press Shift+Enter. This keeps the content in the same list item. To create numbered lists with multiple levels, such as 1, 1.1, and 1.1.1, additional CSS must be added to MediaWiki:Common.css. See numbering ordered lists for more information. The following additional options are available in the structure menu Structure menu

Insert special content

Use the Insert (+) menu to add media, templates, tables, references, and other special content to a page.

Insert menu button

Insert menu

Function	Description
Images and media	Insert images, files, Office documents, and videos. See Insert images and Insert files. JPG/JPEG, PNG, GIF, and PDF files can be displayed with a preview. File formats without preview support, such as Microsoft Office files, are inserted as links.
Template	Insert a template into the page.
Table	Insert and edit tables.
Comment	Insert a comment that is visible only in edit mode. Comments can be added anywhere on the page and cannot be formatted.
Exclude from translation	Exclude selected content from the translation process when TranslationTransfer is enabled. Adds the tag set <translation:ignore>text</translation:ignore>
Inline excerpt
Code block	Insert formatted code examples. Code blocks preserve the formatting of the code and can be copied to the clipboard.
Exclude content in PDF	Exclude selected content from PDF output.
Gallery	Display multiple images as a gallery.
Tabber	Display content in tabs.
Tabber (transclusion)	Display content from other wiki pages in tabs.
Your signature	Insert the current user's signature, including the user name and timestamp.
Chemical formula	Insert and display a chemical formula.
Math formula	Insert and display a mathematical formula.
Status badge	Insert a status badge into the page.
References list	Insert a <references /> tag at the selected location. References up to this point are displayed there instead of at the end of the page. Remaining references are still displayed at the end of the page.
Soft hyphen	Insert a soft hyphen into a long word. The hyphen is displayed only when the word needs to wrap at the end of a line.
Line break	Insert an explicit line break.
Basic reference	Create a footnote reference.
Re-use reference	Re-use an existing footnote reference at another location on the page.

For more information, see the VisualEditor user guide.

Page layouts

Arrange page content in columns. Select the number of columns and, optionally, a narrow first or last column. Several layout styles are available, including no styling, card, and divider.

Special characters

Select special characters that are not available on the keyboard. To close the panel, select the Special characters button again.

"Special characters" action

Page options

The Options menu in the VisualEditor provides additional editing functions.

VisualEditor options

Function	Description
Lock page File:Visualeditor-lock-page.png	Lock the page from editing to prevent changes to its content.
Options File:Visualeditor-options-menu.png	Open the page options dialog to view and change available page settings.
Categories File:Visualeditor-categories.png	Assign the page to one or more. The page then appears on the corresponding category pages.
Page settings File:Visualeditor-page-settings.png	Page redirection: Redirect the page to another wiki page. Show Table of Contents: Control whether a table of contents is displayed on the page. By default, a table of contents is shown when the page contains more than three headings.
Advanced settings File:Visualeditor-advanced-settings.png	Let this page be indexed by search engines: Allow or prevent indexing by public search engines. This setting does not affect the wiki's internal search. Show a tab on this page to add a new section: Display a tab for adding a new section to the page. Display title: Define the title displayed as the page heading. It can be found by the search. Title visibility: Hide the page title section. This option can be useful for main pages and portal pages. When the title section is hidden, the edit button is also hidden. The page can still be edited from the page tools. Chatbot indexing: Control whether the page content is available for indexing by the chatbot. Automatic workflow execution: Control whether workflows associated with the page are executed automatically.
Languages File:Visualeditor-languages.png	Access interlanguage links to wiki pages in other connected wikis. Depending on the skin, these links are displayed in different locations.
Templates used File:Visualeditor-templates-used.png	View the templates embedded in the page.
Syntax highlighting File:Visualeditor-syntax-highlighting.png	Display source code with syntax highlighting using the CodeMirror extension.
View as right-to-left File:Visualeditor-right-to-left.png	Display the page text from right to left. Select the option again to return to left-to-right text direction.
Find and replace File:Visualeditor-find-and-replace.png	Search for and replace words or characters in the page.
Leave feedback about this software File:Visualeditor-leave-feedback.png	Open a form to submit feedback about the software.
Keyboard shotcuts File:Visualeditor-keyboard-shortcuts.png	View the available VisualEditor keyboard shortcuts.
Toolbar search File:Visualeditor-toolbar-search.png	Search for functions and tools available in VisualEditor.
Read the user guide File:Visualeditor-user-guide.png	Link to the helpdesk.

Tips

Pasting content from your clipboard

Undo and redo actions in the editor toolbar

Undo

When pasting content copied from applications such as Microsoft Word or Microsoft Excel, unnecessary formatting can be transferred with the content. To avoid this, paste the content as plain text.
If the pasted content contains unwanted formatting, use Undo in VisualEditor to remove it. This is only possible if the page has not been saved and the editing mode has not been switched between visual and source editing.
To paste content as plain text, use Ctrl+Shift+V.

Keyboard shortcuts

Opened text formatting menu showing the available shortcuts

Menu items with shortcuts

Keyboard shortcuts can speed up frequently used editing tasks. For example:

• Ctrl+B: Apply or remove bold formatting.
• Ctrl+I: Apply or remove italic formatting.
• Ctrl+K: Insert a link.
• Ctrl+M: Remove formatting from selected text.
  

Available keyboard shortcuts are displayed next to the corresponding functions in VisualEditor. To view the complete list, select Keyboard shortcuts in the Options menu.