History: Wiki Page Editor

• «
• »

            ! 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.
^ ::{img src="display2039"}:: ^
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:

** {img src="display1950" width="22"} __Bold Text__ Will insert __~095~~095~text~095~~095~__ / replace __text__ with the text to be made bold. See __((Wiki-Syntax Text)) __

** {img src="display1951" width="22"} __Italic Text__ Will insert __~039~~039~text~039~~039~__ / replace __text__ with the text to be italicized. See __((Wiki-Syntax Text)) __

** {img src="display1952" width="22"} __Underlined Text__ Will insert __=~061~=text=~061~=__ / replace __text__ with text to be underlined. See __((Wiki-Syntax Text))__

** {img src="display1953" width="22"} __Strikethrough__ Will insert ~np~--text--~/np~ / replace __text__ with text to be strikethrough. See __((Wiki-Syntax Text))__

** {img src="display1954" width="22"} __Colored Text (or Foreground color)__ / Will insert __~126~~126~#FF0000:text~126~~126~__ / replace __FF0000__ with a HTML color number and __text__ with the text that you want colored. See __((Wiki-Syntax Text))__

** {img src="display2040" width="22"} __Choose or upload images__ Will open a window to allow you either to upload an image or to choose one from your galleries
++{img src="display2042" link="display2042" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}
++Either you choose to upload an image or choose from your galleries, it will insert
++__~123~img src= width= height= align= desc= link= ~125~__ / 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)) __

** {img src="display1958" width="22"} __Insert Wiki Link__ Will open a modal
++{img src="display2043" link="display2043" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}
++In the form you can add the text to show (optional) and the link to the page
++And that will insert __~040~(text)~041~__ if you did not provide the text to show or __~040~(text|text to show)~041~__ / 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))__

** {img src="display1960" width="22"} __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)
++{img src="display2044" link="display2044" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}
++Once filled, this will insert __ ~091~http:/~047~example.com|text~093~__ / replace http:/~047~example.com with any URL and text with a description to be displayed. See __((Wiki-Syntax Links)) __

** {img src="display1962" width="22"} __Find Text__ will open modal for text searching
++{img src="display2045" link="display2045" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

** {img src="display2046" width="22"} __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
++{img src="display2047" link="display2047" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

** {img src="display1966" width="22"} __Insert Special Characters__ / Causes a Popup to be loaded for easy selection of some special characters.
++{img src="display1967" link="display1967" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}
++This does not provide access to every special character however. For a complete listing, see __((Wiki-Syntax Special Characters))__

** {img src="display1968" width="22"} __Smileys__ adds the indicated Smiley to the page.

** {img src="display1969" width="22"} __Help__ opens the Edit Help modal where you can find help about the Wiki Syntax and Plugins

** {img src="display2049" width="22"} __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:
** {img src="display1971" width="84"} __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)) __

** {img src="display1972" width="22"} __Align Center__ Will insert __~np~::text::~/np~__ / replace __text__ with the text to be centered. See __((Wiki-Syntax Text))__

** {img src="display1973" width="22"} __Bullet List__ Will insert __~np~* text~/np~__ / 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.

** {img src="display1974" width="22"} __Numbered List__ Will insert __~np~# text~/np~__ / 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.

** {img src="display1975" width="22"} __Page Break__ Will insert __~np~...page...~/np~__
++The "Page break" feature in the Tiki Wiki Page Editor allows you to insert a break in your content, causing the content after the break to appear on a new page

** {img src="display1976" width="22"} __Horizontal Bar__ Will insert __~np~---~/np~__ in the editor and will display an horizontal bar on the page. See __((Wiki-Syntax Separators))__

** {img src="display1977" width="22"} __ Table Builder__ Will open the Table Builder modal:
++{img src="display2048" link="display2048" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

** {img src="display1979" width="22"} __Full-screen edit__ will open the edit in full page mode

!!! 2. The Body
This is where text, Wiki syntax and HTML code can be added. A Wiki page can look like - well - anything you want it to look like.

!!! 3. The Footer
* __Change description__ Here yo can write the change you made to the page

* __Preview__ Reloads the page with the changes displayed above the editor.

* __Save & Cancel Edit__ do exactly that.