2.2 Visual editing

No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
Line 21: Line 21:
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 <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.
<span /><br />
<span /><br />
[[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]]<span /><br />
[[File:BlueSpice_3.1_-_Notable_Changes_-_Text_colors.png|center|thumb|Applying text color]]<span /><br />


==Pasting content from your clipboard ==
==Pasting content from your clipboard ==
[[File:Manual:error.png|link=https://en.wiki.bluespice.com/wiki/File:Manual:error.png|thumb|112x112px|Undo]]
[[File:Manual:error.png|thumb|112x112px|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 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.


Line 68: Line 68:
==Switching between edit modes==
==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 ("[[Manual:Wikitext|Wikitext]]"), you can easily switch to source editing mode using the  "Switch editor" menu item and edit your page content there:  
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:  
[[File:Manual:editing.png|link=https://en.wiki.bluespice.com/wiki/File:Manual:editing.png|alt=edit modes|center|250x250px|edit modes]]
[[File:Manual:editing.png|alt=edit modes|center|250x250px|edit modes]]


==Hints and tips==
==Hints and tips==
Line 87: Line 87:
|-
|-
|Undo function
|Undo function
[[File:Manual:error.png|frameless|112x112px|link=Special:FilePath/Manual:error.png]]
[[File:Manual:error.png|frameless|112x112px|]]
|Left arrow: Undo last action (greyed out: there is no last action yet)
|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)
Right arrow: Restore last action (greyed out: there's nothing to restore yet)
|-
|-
|Format Paragraph
|Format Paragraph
[[File:Manual:paragraph.png|frameless|162x162px|link=Special:FilePath/Manual:paragraph.png]]
[[File:Manual:paragraph.png|frameless|162x162px|]]
| Here text can be defined as heading or specific paragraph type.
| Here text can be defined as heading or specific paragraph type.


''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]]<span /><br />
''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]]<span /><br />
|-
|-
|Style text
|Style text
[[File:Manual:VE character formatting.png|link=Special:FilePath/Manual:VE_character_formatting.png]]
[[File:Manual:VE character formatting.png]]


|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.
|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.
Line 104: Line 104:
|-
|-
|Insert hyperlink
|Insert hyperlink
[[File:Manual:VE Insert hyperlink.png|link=Special:FilePath/Manual:VE_Insert_hyperlink.png]]<span /><br />
[[File:Manual:VE Insert hyperlink.png]]<span /><br />
|If no text was selected before the hyperlink dialog was opened, the link will be generated with a number:
|If no text was selected before the hyperlink dialog was opened, the link will be generated with a number:
[https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide/de#Erste_Schritte:_Die_VisualEditor-Werkzeugleiste]
[https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide/de#Erste_Schritte:_Die_VisualEditor-Werkzeugleiste]
Line 128: Line 128:
|Insert menu
|Insert menu


[[File:Manual:insert.png|frameless|102x102px|link=Special:FilePath/Manual:insert.png]]
[[File:Manual:insert.png|frameless|102x102px]]
|Use the "insert" menu to insert various media (images, videos) and text formats:
|Use the "insert" menu to insert various media (images, videos) and text formats:
|-
|-
|Media
|Media
[[File:Manual:VE media.png|link=Special:FilePath/Manual:VE_media.png]]
[[File:Manual:VE media.png]]
|Inserting pictures and videos
|Inserting pictures and videos


Line 138: Line 138:
|-
|-
|Templates
|Templates
[[File:Manual:VE template.png|link=Special:FilePath/Manual:VE_template.png]]
[[File:Manual:VE template.png]]
|Include a [[Manual:Templates|template]] in the page.
|Include a [[Manual:Templates|template]] in the page.
|-
|-
|Tables
|Tables
[[File:Manual:VE table.png|link=Special:FilePath/Manual:VE_table.png]]
[[File:Manual:VE table.png]]
|[[Manual:Extension/VisualEditor/Tables|Tables]] are an important tool for formatting tabular page content.
|[[Manual:Extension/VisualEditor/Tables|Tables]] are an important tool for formatting tabular page content.
|-
|-
|Comment
|Comment
[[File:Manual:VE comment.png|link=Special:FilePath/Manual:VE_comment.png]]
[[File:Manual:VE comment.png]]
|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 />
|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 />
|-
|-
|Magic word{{Bsvs|bsvFrom=|bsvTo=4.2.x|bsvFeature=}}
|Magic word{{Bsvs|bsvFrom=|bsvTo=4.2.x|bsvFeature=}}
[[File:Manual:VE magic word.png|link=Special:FilePath/Manual:VE_magic_word.png]]
[[File:Manual:VE magic word.png]]
|With a "magic word" you can insert certain wiki tags in your page.  
|With a "magic word" you can insert certain wiki tags in your page.  
[[Manual:Extension/BlueSpiceInsertMagic|More about Magic words]]
[[Manual:Extension/BlueSpiceInsertMagic|More about Magic words]]
|-
|-
|Gallery
|Gallery
[[File:Manual:VE gallery.png|link=Special:FilePath/Manual:VE_gallery.png]]
[[File:Manual:VE gallery.png]]
|Allows to display a set of images as a gallery. Formatting examples for the different settings can be found at
|Allows to display a set of images as a gallery. Formatting examples for the different settings can be found at


Line 161: Line 161:
|-
|-
|Your signature
|Your signature
[[File:Manual:VE your signature.png|link=Special:FilePath/Manual:VE_your_signature.png]]
[[File:Manual:VE your signature.png]]
|This option  allows to add your wiki signature (User name and timestamp) at any location in the page.
|This option  allows to add your wiki signature (User name and timestamp) at any location in the page.
|-
|-
|Code block
|Code block
[[File:Manual:VE code block.png|150x150px|link=Special:FilePath/Manual:VE_code_block.png]]
[[File:Manual:VE code block.png|150x150px]]
|With code block various code examples can be entered, like e.g. in HTML syntax. The code is then displayed properly formatted:
|With code block various code examples can be entered, like e.g. in HTML syntax. The code is then displayed properly formatted:
<span /><br /><pre>
<span /><br /><pre>
Line 172: Line 172:
|-
|-
|Refernces list
|Refernces list
[[File:Manual:VE refernces list.png|150x150px|link=Special:FilePath/Manual:VE_refernces_list.png]]
[[File:Manual:VE refernces list.png|150x150px]]
<span /><br />
<span /><br />
|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.
|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.
|-
|-
|Chemical formula
|Chemical formula
[[File:Manual:VE chemical formula.png|link=Special:FilePath/Manual:VE_chemical_formula.png]]
[[File:Manual:VE chemical formula.png]]
|The formula rendering uses an external service via Wikimedia's REST API.<span /><br />
|The formula rendering uses an external service via Wikimedia's REST API.<span /><br />
|-
|-
|Math formula
|Math formula
[[File:Manual:VE math formula.png|150x150px|link=Special:FilePath/Manual:VE_math_formula.png]]
[[File:Manual:VE math formula.png|150x150px]]
|It opens an editor for entering a mathematical formula.
|It opens an editor for entering a mathematical formula.


Line 187: Line 187:
|-
|-
|Special Characters
|Special Characters
[[File:Manual:VE special characters.png|link=Special:FilePath/Manual:VE_special_characters.png]]
[[File:Manual:VE special characters.png]]
<span /><br />
<span /><br />
| Opens a panel to select special characters that are not available on your keyboard. To close the panel, click the menu item again.
| Opens a panel to select special characters that are not available on your keyboard. To close the panel, click the menu item again.
Line 195: Line 195:
! colspan="2" |'''Page Options'''
! colspan="2" |'''Page Options'''
|-
|-
|Options menu[[File:Manual:tool.png|left|frameless|69x69px|alternative text=VisualEditor-options|link=Special:FilePath/Manual:tool.png]]
|Options menu[[File:Manual:tool.png|left|frameless|69x69px|alternative text=VisualEditor-options]]


|The options menu allows editing of all page settings. It is not
|The options menu allows editing of all page settings. It is not
|-
|-
|Options
|Options
[[File:Manual:VE options.png|link=Special:FilePath/Manual:VE_options.png]]
[[File:Manual:VE options.png]]
|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'''.
|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
|Categories
[[File:Manual:VE categories.png|link=Special:FilePath/Manual:VE_categories.png]]
[[File:Manual:VE categories.png]]
|Here, you assign the page to one or more  [[Manual:Creating and using categories|categories]] while in edit mode.
|Here, you assign the page to one or more  [[Manual:Creating and using categories|categories]] while in edit mode.
|-
|-
| Page Settings
| Page Settings
[[File:Manual:VE page settings.png|link=Special:FilePath/Manual:VE_page_settings.png]]
[[File:Manual:VE page settings.png]]
| ''Page redirection:'' When the page is redirected, the content of the page is no longer displayed, but the target page is loaded directly.
| ''Page redirection:'' When the page is redirected, the content of the page is no longer displayed, but the target page is loaded directly.


Line 214: Line 214:
|-
|-
|Advanced Settings
|Advanced Settings
[[File:Manual:VE advanced settings.png|link=Special:FilePath/Manual:VE_advanced_settings.png]]
[[File:Manual:VE advanced settings.png]]
|
|
* ''Let this page be indexed by search engines:'' Only applies to public search engines. The wiki's internal search is not affected.
* ''Let this page be indexed by search engines:'' Only applies to public search engines. The wiki's internal search is not affected.
Line 222: Line 222:
|-
|-
|Languages
|Languages
[[File:Manual:languages.png|link=Special:FilePath/Manual:languages.png]]
[[File:Manual:languages.png]]
|[[File:interlanguage link.png|link=https://en.wiki.bluespice.com/wiki/File:interlanguage%20link.png|alt=Screenshot of the right-hand buttons fot he top menu bar with interlanguage menu item highlighted|thumb|Menu item to access interlanguage links]]Shows 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.
|[[File:interlanguage link.png|alt=Screenshot of the right-hand buttons fot he top menu bar with interlanguage menu item highlighted|thumb|Menu item to access interlanguage links]]Shows 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.




Line 229: Line 229:
|-
|-
|Templates used
|Templates used
[[File:Manual:VE templates used.png|link=Special:FilePath/Manual:VE_templates_used.png]]
[[File:Manual:VE templates used.png]]
|List the templates that are embedded on the page.
|List the templates that are embedded on the page.
|-
|-
|View as right-to-left
|View as right-to-left
[[File:Manual:VE view as right-to-left.png|link=Special:FilePath/Manual:VE_view_as_right-to-left.png]]
[[File:Manual:VE view as right-to-left.png]]
|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.
|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
|Find and replace
[[File:Manual:VE find and replace.png|link=Special:FilePath/Manual:VE_find_and_replace.png]]
[[File:Manual:VE find and replace.png]]
| Words or characters can be searched and replaced directly on the page. The "Undo" button can be used to cancel the change.
| Words or characters can be searched and replaced directly on the page. The "Undo" button can be used to cancel the change.
|}
|}

Revision as of 10:18, 20 April 2023


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?

VisualEditor
VisualEditor

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

  1. Page structuring with headings.
  2. Consistent text formatting.
  3. Linking of contents.
  4. Inserting special content (files/media, tables, templates, magic words)
  5. Adjusting page options.

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.

Applying text color

Pasting content from your clipboard

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.


Menu items with shortcuts
Menu items with shortcuts


Note:For a list of all available shortcuts, click on "Keyboard shortcuts" in the Visual Editor help menu (the question mark menu item).


Inserting other content

Many typical page elements such as images, files and tables can be integrated into your page from the Insert menu.

  • 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)

If you want to learn more about inserting these elements, go to the following help pages:

Wiki-specific content

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.
  • Gallery: A simple picture gallery can support many process flows.
  • 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.
  • Codeblock: Programming code is displayed here in clean code blocks, optionally with line numbers.
  • References list: Creates footnote references.
  • Chemical formula: The formula rendering uses an external service via Wikimedia's REST API.
  • Math formula: An editor opens for entering a mathematical formula.

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:

edit modes

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

In the text formatting menu, the following additional options are available when a text passage has been selected:

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).

Text formatting options
Text formatting options
Text formatting
Undo function

Manual:error.png

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

Manual:paragraph.png

Here text can be defined as heading or specific paragraph type. Note: If you work in a table, the options will change accordingly (content cell and header cell):
alternative-text=VisualEditor-paragraph2

Style text

Manual:VE character formatting.png

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.

(More Info at mediawiki.org/wiki/Help:VisualEditor/User_guide/en#Getting_Started:_The_VisualEditor-Toolbar])

Insert hyperlink

Manual:VE Insert hyperlink.png

If no text was selected before the hyperlink dialog was opened, the link will be generated with a number:

[1] 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.

Cite

Manual:VE cite.png

The citation menu is used to insert footnote references within the text.
Structure

Manual:VE structure new.png

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


Insert special content

Paste Special Content
Insert menu

Manual:insert.png

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

Manual:VE media.png

Inserting pictures and videos

(Details on MediaWiki])

Templates

Manual:VE template.png

Include a template in the page.
Tables

Manual:VE table.png

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

Manual:VE comment.png

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.
Magic word  -v4.2.x

Manual:VE magic word.png

With a "magic word" you can insert certain wiki tags in your page.

More about Magic words

Gallery

Manual:VE gallery.png

Allows to display a set of images as a gallery. Formatting examples for the different settings can be found at

mediawiki.org/wiki/Help:Images#Gallery_syntax

Your signature

Manual:VE your signature.png

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

Manual:VE code block.png

With code block various code examples can be entered, like e.g. in HTML syntax. The code is then displayed properly formatted:
<span style="color: red">red text</span>
Refernces list

Manual:VE refernces list.png

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.
Chemical formula

Manual:VE chemical formula.png

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

Manual:VE math formula.png

It opens an editor for entering a mathematical formula.

[[on MediaWiki]]

Special Characters

Manual:VE special characters.png

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

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

Manual:VE options.png

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

Manual:VE categories.png

Here, you assign the page to one or more categories while in edit mode.
Page Settings

Manual:VE page settings.png

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

Manual:VE advanced settings.png

  • 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.
    Screenshot of the "all actions" menu
    "all actions" Menu
Languages

Manual:languages.png

Screenshot of the right-hand buttons fot he top menu bar with interlanguage menu item highlighted
Menu item to access interlanguage links
Shows 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

Manual:VE templates used.png

List the templates that are embedded on the page.
View as right-to-left

Manual:VE view as right-to-left.png

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

Manual:VE find and replace.png

Words or characters can be searched and replaced directly on the page. The "Undo" button can be used to cancel the change.

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:



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