Editing Modes

Editing Modes

This page covers a more detailed guide on using the Visual Editor and Source Editor.

---

Visual Editor

Iskomunidad provides an easy and user-friendly way to create and format your page without needing to write wiki code. It includes tools for formatting text, adding headings, inserting links and images, creating lists and tables, and organizing your content.

This step-by-step guide will walk you through the toolbar's features and explain how to use each tool to create a well-organized and informative page on Iskomunidad.

Visual Editor Toolbar

---

Headings

Allows you to change how the paragraph is formatted. There are several choices you can use in formatting your page.

Header options

Here are the example of what the selection would look like in your page.

Heading texts samples

---

Formatting

Pressing the "A" gives you a texts formatting menu. This toolbar provides various text formatting options, allowing you to make text bold or italic, add superscript or subscript, format text as computer code, apply strikethrough or underline, and adjust the text size to make it larger or smaller.

Text formatting menu

---

Linking Tool

The chain icon represents the Linking Tool, which allows you to add links to text on your page.

To create a link, highlight the text you want to turn into a link, then click the chain icon to open the link dialog box.

• Internal link: Search Iskomunidad for an existing page you want to link to.
• External link: Select the External site tab and paste the URL of the website you want to link to.

Once you have selected or entered the link, follow the dialog box instructions to apply it to your text.

Linking tool

---

Cite Menu

The Cite Menu is used to add inline citations (footnotes and references). All pages have access to basic reference formatting and the ability to reuse citations by using the Cite Menu.Linking tool

Cite menu and its dialog box

---

Lists

When making a list you can choose between a Bullet list or a Numbered list. The last two options allows you to decrease or increase the indentation level of your list items.

List selection in toolbox

---

Images and Media

To add Images and Media to your page, select the the option in the "Insert" or "+" icon in the toolbox menu.

insert option

A Media settings dialog box will open once you selected the "Images and media".

How to upload media.

1. Go to the "Upload" tab.
2. Click on "Select a file" or drag and drop the file into the dialog box.
3. Tick the checkbox beside the "This is my own work".
4. Click "Upload".

Photo upload

---

Table

To add a "Table" to your page, select the the option in the "Insert" or "+" icon in the toolbox menu.

This will insert a 4 by 4 table.To add Images and Media to your page, select the the option in the "Insert" or "+" icon in the toolbox menu.

table with title and sample data

You can add, move or delete a column or a row. To merge cells: Select the cells you want to merge, then click the "Merge cells" in the table menu.

To change the table's properties, click the "properties" and a dialog box will appear with the "Table Properties" options where you can select different options on how the table appears and behave.

Table properties dialog box

---

Comment

The "Comment" item (a speech balloon) allows you to insert comments that are not visible to readers; these comments can only be seen when in edit mode, where they are indicated by an exclamation mark icon.

Pressing on the exclamation mark icon allows you to edit or delete the comment.

inserting Comment

---

Gallery

The "Gallery" allows you to insert a gallery to the page. You can upload and select multiple images to feature in your page.

Gallery box

---

Chemical and Math Formula

To insert a complex Chemical or Math Formula you can use the "Chemical Formula" and "Math Formula" found in " "insert" or "+".

---

Code Block

The "Code Block" item allows you to insert code.

Code Block

This will show like:

#include<iostream>
int main(){
    std::cout<<"Hello World!";
    return 0;
}

---

Reference List

The "Reference list" open a dialog box that allows you to specify where references will be displayed to the reader.

---

Symbols

You can use the "Ω" icon to insert special characters and symbols.

---

Source Editor

The Source Editor lets you create and format pages using MediaWiki markup, also known as wikitext, instead of editing content through a visual toolbar.

Source Editor

---

Source Editor Toolbar

The Source Editor Toolbar contains most of the text formatting methods and some additional function that were not included in the main panel.

Source Editing Toolbar

---

Link

The chain icon represents the Linking Tool, which allows you to add links to text on your page.

A dialog box will show when you click on the icon.

Insert Link in Source Editing

This allows you to enter the URL of the link and specify the text that will appear on your page. You can also choose whether to link to an existing page within Iskomunidad (To a wiki page) or to a page on another website (To an external web page).

---

Media File Uploads

To upload a media file select the "Media" icon located on the right side of the "Link" icon.

The "Insert File" dialog box will appear. This allows you to manually enter the "Filename" of the media you want to use.

Insert file dialog box

Alternatively, you can click on the "Upload" button, located on the lower left side of the dialog box. This will show the "Upload File" dialog box where you can "Select a File" to upload.

File Selection for media upload

---

References

The book icon is for inserting references.

This inserts a <ref></ref> tag into your page, allowing you to add your reference between the opening and closing tags.

---

Advanced

The toolbar’s "Advanced" options provide additional tools for editing and organizing your page. These include formatting text, inserting headings and bullet points, adding code blocks, starting a new line, inserting media, creating page redirects, and inserting tables.

Advance Options on Source Editing Toolbar

---

Formatting Text

• The Bold item (B) bolds the selected text.
• The Italic item (I) italicizes the selected text.
• The Superscript item (x2) causes the selected text to appear smaller than surrounding text and to be slightly higher than the surrounding text.
• The Subscript item (x2) causes the selected text to appear smaller than surrounding text and to be slightly lower than the surrounding text.

---

Headings

Allows you to change how the paragraph is formatted. There are several choices you can use in formatting your page.

Headers

---

Lists

When using Source Editing, you can create lists using either of the following methods:

• Bulleted list: Place an asterisk (*) at the beginning of each item.
• Numbered list: Place a number sign (#) at the beginning of each item.

Alternatively, you can type your list items first, highlight them, and select the Lists option in the toolbar to automatically format them as a bulleted or numbered list.

---

Code Block

For inserting "Code Block" in Source editing you can use the <code></code> tag.

Alternatively, you can type your code first, highlight it, then select the "{ }" icon to format it as a code block.

---

Nowiki Tool

To display text, wiki syntax, or special characters as plain text without applying their formatting or effects in Source Editing, you can use the <nowiki></nowiki> tag and place the text between the opening and closing tags.

Alternatively, highlight the text you want to display as plain text, then click the Nowiki tool (the [[ ]] icon with a slash) in the toolbar to apply the formatting automatically.

---

Next Line

You can use the "Next Line icon (↵)" or us the <br> tag to insert a line break in your text. This will move your content to the next line without starting a new paragraph.

---

Gallery

The <gallery> tag allows you to display multiple images in a gallery format, with each image arranged in a grid. You can also add captions to describe each image.

How to use it:

1. Start the gallery by typing <gallery> on a new line.
2. Add each image on a separate line using the format File:Example.jpg|Caption.
3. Replace Example.jpg with the exact file name of the image uploaded to Iskomunidad.
4. Replace Caption with a short description of the image.
5. Close the gallery by typing </gallery> on a new line.

Example:

<gallery>

Up-logo.png|UP LOGO

Up-logo.png|Another UP LOGO

</gallery>

this will give you

• 
  UP LOGO
• 
  Another UP LOGO

---

Redirect

The #REDIRECT [[Target page name]] command is used to automatically redirect users from one page to another in Iskomunidad.

Replace "Target page name" with the title of the page you want users to be directed to. When someone opens the original page, they will automatically be taken to the target page.

Example: #REDIRECT [[How to Create a Page]] this will show as How to Create a Page

Note: The #REDIRECT [[Target page name]] command works only when it is the sole content of the page. If other content is included, the command may be interpreted as a numbered list instead of a redirect.

---

Table

To add a table select the table icon located in the insert section of the "Advance" options.

Insert options

Once you clicked on the table a dialog box will appear.

Table's dialog box in source editing

This will give you the option to modify the number of rows and columns for your table.

---

Special Characters

"Special Characters" allows you to insert special symbols and characters that may not be available on your keyboard, such as accented letters, mathematical symbols, and other unique characters.

Source editing toolbar Special Character tab

---

Help

The Help tool is useful when working in Source Editing, as it provides a reference for available wiki syntax and formatting codes that you can use to edit and organize your page content.

Help in source editing toolbar

---

Search

The "Search icon" allows you to quickly find specific words or phrases within your page's source code. It can also be used to replace selected text with different words or phrases, making it easier to correct errors, update information, or make consistent changes throughout your content without having to search manually.

Search icon dialog box

---

Reload

The "Reload ↻" button refreshes the preview pane to display your most recent changes. This is useful for checking whether your edits are correctly reflected in the preview before saving your page.