Last edited one year ago
by Richard Heigl

Reference:VisualEditor and Templates download/Icon: Difference between pages

(Difference between pages)
VisualWikitext
No edit summary
 
No edit summary
 
Line 1: Line 1:
{{BSExtensionInfobox
{{Featurepage|featured=false|featuredesc=New template! Easily insert Bootstrap icons on a page.|featurestart=04/06/2022}}
|desc=Is an editor you can use without having to enter special markup.
<div class="downloadarea">
|status=stable
<span class="getButton">[[Media:HW-Icon.zip|Download]]</span>
|developer=MediaWiki
|type=MediaWiki
|edition=BlueSpice pro, BlueSpice free, BlueSpice Farm, BlueSpice Cloud
|compatible=MediaWiki
|category=Editor
|license=MIT
|docu=https://www.mediawiki.org/wiki/Extension:VisualEditor
|features='''VisualEditor''' is a WYSIWYG editor that enables you to edit wiki pages without having to enter special markup (like HTML, wiki tags). The editor menu bar resembles those of commonly used word processing programs.
The VisualEditor in BlueSpice is based on the extension [https://www.mediawiki.org/wiki/Extension:VisualEditor VisualEditor], but extends it with numerous functions:
* Support for many additional tags, such as diagrams.
* Simplification of dialogues, such as the upload dialogue.
* Easier integration of dynamic content and templates via the function ContentDroplets.
* Drag'n'drop of images and files into the text.
* Table functions, like background colours in cells.
* Exit the editor with a security check.
* Integration of the VisualEditor in other features such as in Forms or Social.


[[File:Icon-template.png|350x350px|alt=example of icons on a page]]</div>This template makes it possible to insert Bootstrap icons on a page.
==Importing the template==
The import file is included in the archive file ''HW-Icon.zip''. Unpack the zip file first.


==Technical information==
On the page ''Special:Import,'' follow these steps:
#'''''Select file''''' and choose HW-Icon.xml.
#'''Enter''' an ''interwiki prefix''. Since this field is required, simply add hw (for hallowelt).
#'''Keep''' the selection ''Import to default locations''.
#'''Click''' ''Upload file...'' .
The template is now available in your wiki.
==<span class="mw-headline" id="Pages_included_in_the_import">Pages included in the import</span>==
The xml import creates the following file in your wiki:
*Template:Icon
==<span class="mw-headline" id="Using_the_template">Using the template</span>==
#
#'''Find''' a bootstrap icon from the Bootstrap website at https://icons.getbootstrap.com/<nowiki/>{{Messagebox|boxtype=important|icon=|Note text=BlueSpice does not always include the latest version of bootstrap icons. [https://en.wiki.bluespice.com/w/skins/BlueSpiceDiscovery/resources/bootstrap/icons/index.html See the list of currently supported icons.]|bgcolor=}}'''Click''' on the icon you would like to use. The icon page shows you the class-name of the icon on the right side of the page:[[File:bootstrap-award-icon.png|alt=Bootstrap icon css-class|center|thumb|650x650px|Bootstrap icon css-class]]
#'''Highlight''' the class name (it has the format ''bi bi-myicon'') and '''copy''' it to your clipboard (ctrl+c).
#'''Go back''' to your wiki page.
# '''Enter'''  <code><nowiki>{{</nowiki></code> in visual editing mode at the cursor position where you want to insert the icon. The template editor opens.
# '''Copy''' the icon class from your clipboard:[[File:template-editor-icon.png|alt=Template editor|center|thumb|450x450px|Template editor]]
# '''Change''' the font size (optional) if you want the size to be different from the text surrounding it (e.g., from the size of a heading if the icon is placed in the heading or of the paragraph text if the icon is placed in the flow-text.  Smaller than text icons are usually sized no smaller than 0.85em and larger icons up to 2.5em.
#'''Color:''' If you want the color to be different from the surrounding text, you can specify any web color (e.g., a color name like blue or a hex-valuesuch as #0059b3 for a more specific blue). A list of web colors can be found at https://www.w3schools.com/colors/colors_picker.asp
#'''Vertical alignment:''' It should not be necessary to provide an alignment value. The standard is set to text-top and usually works in headings and in flow-text. If it looks a little off, you can try other vertical-alignment values, such as text-bottom. For a full list of possible values, see https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
#'''Click''' ''Apply changes''.


===Configuration===


Up to BlueSpice 3.2.x: The VisualEditor uses the Node.js service Parsoid. Because this service cannot be installed in some cases, this extension is deactivated by default. After successful installation and configuration, the visual editor can be activated as described.
The icon is now displayed on the page.


BlueSpice 4.1.x+: VisualEditor no longer requires Parsoid. Therefore, VisualEditor is activated by default.
[[File:bootstrap-icon-on page.png|alt=Inserted Bootstrap icon|center|thumb|450x450px|Inserted Bootstrap icon]]
 
===Rights (permissions)===
 
===Requirements===
 
VisualEditor requires [[Reference:BlueSpiceFoundation{{!}}BlueSpiceFoundation]].
 
{{Translation}}
|active=No
}}
{{wcagCheck
|wcagStatus=2-testing complete
|wcagCheckedfor=Authoring tool
|wcagTestdate=2022-08-04
|wcagLevel=AA
|wcagSupport=partially supports
|wcagWorkaround=yes
|wcagComments=*most important keyboard shortcuts (e.g., to save a page, to format elements) are available, but not for all elements;
**workaround1 : source editing
**workaround2: e.g. Chrome browser: alt+F opens browers menu -> s (to go to search function) -> search for "Insert" and focus on Insert menu
*high contrast mode toolbar icon support: starting mw 1.39 (see [https://phabricator.wikimedia.org/T180890 T180890]) - not yet applied in BlueSpice
|extensionType=core
|extensionFocus=editor
}}

Revision as of 10:43, 23 February 2023

Download

example of icons on a page

This template makes it possible to insert Bootstrap icons on a page.

Importing the template

The import file is included in the archive file HW-Icon.zip. Unpack the zip file first.

On the page Special:Import, follow these steps:

  1. Select file and choose HW-Icon.xml.
  2. Enter an interwiki prefix. Since this field is required, simply add hw (for hallowelt).
  3. Keep the selection Import to default locations.
  4. Click Upload file... .

The template is now available in your wiki.

Pages included in the import

The xml import creates the following file in your wiki:

  • Template:Icon

Using the template

  2. Find a bootstrap icon from the Bootstrap website at https://icons.getbootstrap.com/
    Important!BlueSpice does not always include the latest version of bootstrap icons. See the list of currently supported icons.

Click on the icon you would like to use. The icon page shows you the class-name of the icon on the right side of the page:

Bootstrap icon css-class
Bootstrap icon css-class
  1. Highlight the class name (it has the format bi bi-myicon) and copy it to your clipboard (ctrl+c).
  2. Go back to your wiki page.
  3. Enter {{ in visual editing mode at the cursor position where you want to insert the icon. The template editor opens.
  4. Copy the icon class from your clipboard:
    Template editor
    Template editor
  5. Change the font size (optional) if you want the size to be different from the text surrounding it (e.g., from the size of a heading if the icon is placed in the heading or of the paragraph text if the icon is placed in the flow-text. Smaller than text icons are usually sized no smaller than 0.85em and larger icons up to 2.5em.
  6. Color: If you want the color to be different from the surrounding text, you can specify any web color (e.g., a color name like blue or a hex-valuesuch as #0059b3 for a more specific blue). A list of web colors can be found at https://www.w3schools.com/colors/colors_picker.asp
  7. Vertical alignment: It should not be necessary to provide an alignment value. The standard is set to text-top and usually works in headings and in flow-text. If it looks a little off, you can try other vertical-alignment values, such as text-bottom. For a full list of possible values, see https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
  8. Click Apply changes.


The icon is now displayed on the page.

Inserted Bootstrap icon
Inserted Bootstrap icon
Retrieved from "https://en.wiki.bluespice.com/w/index.php?title=Reference:VisualEditor&oldid=5573"
No categories assignedEdit

Discussions