Loading...
 

The Wiki Page Editor

Tiki's Wiki Page Editor is a powerful tool that allows users to create and edit wiki pages within Tiki. The editor is designed to be user-friendly and intuitive, even for users who are not familiar with HTML or other web programming languages.
The Wiki Page Editor will allow you to do some or all of the following:

  • Add content
  • Accentuate your content using Wiki Syntax
  • Add HTML tags


The following sections explain how to do this.

The Editor

The following image shows the Wiki Page Editor.

Image

The buttons across the top of the page are almost identical except for Help which displays a help screen for Wiki syntax below the editor. See Help button below.
We can divide the Editor in three parts: The header, The body, and the footer.

1. The header

The header contains two bars: The upper bar and the lower bar

  • The upper bar : these icons provide a handy way of inserting Wiki Syntax. When one of these icons is selected, the Wiki syntax is inserted at the cursors position. The meaning of each of these icons is as follows:

    • Image Bold Text Will insert __text__ / replace text with the text to be made bold. See Wiki-Syntax Text

    • Image Italic Text Will insert ''text'' / replace text with the text to be italicized. See Wiki-Syntax Text

    • Image Underlined Text Will insert ===text=== / replace text with text to be underlined. See Wiki-Syntax Text

    • Image Strikethrough Will insert --text-- / replace text with text to be strikethrough. See Wiki-Syntax Text

    • Image Colored Text (or Foreground color) / Will insert ~~#FF0000:text~~ / replace FF0000 with a HTML color number and text with the text that you want colored. See Wiki-Syntax Text

    • Image Choose or upload images Will open a window to allow you either to upload an image or to choose one from your galleries
      Click to expand
      Click to expand

      Either you choose to upload an image or choose from your galleries, it will insert
      {img src= width= height= align= desc= link= } / add to the following: src= a URL to an image (mandatory) / width= a number in pixels / height= a number in pixels / align= (right, left, center) / desc= a description to be displayed / link= a URL to go to when clicked. See Wiki-Syntax Images

    • Image Insert Wiki Link Will open a modal
      Click to expand
      Click to expand

      In the form you can add the text to show (optional) and the link to the page
      And that will insert ((text)) if you did not provide the text to show or ((text|text to show)) / replace text with any existing or new page name, and text to show with the text you want to be shown as link text. See Wiki-Syntax Links

    • Image Insert External Link Will open a form in a modal where you can add:
      - The text to show as link text (optional)
      - The URL
      - And the relation (optional)
      Click to expand
      Click to expand

      Once filled, this will insert [http://example.com|text] / replace http://example.com with any URL and text with a description to be displayed. See Wiki-Syntax Links

    • Image Find Text will open modal for text searching
      Click to expand
      Click to expand

    • Image Text Replace will open the Text Replace form modal where you can enter a text to search for and enter the text to replace with
      Click to expand
      Click to expand

    • Image Insert Special Characters / Causes a Popup to be loaded for easy selection of some special characters.
      Click to expand
      Click to expand

      This does not provide access to every special character however. For a complete listing, see Wiki-Syntax Special Characters

    • Image Smileys adds the indicated Smiley to the page.

    • Image Help opens the Edit Help modal where you can find help about the Wiki Syntax and Plugins

    • Image Auto Save automatically saves your work, automatically saves your work

  • The lower bar: this bar contains icons for creating headings, aligning texts, creating lists, and more. Let's take a look at each one of them:
    • Image Headings (1,2,3,...) Will insert respectively ! text, !! text, !!! text for Heading 1, 2, 3, etc / replace text with the text to be considered as heading. See Wiki-Syntax Text

    • Image Align Center Will insert ::text:: / replace text with the text to be centered. See Wiki-Syntax Text

    • Image Bullet List Will insert * text / replace text with the text you want as list item. You can also create sub-items by adding additional asterisks before the text of the sub-list item.
      Bullet List are used to group related pieces of information together, making it easier for readers to scan and understand the content.

    • Image Numbered List Will insert # text / replace text with the text you want as list item. You can create sub-lists by adding additional pound signs before the text of the sub-list item, just like you would with a bullet list.

    • Image Page Break Will insert

List Slides