Redaktion (talk | contribs)
No edit summary
Tag: 2017 source edit
No edit summary
 
(32 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<bookshelf src="Book:User manual" />
<bookshelf src="Book:User manual" />
{{DISPLAYTITLE:Edit pages}}
{{DISPLAYTITLE:Edit pages}}
BlueSpice uses the MediaWiki extension VisualEditor as editing tool. This sophisticated editor supports all common edit tasks that you can expect in a wiki environment.


==What is VisualEditor?==
BlueSpice uses a slightly customized version of  the MediaWiki extension [[mediawikiwiki:Help:VisualEditor/User_guide|VisualEditor]] as editing tool.  This editor supports all common edit tasks that are useful in a wiki environment. You can refer to the official documentation for basic help. Here in the BlueSpice Helpdesk, we only give some hints and tips for using the editor.


<section begin="training" /><div class="training">
==What is the visual editor? ==
[[File:Manual:ve-EN.png|alt=VisualEditor|center|thumb|650x650px|VisualEditor]]


The visual editor is optimized for editing wiki pages. Important characteristics and functions are:
<section begin="training" /><div class="training">[[File:Manual:ve-EN.png|alt=Numbered annotations for the menu items in the editor toolbar|center|thumb|850x850px|Visual Editor]]The visual editor is optimized for editing wiki pages. Important characteristics and functions are:


#'''Page structuring''' with headings.
#'''Close page''' without saving
#Consistent '''text formatting'''.
#*Opens a dialogue to exit the page without saving the last changes. The ''Cancel'' button closes the dialogue without leaving the page. The ''Okay'' button exits the page and the changes are discarded.
#'''Linking''' of contents.
#'''Undo / redo changes'''
#'''Inserting special content''' (files/media, tables, templates, magic words)
#'''Page structuring''' with headings
#Adjusting '''page options'''.
#[[Manual:Extension/VisualEditor#Text formatting|'''Text''' '''formatting''' options]]
#[[Manual:Extension/VisualEditor/Insert links|'''Link''' to other pages]]
#'''List''' formatting
#'''[[Manual:Extension/VisualEditor#Insert special content|Insert special content]]''' (images / files, tables, templates, formulas)
#Select '''special characters'''
#Insert '''[[Manual:Extension/ContentDroplets|content droplets]]'''
#[[Manual:Extension/AtMentions|'''Mention''' another user]]
#[[Manual:Extension/VisualEditor#Page options|Select '''page options''']]
#[[Manual:Extension/VisualEditor#Switching between edit modes|Switch between '''edit modes'''.]]
#'''Save''' the page
#*Opens the dialogue for saving the page. A summary of the changes can be entered here for the version history (optional).
#*''This is a minor edit'' checkbox: By activating the checkbox, the version is marked as ‘minor’. This applies, for example, to correcting typos, adjusting formatting or rearranging text. The changes do not represent an actual change to the content.
</div><section end="training" />
</div><section end="training" />


==Text editing==  
=== Text editing ===
Typical text formatting options such as '''bold''', ''italics'', or <span class="col-turquoise">text color</span> are available as a context menu. When you highlight text, a menu with common formatting elements appears. For example, you can apply a different text color.
Typical text formatting options such as bold, italics, or text color are available as a context menu. When you highlight text, a menu with common formatting elements appears. For example, you can apply a different text color.<br />
<br />
[[File:BlueSpice_3.1_-_Notable_Changes_-_Text_colors.png|center|thumb|Applying text color|alt=Text formatting inspector showing color choices]]
[[File:BlueSpice_3.1_-_Notable_Changes_-_Text_colors.png|center|thumb|Applying text color|link=Special:FilePath/BlueSpice_3.1_-_Notable_Changes_-_Text_colors.png]]<br />


==Pasting content from your clipboard ==
===Switching between edit modes===
[[File:Manual:error.png|link=https://en.wiki.bluespice.com/wiki/File:Manual:error.png|thumb|112x112px|Undo]]
When creating or editing a page, the page usually loads in visual editing mode. If you are familiar with the formatting language of MediaWiki ("[[Manual:Wikitext|Wikitext]]"), you can easily switch to source editing mode using the  "Switch editor" menu item and edit your page content there:  
If you paste content from your clipboard (e.g., copied from MS Word or MS Excel), you usually also paste many unnecessary formatting tags from the original application. To avoid, this you should paste the content as plaintext.
[[File:Manual:editing.png|alt=open menu actions for switching between edit modes|center|250x250px|edit modes]]{{Textbox|boxtype=note|header=Note|text=Unsaved changes cannot be restored using the ‘Undo’ button after switching between visual and source text editing!|icon=yes}}


If you already pasted text which resulted in undesirable formatting, you can use the undo function in VisualEditor to remove the content again if you have not yet saved the page or switched between visual and source editing mode.
== Menu options ==
VisualEditor is optimized for editing web pages. That's why it has exactly the features that are often needed to create a wiki page. The consistent formatting of content  supports the readability of your wiki content.


To paste content as plain text instead, use the shortcut '''ctrl+shift+v'''.
===Text formatting===
==Shortcuts==
{| class="wikitable" style=""
If you want to apply multiple formatting options at the same time, shortcuts are often the quickest way. For example, to show text in bold and italic, highlight the text and press ''Ctrl+b'' (for "'''bold'''") and ''Ctrl+i'' (for "''italics''"). Even a link can be quickly inserted by pressing ''Ctrl+k''. Pressing ''Ctrl+b'' again will cancel the bold. Multiple formats can be removed after text selection with ''Ctrl+m''.
|-
! colspan="2" style="" |'''Text formatting'''
|-
| style="" |Undo function
[[File:Manual:error.png|frameless|112x112px|alt=undo actions ]]
| style="" |Left arrow: Undo last action (greyed out: there is no last action yet)
Right arrow: Restore last action (greyed out: there's nothing to restore yet)
|-
| style="" |Format Paragraph
[[File:Manual:paragraph.png|frameless|162x162px|]]
| style="" | Here text can be defined as heading or specific paragraph type. If you have more than three headings on a page, a table of contents is automatically displayed at the top of the page.
''Note:'' If you work in a [[Manual:Extension/VisualEditor/Insert tables|table]], the options will change accordingly (content cell and header cell):[[File:Manual:content cell.png|left|frameless|183x183px|alternative-text=VisualEditor-paragraph2]]<span /><br />
|-
| style="" |Style text
[[File:Manual:VE character formatting.png]]


All available keyboard shortcuts are marked accordingly in VisualEditor next to each menu item.
| style="" |[[File:Manual:Manual Extension VisualEditor 1748247619625.png|alt=The following additional options are available in the text formatting menu|thumb|440x440px|Text formatting]] There are ways to emphasise individual words, especially by using bold or italics.
The following additional options are available in the text formatting menu:
* ''Bold''
* ''Italic''
* ''Superscript''
* ''Subscript''
* ''Computer code'': <code>the text will be displayed as computer code</code>
* ''Strikethrough''
* ''Underline''
* ''Big''
* ''Small''
* ''Language''
* ''Text color'': different text colors can be selected via an inspector menu.
* ''Center align'': Text can be selected and centered paragraph by paragraph.
* ''Indent'': Text can be indented once (note: multiple indentation is only possible via the source text).
* ''Remove'': remove all formatting from the selected text


<br />
If no text has been selected before clicking on the "''''' A'''''" button, the text will be formatted from the current position of the cursor.
[[File:Manual:editing_tools.png|alt=Menu items with shortcuts|center|thumb|350x350px|Menu items with shortcuts]]
<br />


{{Messagebox|boxtype=note|Note text=For a list of all available shortcuts, click on "Keyboard shortcuts" in the Visual Editor help menu (the question mark menu item).}}
(More Info at https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide/en#Getting_started:_the_visual_editor's_toolbar)
|-
| style="" |Insert hyperlink
[[File:Manual:VE Insert hyperlink.png]]<span /><br />
| style="" |It is possible to [[Manual:Extension/VisualEditor/Insert links|insert 3 types of links]]:


==Inserting other content==
* ''Wiki link'': A link to a page in the same wiki. Here it is also possible to create an [[Manual:Extension/BlueSpiceInterWikiLinks|interwiki link]] to a page in another wiki.
Many typical page elements such as images, files and tables can be integrated into your page from the ''Insert'' menu.
* ''External link'': A link to external websites can be set here. If no text has been selected to be linked, the link is generated with a number: <code>[1]</code>
*File formats with a preview option: jpg/jpeg, png, gif, pdf
* ''Link to file'': A link to a file description page in the wiki can be set here. Please note that modern browsers do not open direct links to network paths. The Network path button is therefore rather obsolete.
*File formats without preview option are always inserted as links (e.g., Microsoft Office formats)
*Files can be connected with namespaces and categories
<section end="training-medien" />


If you want to learn more about inserting these elements, go to the following help pages:
To subsequently change the description of the hyperlink, click on the link to open the editing menu. In a table cell, you must first double-click on the cell and then click on the hyperlink again.
|-
| style="" |Structure
[[File:Manual:VE structure new.png]]


*[[Manual:Extension/VisualEditor/Images|Images]]
| style="" |Formats ordered and unordered lists, as well as ''[[Manual:Extension/SimpleTasks|task lists]]''.
* [[Manual:Extension/VisualEditor/Images|Files (PDF, xls, doc, ...)]]
If paragraph breaks or images need to be inserted within a bullet point, use <code>Shift+Enter</code> to avoid creating a new list item.
* [[Manual:Extension/VisualEditor/Tables|Tables]]
*[[Manual:Templates|Templates]]


==Wiki-specific content==
If you want to style numbered lists like 1, 1.1, 1.1.1, etc., you need to add some [[Numbering ordered lists|additional CSS instructions]] to the page ''MediaWiki:Common.css''.[[File:Manual:Manual Extension VisualEditor 1748248852329.png|alt=The following additional options are available in the structure menu|center|thumb|Structure menu]]
Some functions in the "Insert" menu are little known from traditional word processing, but are quite typical for working with a wiki. Therefore, they are briefly introduced here. Find more information on the help pages here in the helpdesk or at mediawiki.org:
|}


*'''Comment:''' Add comments to the page. These are only visible in the source code.
===Insert special content===
*'''[[mediawikiwiki:Help:VisualEditor/User_guide#Editing_media_galleries|Gallery]]:''' A simple picture gallery can support many process flows.
{| class="wikitable" style=""
*'''[[Manual:MagicWords|Magic word]]:''' Wiki features such as signature, word counter, category tree or even process diagrams with draw.io can be integrated as a "magic word".
|-
*'''Your signature:''' Only works on pages that allow signatures. Pages in the Namespace "Pages" are not included.
! colspan="2" style="" |'''Insert special content'''
*'''Codeblock:''' Programming code is displayed here in clean code blocks, optionally with line numbers.
|-
*'''References list:'''
| style="" |Insert menu (+)
*'''Chemical formula:''' The formula rendering uses an external service via Wikimedia's REST API.
[[File:Manual:Manual Extension VisualEditor 1748249104537.png|alt=Insert menu button|frameless]]
*'''[[mediawikiwiki:Help:VisualEditor/User_guide/en#Editing_mathematical_formulae|Math formula]]:''' An editor opens for entering a mathematical formula.
| style="" |Use the "insert" menu to insert various media (images, videos) and text formats:
|-
| style="" |Images and media
[[File:Manual:VE media.png]]
| style="" |Inserting [[Manual:Extension/VisualEditor/Insert images|pictures]], [[Manual:Extension/VisualEditor/Insert files|files]], direct links to Office documents and videos.


==Switching between edit modes==
*File formats with a preview option: jpg/jpeg, png, gif, pdf
When creating or editing a page, the page loads in visual editing mode. If you are familiar with the code language of MediaWiki ("Wikitext"), you can easily switch to source editing mode using the  "Switch editor" button:
*File formats without preview option are always inserted as links (e.g., Microsoft Office formats)
[[File:Manual:editing.png|link=https://en.wiki.bluespice.com/wiki/File:Manual:editing.png|alt=edit modes|center|250x250px|edit modes]]
 
==MediaWiki reference==
Since  VisualEditor is a standard MediaWiki extension, you can also read a [https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide/en|complete documentation of functionality on MediaWiki]. Here in the BlueSpice Helpdesk, we only give some hints and tips for using the editor.
 
== Hints and tips==
VisualEditor is optimized for editing web pages. That's why it has exactly the features that are often needed to create a wiki page. The consistent formatting of content  supports the readability of your wiki content.


===Text formatting===
([[mediawikiwiki:Help:VisualEditor/User_guide/en#Getting_Started:_The_VisualEditor-ToolbarHelp:VisualEditor/User_guide/en#Editing_images_and_other_media_files|Details on MediaWiki]])
{| class="wikitable"
|-
|-
! colspan="2" |'''Text formatting'''
| style="" |Template
[[File:Manual:VE template.png]]
| style="" |Include a [[Manual:Templates|template]] in the page.
|-
|-
|Undo function
| style="" |Table
[[File:Manual:error.png|frameless|112x112px|link=Special:FilePath/Manual:error.png]]
[[File:Manual:VE table.png]]
|Left arrow: Undo last action (greyed out: there is no last action yet)
| style="" |[[Manual:Extension/VisualEditor/Tables|Tables]] are an important tool for formatting tabular page content.
Right arrow: Restore last action (greyed out: there's nothing to restore yet)
|-
|-
|Format Paragraph
| style="" |Comment
[[File:Manual:paragraph.png|frameless|162x162px|link=Special:FilePath/Manual:paragraph.png]]
[[File:Manual:VE comment.png]]
|Here text can be defined as heading or specific paragraph type.
| style="" |Comments are not visible to readers, but only in edit mode. A comment can be inserted anywhere on a page. It is text-based and cannot be formatted.<span />
 
''Note:'' If you work in a [[Visual Editor / Tables|table]], the options will change accordingly (content cell and header cell):[[File:Manual:content cell.png|left|frameless|183x183px|alternative-text=VisualEditor-paragraph2|link=Special:FilePath/Manual:content_cell.png]]<br />
|-
|-
|Style text
| style="" |Your signature
[[File:Manual:VE character formatting.png|link=Special:FilePath/Manual:VE_character_formatting.png]]
[[File:Manual:VE your signature.png]]
 
| style="" |This option  allows to add your wiki signature (User name and timestamp) at any location in the page.
|If no text has been selected before clicking on the "''''' A'''''" button and on a button, the text will be formatted from the current position of the cursor.
([[mediawikiwiki:Help:VisualEditor/User_guide/en#Getting_Started:_The_VisualEditor-Toolbar|More Info at mediawiki.org/wiki/Help:VisualEditor/User_guide/en#Getting_Started:_The_VisualEditor-Toolbar]]])
|-
|-
|Insert hyperlink
| style="" |Code block
[[File:Manual:VE Insert hyperlink.png|link=Special:FilePath/Manual:VE_Insert_hyperlink.png]]<br />
[[File:Manual:VE code block.png|150x150px]]
|If no text was selected before the hyperlink dialog was opened, the link will be generated with a number:
| style="" |With code block various code examples can be entered, like e.g. in HTML syntax. The code is then displayed properly formatted a<span />nd can be copied directly to the clipboard.<pre>
[https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide/de#Erste_Schritte:_Die_VisualEditor-Werkzeugleiste]
<span style="color: red">red text</span>
To subsequently change the hyperlink description, just click on the link to open the edit menu. In a table, you may need to double-click the cell first and then click the hyperlink again.
</pre>
|-
|-
|cite
| style="" |Exclude content in PDF
[[File:Manual:VE cite.png|link=Special:FilePath/Manual:VE_cite.png]]
| style="" |Inserts tags around content in the source text, which are then not printed in the PDF. Only a short text can be entered here in visual editing mode. However, the start and end tags can be subsequently moved in the source text. This extends the area that is not exported to the PDF.
|The citation menu is used to insert footnote references (also called itemizations or footnotes) within the text.
|-
|-
| Structure
| style="" |[[Manual:Extension/TabberNeue|Tabber]]
[[File:Manual:VE structure new.png|link=Special:FilePath/Manual:VE_structure_new.png]]
| style="" |Allows text sections to be displayed in tabs.
 
|
|}
 
<br />
 
===Insert special content===
{| class="wikitable"
|-
|-
! colspan="2" |'''Paste Special Content'''
| style="" |[[Manual:Extension/TabberNeue|Tabber (transclusion)]]
| style="" |Allows the integration of other wiki pages in tabs.
|-
|-
|Insert menu
| style="" |Chemical formula
 
[[File:Manual:VE chemical formula.png]]
[[File:Manual:insert.png|frameless|102x102px|link=Special:FilePath/Manual:insert.png]]
| style="" |The formula rendering uses an external service via Wikimedia's REST API.<span /><br />
|Use the "insert" menu to insert various media (images, videos) and text formats:
|-
|-
|media
| style="" |Math formula
[[File:Manual:VE media.png|link=Special:FilePath/Manual:VE_media.png]]
[[File:Manual:VE math formula.png|150x150px]]
|Inserting pictures and videos
| style="" |It opens an editor for entering a mathematical formula.


([[mediawikiwiki:Help:VisualEditor/User_guide/en#Getting_Started:_The_VisualEditor-ToolbarHelp:VisualEditor/User_guide/en#Editing_images_and_other_media_files|Details on MediaWiki]]])
More information [[mediawikiwiki:Help:VisualEditor/User_guide/en#Editing_mathematical_formulae|on MediaWiki]]
|-
|-
|templates
| style="" |References list
[[File:Manual:VE template.png|link=Special:FilePath/Manual:VE_template.png]]
[[File:Manual:VE refernces list.png|150x150px]]<br />
|Include a [[Manual:Templates|template]] in the page.
| style="" |This menu item creates a <nowiki><references /></nowiki> tag at the location where it is inserted. The footnote references up to this point are then displayed at that location instead of the end of the page. Remaining footnotes in the page are still shown at the end of the page.
|-
|-
|tables
| style="" |Gallery
[[File:Manual:VE table.png|link=Special:FilePath/Manual:VE_table.png]]
[[File:Manual:VE gallery.png]]
|[[Manual:Extension/VisualEditor/Tables|Tables]] are an important tool for formatting tabular page content.
| style="" |Allows to display a set of images as a gallery. A simple picture gallery can support many process flows. Formatting examples for the different settings can be found at
|-
|comment
[[File:Manual:VE comment.png|link=Special:FilePath/Manual:VE_comment.png]]
|Comments are not visible to readers, but only in edit mode. A comment can be inserted anywhere on a page. The comment can be edited by clicking on it.
 
 


And this is what a comment looks like:[[File:Manual:comment.png|left|frameless|186x186px|alternativetext=VisualEditor-comment|link=Special:FilePath/Manual:comment.png]]<br />
[[mediawikiwiki:Help:Images#Gallery_syntax|mediawiki.org/wiki/Help:Images#Gallery_syntax]]
|-
|-
|Gallery
| style="" |Soft hyphen
[[File:Manual:VE gallery.png|link=Special:FilePath/Manual:VE_gallery.png]]
| style="" |A long word can be hyphenated here. The hyphen is only inserted in view mode if the word needs to be wrapped at the end of the line.
|
|-
|-
|Magic word
| style="" |Line break (br />)
[[File:Manual:VE magic word.png|link=Special:FilePath/Manual:VE_magic_word.png]]
| style="" |Explicit insertion of a line break.
|With a "magic word" you can include certain variables or so-called behavioral switches in your page. For example, you can display the word count: <!-- insert word count here -->
 
 
 
<br /> [[Manual:Extension/BlueSpiceInsertMagic|Learn more about the functionMagic Word]]
|-
|-
| Your signature
| style="" |Basic reference
[[File:Manual:VE your signature.png|link=Special:FilePath/Manual:VE_your_signature.png]]
| style="" |You can use this to create footnotes for scientific articles.
|This option can only be used in discussions. It allows to add a signature at any point of a discussion.
|-
|-
|Code block
| style="" |Re-use reference
[[File:Manual:VE code block.png|150x150px|link=Special:FilePath/Manual:VE_code_block.png]]
| style="" |Enables an existing footnote to be linked multiple times to different sections of text.
|With code block various code examples can be entered, like e.g. in HTML syntax. The code is then displayed properly formatted:
<br /><pre>
<span style="color: red">red text</span>
</pre>
|-
|-
|Refernces list
| style="" |Special Characters
[[File:Manual:VE refernces list.png|150x150px|link=Special:FilePath/Manual:VE_refernces_list.png]]
[[File:Manual:VE special characters.png]]
<br />
| style="" | Collection of international special characters.
|
Opens a panel to select special characters that are not available on your keyboard.
To close the panel, click the menu item again.
|-
|-
|Chemical formula
| style="" |[[Manual:Extension/AtMentions|Mentions]]
[[File:Manual:VE chemical formula.png|link=Special:FilePath/Manual:VE_chemical_formula.png]]
| style="" |Users can be mentioned directly on a wiki page. This can be done in combination with a [[Manual:Extension/SimpleTasks|task]].
|The formula rendering uses an external service via Wikimedia's REST API.<br />
|-
|-
|Math formula
| style="" |[[Manual:Extension/ContentDroplets|Content Droplets]]
[[File:Manual:VE math formula.png|150x150px|link=Special:FilePath/Manual:VE_math_formula.png]]
| style="" |Collection of the most important special content that can be used on a page.
|It opens an editor for entering a mathematical formula.
|}


[<nowiki/>[[https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide/en#Editing_mathematical_formulae|More|info on MediaWiki]]]
=== Page options ===
<span />
{| class="wikitable" style=""
|-
! colspan="2" style="" |'''Page options'''
|-
|-
|Special Characters
| style="" |Options menu[[File:Manual:tool.png|left|frameless|69x69px|alternative text=VisualEditor-options]]
[[File:Manual:VE special characters.png|link=Special:FilePath/Manual:VE_special_characters.png]]
 
<br />
| style="" |The options menu allows editing of all page settings. It is not
|
|}<br />Page options
{| class="wikitable"
|-
|-
! colspan="2" |'''Page Options'''
| style="" |Options
[[File:Manual:VE options.png]]
| style="" |This button allows the page settings and page information to be updated simultaneously within a dialog box. To change any page options on the page, you need to be in '''visual editing mode'''.
|-
|-
|Options menu[[File:Manual:tool.png|left|frameless|69x69px|alternative text=VisualEditor-options|link=Special:FilePath/Manual:tool.png]]
| style="" |Categories
 
[[File:Manual:VE categories.png]]
|The options menu allows editing of all page settings.
| style="" |Here, you assign the page to one or more  [[Manual:Creating and using categories|categories]] while in edit mode. The page will then appear accordingly on all linked category pages.
|-
|-
|Options
| style="" | Page Settings
[[File:Manual:VE options.png|link=Special:FilePath/Manual:VE_options.png]]
[[File:Manual:VE page settings.png]]
|This button allows the page settings and page information to be updated simultaneously within a dialog box.
| style="" |
* ''Page redirection:'' When the page is redirected, the content of the page is no longer displayed, but the target page is loaded directly.
* ''Show Table of Contents:'' By default, a table of contents is shown if a page has more than three headings. You can use this setting to always force or suppress the table of contents.
|-
|-
|Categories
| style="" |Advanced Settings
[[File:Manual:VE categories.png|link=Special:FilePath/Manual:VE_categories.png]]
[[File:Manual:VE advanced settings.png]]
|Here you assign the page to one or more categories  [[Manual:Creating and using categories|Categories]]. The page will appear accordingly on all linked category pages.
| style="" |
*''Let this page be indexed by search engines:'' Only applies to public search engines. The wiki's internal search is not affected.
*''Show a tab on this page to add a new section:'' Not supported in BlueSpice 4 Discovery skin.
*''Display title:'' Sets a title that is shown as page heading. It can be found by the search and is used in page lists created by [[SMW queries|Semantic MediaWiki]] inline queries.
*''Title visibility:'' This setting hides the entire title section of a page and is often applied on the main page or other portal pages of the wiki. If the title is not visible, the edit button is also not available. In this case, you can click on <code>...all actions > Edit</code> in the page tools.
|-
|-
|Page Settings
| style="" |Languages
[[File:Manual:VE page settings.png|link=Special:FilePath/Manual:VE_page_settings.png]]
[[File:Manual:languages.png]]
|Page redirection: When the page is redirected, the content of the page is no longer displayed, but the target page is loaded directly.
| style="" |Menu item to access interlanguage linksShows wiki pages on different wikis that are connected via Interlanguage links.  Depending on the wiki's skin, the links are shown in a specific location. In the BlueSpice 4 Discovery skin, the interlanguage links are shown in the top menu.




This setting can also be used to display or remove the table of contents at the top of the page. The table of contents is automatically generated by the headings on the page. When a page has more than three headings, the table of contents appears automatically by default.
​​​​​​​​​​​​​​​​​​​​​​​​[[mediawikiwiki:Help:Links#Interwiki_links|mediawiki.org/wiki/Help:Links#Interwiki_links]]
|-
| style="" |Templates used
[[File:Manual:VE templates used.png]]
| style="" |List the templates that are embedded on the page.
|-
|-
|Advanced Settings
| style="" |Syntax highlighting
[[File:Manual:VE advanced settings.png|link=Special:FilePath/Manual:VE_advanced_settings.png]]
| style="" |Displays the source code highlighted in colour using the [[Reference:CodeMirror|CodeMirror]] extension.
|
|-
|-
|Languages
| style="" |View as right-to-left
[[File:Manual:languages.png|link=Special:FilePath/Manual:languages.png]]
[[File:Manual:VE view as right-to-left.png]]
|
| style="" |Support for languages that are read from right to left. Clicking this button right-side formats the page text. Click again to set the text flush left.
|-
|-
|Templates used
| style="" |Find and replace[[File:Manual:VE find and replace.png]]
[[File:Manual:VE templates used.png|link=Special:FilePath/Manual:VE_templates_used.png]]
| style="" | Words or characters can be searched and replaced directly on the page. The "Undo" button can be used to cancel the change.
|
|-
|-
|View as right-to-left
| style="" |Leave feedback about this software
[[File:Manual:VE view as right-to-left.png|link=Special:FilePath/Manual:VE_view_as_right-to-left.png]]
| style="" |Opens a form for submitting feedback.
|Support for languages that are read from right to left. Clicking this button right-side formats the page text. Click again to set the text flush left.
|-
|-
|Find and replace
| style="" |Keyboard shotcuts
[[File:Manual:VE find and replace.png|link=Special:FilePath/Manual:VE_find_and_replace.png]]
| style="" |Link to the keyboard shortcuts
|Words or characters can be searched and replaced directly on the page. The "Undo" button can be used to cancel the change.
|-
| style="" |Toolbar search
| style="" |Opens a search field with which you can search in all Visual Editor options and tools.
|-
| style="" |Read the user guide
| style="" |Link to the helpdesk
|}
|}


==Troubleshooting: Visual editing is disabled ==
== Tips ==
 
=== Pasting content from your clipboard ===
[[File:Manual:error.png|thumb|112x112px|Undo|alt=Undo / redo actions in the editor toolbar]]
If you paste content from your clipboard (e.g., copied from MS Word or MS Excel), you usually also paste many unnecessary formatting tags from the original application. To avoid, this you should paste the content as plaintext.
 
If you already pasted text which resulted in undesirable formatting, you can use the undo function in VisualEditor to remove the content again if you have not yet saved the page or switched between visual and source editing mode.
 
To paste content as plain text instead, use the shortcut <code>Ctrl+Shift+v</code>.
 
=== Shortcuts ===
If you want to apply multiple formatting options at the same time, shortcuts are often the quickest way. For example, to show text in bold and italic, highlight the text and press <code>Ctrl+b</code> (for "'''bold'''") and <code>Ctrl+i</code> (for "''italics''"). Even a link can be quickly inserted by pressing <code>Ctrl+k</code>. Pressing <code>Ctrl+b</code> again will cancel the bold. Multiple formats can be removed after text selection with <code>Ctrl+m</code>.
 
All available keyboard shortcuts are marked accordingly in VisualEditor next to each menu item.<span />[[File:Manual:editing_tools.png|alt=opened text formatting menu showing the available shortcuts|center|thumb|350x350px|Menu items with shortcuts]]
For a list of all available shortcuts, click on "Keyboard shortcuts" in the Visual Editor [[Manual:Extension/VisualEditor#Page options|page options menu]].
 
=== Troubleshooting: Visual editing is disabled ===
If you only have the source editing option in your editor toolbar, please contact an administrator of your wiki. The following settings must be checked in this case:
If you only have the source editing option in your editor toolbar, please contact an administrator of your wiki. The following settings must be checked in this case:


*Global settings via the [[Manual:Extension/BlueSpiceConfigManager|configuration manager]]
*Global settings via the [[Manual:Extension/BlueSpiceConfigManager|configuration manager]]
*[[Manual:Extension/BlueSpiceNamespaceManager|Namespace manager]] settings
*[[Manual:Extension/BlueSpiceNamespaceManager|Namespace manager]] settings
<br />
<!-- Document Info --><!-- User story: As a maintainer, I'd like to understand all the features of VisualEditor so I can assist wiki authors in using them. --><!-- Information type: Concept -->


[[en:{{FULLPAGENAME}}]]
[[en:{{FULLPAGENAME}}]]
[[de:Handbuch:Erweiterung/VisualEditor]]
[[de:Handbuch:Erweiterung/VisualEditor]]
[[Category:Editing]]
[[Category:Editing]]

Latest revision as of 10:33, 26 May 2025


BlueSpice uses a slightly customized version of the MediaWiki extension VisualEditor as editing tool. This editor supports all common edit tasks that are useful in a wiki environment. You can refer to the official documentation for basic help. Here in the BlueSpice Helpdesk, we only give some hints and tips for using the editor.

What is the visual editor?

Numbered annotations for the menu items in the editor toolbar
Visual Editor
The visual editor is optimized for editing wiki pages. Important characteristics and functions are:
  1. Close page without saving
    • Opens a dialogue to exit the page without saving the last changes. The Cancel button closes the dialogue without leaving the page. The Okay button exits the page and the changes are discarded.
  2. Undo / redo changes
  3. Page structuring with headings
  4. Text formatting options
  5. Link to other pages
  6. List formatting
  7. Insert special content (images / files, tables, templates, formulas)
  8. Select special characters
  9. Insert content droplets
  10. Mention another user
  11. Select page options
  12. Switch between edit modes.
  13. Save the page
    • Opens the dialogue for saving the page. A summary of the changes can be entered here for the version history (optional).
    • This is a minor edit checkbox: By activating the checkbox, the version is marked as ‘minor’. This applies, for example, to correcting typos, adjusting formatting or rearranging text. The changes do not represent an actual change to the content.

Text editing

Typical text formatting options such as bold, italics, or text color are available as a context menu. When you highlight text, a menu with common formatting elements appears. For example, you can apply a different text color.

Text formatting inspector showing color choices
Applying text color

Switching between edit modes

When creating or editing a page, the page usually loads in visual editing mode. If you are familiar with the formatting language of MediaWiki ("Wikitext"), you can easily switch to source editing mode using the "Switch editor" menu item and edit your page content there:

open menu actions for switching between edit modes
edit modes
Note Unsaved changes cannot be restored using the ‘Undo’ button after switching between visual and source text editing!


Menu options

VisualEditor is optimized for editing web pages. That's why it has exactly the features that are often needed to create a wiki page. The consistent formatting of content supports the readability of your wiki content.

Text formatting

Text formatting
Undo function

undo actions

Left arrow: Undo last action (greyed out: there is no last action yet)

Right arrow: Restore last action (greyed out: there's nothing to restore yet)

Format Paragraph

Here text can be defined as heading or specific paragraph type. If you have more than three headings on a page, a table of contents is automatically displayed at the top of the page. Note: If you work in a table, the options will change accordingly (content cell and header cell):
alternative-text=VisualEditor-paragraph2
alternative-text=VisualEditor-paragraph2

Style text

The following additional options are available in the text formatting menu
Text formatting
There are ways to emphasise individual words, especially by using bold or italics.

The following additional options are available in the text formatting menu:

  • Bold
  • Italic
  • Superscript
  • Subscript
  • Computer code: the text will be displayed as computer code
  • Strikethrough
  • Underline
  • Big
  • Small
  • Language
  • Text color: different text colors can be selected via an inspector menu.
  • Center align: Text can be selected and centered paragraph by paragraph.
  • Indent: Text can be indented once (note: multiple indentation is only possible via the source text).
  • Remove: remove all formatting from the selected text

If no text has been selected before clicking on the " A" button, the text will be formatted from the current position of the cursor.

(More Info at https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide/en#Getting_started:_the_visual_editor's_toolbar)

Insert hyperlink


It is possible to insert 3 types of links:
  • Wiki link: A link to a page in the same wiki. Here it is also possible to create an interwiki link to a page in another wiki.
  • External link: A link to external websites can be set here. If no text has been selected to be linked, the link is generated with a number: [1]
  • Link to file: A link to a file description page in the wiki can be set here. Please note that modern browsers do not open direct links to network paths. The Network path button is therefore rather obsolete.

To subsequently change the description of the hyperlink, click on the link to open the editing menu. In a table cell, you must first double-click on the cell and then click on the hyperlink again.

Structure

Formats ordered and unordered lists, as well as task lists.

If paragraph breaks or images need to be inserted within a bullet point, use Shift+Enter to avoid creating a new list item.

If you want to style numbered lists like 1, 1.1, 1.1.1, etc., you need to add some additional CSS instructions to the page MediaWiki:Common.css.
The following additional options are available in the structure menu
Structure menu

Insert special content

Insert special content
Insert menu (+)

Insert menu button

Use the "insert" menu to insert various media (images, videos) and text formats:
Images and media

Inserting pictures, files, direct links to Office documents and videos.
  • File formats with a preview option: jpg/jpeg, png, gif, pdf
  • File formats without preview option are always inserted as links (e.g., Microsoft Office formats)

(Details on MediaWiki)

Template

Include a template in the page.
Table

Tables are an important tool for formatting tabular page content.
Comment

Comments are not visible to readers, but only in edit mode. A comment can be inserted anywhere on a page. It is text-based and cannot be formatted.
Your signature

This option allows to add your wiki signature (User name and timestamp) at any location in the page.
Code block

With code block various code examples can be entered, like e.g. in HTML syntax. The code is then displayed properly formatted and can be copied directly to the clipboard.
<span style="color: red">red text</span>
Exclude content in PDF Inserts tags around content in the source text, which are then not printed in the PDF. Only a short text can be entered here in visual editing mode. However, the start and end tags can be subsequently moved in the source text. This extends the area that is not exported to the PDF.
Tabber Allows text sections to be displayed in tabs.
Tabber (transclusion) Allows the integration of other wiki pages in tabs.
Chemical formula

The formula rendering uses an external service via Wikimedia's REST API.
Math formula

It opens an editor for entering a mathematical formula.

More information on MediaWiki

References list


This menu item creates a <references /> tag at the location where it is inserted. The footnote references up to this point are then displayed at that location instead of the end of the page. Remaining footnotes in the page are still shown at the end of the page.
Gallery

Allows to display a set of images as a gallery. A simple picture gallery can support many process flows. Formatting examples for the different settings can be found at

mediawiki.org/wiki/Help:Images#Gallery_syntax

Soft hyphen A long word can be hyphenated here. The hyphen is only inserted in view mode if the word needs to be wrapped at the end of the line.
Line break (br />) Explicit insertion of a line break.
Basic reference You can use this to create footnotes for scientific articles.
Re-use reference Enables an existing footnote to be linked multiple times to different sections of text.
Special Characters

Collection of international special characters.

Opens a panel to select special characters that are not available on your keyboard. To close the panel, click the menu item again.

Mentions Users can be mentioned directly on a wiki page. This can be done in combination with a task.
Content Droplets Collection of the most important special content that can be used on a page.

Page options

Page options
Options menu
alternative text=VisualEditor-options
alternative text=VisualEditor-options
The options menu allows editing of all page settings. It is not
Options

This button allows the page settings and page information to be updated simultaneously within a dialog box. To change any page options on the page, you need to be in visual editing mode.
Categories

Here, you assign the page to one or more categories while in edit mode. The page will then appear accordingly on all linked category pages.
Page Settings

  • Page redirection: When the page is redirected, the content of the page is no longer displayed, but the target page is loaded directly.
  • Show Table of Contents: By default, a table of contents is shown if a page has more than three headings. You can use this setting to always force or suppress the table of contents.
Advanced Settings

  • Let this page be indexed by search engines: Only applies to public search engines. The wiki's internal search is not affected.
  • Show a tab on this page to add a new section: Not supported in BlueSpice 4 Discovery skin.
  • Display title: Sets a title that is shown as page heading. It can be found by the search and is used in page lists created by Semantic MediaWiki inline queries.
  • Title visibility: This setting hides the entire title section of a page and is often applied on the main page or other portal pages of the wiki. If the title is not visible, the edit button is also not available. In this case, you can click on ...all actions > Edit in the page tools.
Languages

Menu item to access interlanguage linksShows wiki pages on different wikis that are connected via Interlanguage links. Depending on the wiki's skin, the links are shown in a specific location. In the BlueSpice 4 Discovery skin, the interlanguage links are shown in the top menu.


​​​​​​​​​​​​​​​​​​​​​​​​mediawiki.org/wiki/Help:Links#Interwiki_links

Templates used

List the templates that are embedded on the page.
Syntax highlighting Displays the source code highlighted in colour using the CodeMirror extension.
View as right-to-left

Support for languages that are read from right to left. Clicking this button right-side formats the page text. Click again to set the text flush left.
Find and replace Words or characters can be searched and replaced directly on the page. The "Undo" button can be used to cancel the change.
Leave feedback about this software Opens a form for submitting feedback.
Keyboard shotcuts Link to the keyboard shortcuts
Toolbar search Opens a search field with which you can search in all Visual Editor options and tools.
Read the user guide Link to the helpdesk

Tips

Pasting content from your clipboard

Undo / redo actions in the editor toolbar
Undo

If you paste content from your clipboard (e.g., copied from MS Word or MS Excel), you usually also paste many unnecessary formatting tags from the original application. To avoid, this you should paste the content as plaintext.

If you already pasted text which resulted in undesirable formatting, you can use the undo function in VisualEditor to remove the content again if you have not yet saved the page or switched between visual and source editing mode.

To paste content as plain text instead, use the shortcut Ctrl+Shift+v.

Shortcuts

If you want to apply multiple formatting options at the same time, shortcuts are often the quickest way. For example, to show text in bold and italic, highlight the text and press Ctrl+b (for "bold") and Ctrl+i (for "italics"). Even a link can be quickly inserted by pressing Ctrl+k. Pressing Ctrl+b again will cancel the bold. Multiple formats can be removed after text selection with Ctrl+m.

All available keyboard shortcuts are marked accordingly in VisualEditor next to each menu item.

opened text formatting menu showing the available shortcuts
Menu items with shortcuts

For a list of all available shortcuts, click on "Keyboard shortcuts" in the Visual Editor page options menu.

Troubleshooting: Visual editing is disabled

If you only have the source editing option in your editor toolbar, please contact an administrator of your wiki. The following settings must be checked in this case:



PDF exclude - start

To submit feedback about this documentation, visit our community forum.

PDF exclude - end