VisualEditor

Revision as of 16:47, 13 January 2020 by Mlink-rodrigue (talk | contribs)

What is VisualEditor?

One of the most important tools for inserting and formatting content in BlueSpice is its visual editor. This visual editor is based on the MediaWiki extension VisualEditor. With this sophisticated editor pages can be quickly and clearly filled with a variety of content.

When creating or editing a page, you're in visual edit mode right now. If you are familiar with the code language of MediaWiki ("WikiText"), you can easily switch over using the "Switch editor" button:
Manual:editing.png

Text editing

Typical text formatting such as bold, italics, or text color are already possible during text input. When you highlight text, you will see a mini menu with the most important formatting elements. With one click, the desired formatting can be selected. This is especially fast if you want to change the text color, for example: BlueSpice 3.1 - Notable Changes - Text colors.png

The mini menu appears only in the text flow, not when an entire paragraph is highlighted. When you select text within a bullet point, make sure that you select only the text itself and not the whole line. Otherwise, paragraph formatting will be selected "behind the scenes" and the mini menu will not appear.

If you want to apply multiple formats 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 the visual editor:

Manual:editing tools.png

Insert external content

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

If you want to learn more about inserting these elements, go to the appropriate help page:

Beyond your typical 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 page of MediaWiki:

  • Comment: Add comments to the page. These are only visible in the source code.
  • 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.
  • Gallery: A simple picture gallery can support many process flows.
  • Codeblock: Programming code is displayed here in clean code blocks, optionally with lines.
  • Itemization list:
  • Chemical formula:
  • Math formula: An editor opens for entering a mathematical formula. More info on MediaWiki.

MediaWiki Reference

Since the visual editor is a standard MediaWiki extension, you can also read a documentation of functionality on MediaWiki.

Here in the BlueSpice Helpdesk, we only give some hints and tips for using the editor.

Hints and Tips

The visual editor 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 by using VisualEditor greatly supports the readability of your wiki content.

The BlueSpice Editor offers the following options:

Text formatting

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):
screenshot: content cell

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 references (also called itemizations or footnotes) within the text.
Structure

Manual:VE structure new.png


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. The comment can be edited by clicking on it.


And this is what a comment looks like:
screenshot: comment

Gallery

Manual:VE gallery.png

Magic word

Manual:VE magic word.png

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:



Learn more about the functionMagic Word".

Overview of all Magic Words in the visual editor.

Your signature

Manual:VE your signature.png

This option can only be used in discussions. It allows to add a signature at any point of a discussion.
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

Chemical formula

Manual:VE chemical formula.png

Math formula

Manual:VE math formula.png

It opens an editor for entering a mathematical formula.

[info on MediaWiki]

Special Characters

Manual:VE special characters.png


Page options

Page Options
Options menu
screenshot
The options menu allows editing of all page settings.
Options

Manual:VE options.png

This button allows the page settings and page information to be updated simultaneously within a dialog box.
Categories

Manual:VE categories.png

Here you assign the page to one or more categories Categories. The page will appear accordingly on all linked category pages.
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.


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.

Advanced Settings

Manual:VE advanced settings.png

Languages

Manual:languages.png

Templates used

Manual:VE templates used.png

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 see code editing, please contact an administrator of your wiki. The following settings must be checked in this case:

  • Global settings via the configuration manager
  • Namespace management settings
  • Parsoid service on the server


Attachments

Discussions