Posted by JDPerezgonzalez on 08 Jul 2008 23:35, last edited by RobElliott on 10 Apr 2014 17:50
: editor
This page will give you more detailed information on how to edit pages by using Wikidot's editor. However, you will most probably find the editor to be quite straightforward and easy to learn.
Before proceeding, though, it may be of interest to you to know that there are three basic principles when using Wikidot's editor for editing your site:
- You can use the editor by way of clicking on the appropriate buttons. This will insert the corresponding syntax together with a self-selected description of the function of the button in blue. You need to delete this self-selected description only, substituting it with your own text.
- You can also write your text first, select it and, then, click on the button. This way, the editor will include the corresponding syntax as appropriate without deleting your text nor adding any self-selected text. This way you can edit part of your text as easy as if you were using Microsoft's Word or similar WYSIWYG word processor.
- You can also write the corresponding syntax directly, without using the editor's buttons. You will probably find yourself doing this as your proficiency with the editor grows, as this normally is a faster way of editing.
The Wikidot editor
You will find the following features at the top of your editor every time you edit a page in Wikidot:
1. The editor's first row
1.1. Headings
Clicking on the button Heading level 1 will insert the corresponding syntax for a Level 1 heading. However, positioning the mouse pointer on top of the button without clicking on it will open further heading levels from level 2 to level 6. Thus, you can choose the level you need among those. Wikidot's editor will insert the syntax for the appropriate heading together with a self-selected description (e.g. heading level 1). Substitute this self-selected description with your own typing.
In syntax form, you can achieve the different heading levels by typing '+':
- + Level 1 heading
- ++ Level 2 heading
- +++ Level 3 heading
- ++++ Level 4 heading
- +++++ Level 5 heading
- ++++++ Level 6 heading
1.2. Bold text
Clicking on the button Bold will insert the syntax for bold text together with a self-selected description. Substitute the self-selected description with your own typing.
Typing Ctrl b will also insert the syntax for bold text together with the self-selected description.
In syntax form, you can add bold text by typing your text between ** **:
- **your bold text here** will appear as your bold text here
1.3. Italics
Clicking on the button Italic will insert the syntax for italics together with a self-selected description. Substitute the self-selected description with your own typing.
Typing Ctrl i will also insert the syntax for italics together with the self-selected description.
In syntax form, you can add italics by typing your text between // //:
- //your text in italics here// will appear as your text in italics here
1.4. Underlining
Clicking on the button Underline will insert the syntax for underlined text together with a self-selected description. Substitute the self-selected description with your own typing.
Typing Ctrl u will also insert the syntax for underlining together with the self-selected description.
In syntax form, you can add underlines by typing your text between __ __:
- __your underlined text here__ will appear as your underlined text here
1.5. Strikethrough
Clicking on the button Strikethrough will insert the syntax for text stroked through together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can add through strokes by typing your text between -- --:
- --your stroke through text here-- will appear as your stroke through text here
1.6. Teletype text
Clicking on the button Teletype (monospaced) will insert the syntax for teletype (monospaced) text together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can add teletype text by typing your text between {{ }}:
- {{your teletype text here}} will appear as your teletype text here
1.7. Paragraph indentation
Clicking on the button Quote will insert the syntax for the indentation of paragraphs together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can add paragraph indentation by typing ">". You can increase indentation levels by typing further ">":
- > Level 1 indentation
- >> Level 2 indentation
- >>> Level 3 indentation
1.8. Superscript
Clicking on the button Superscript will insert the syntax for superscript together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can add superscript by typing your text between ^^ ^^:
- your ^^superscript^^ text here will appear as your superscript text here
1.9. Subscript
Clicking on the button Subscript will insert the syntax for subscript together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can add subscript by typing your text between ,, ,,:
- your ,,subscript,, text here will appear as your subscript text here
1.10. Literal text or raw text
Clicking on the button Raw text - escape parsing will insert the syntax for raw text together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can add raw text by typing your text between double @@ characters:
- your //sample// **text** ^^here^^ will then appear as your //sample// **text** ^^here^^ (instead of as your sample text here)
2. The editor's second row
2.1. Horizontal lines
Clicking on the button Horizontal will insert the syntax for a horizontal line across your page, visually creating sections.
In syntax form, you can add horizontal lines by typing four or more dashes:
- ------ will, thus, create a horizontal line across the page (similar to that used to separate information pertaining to the editor's first row from that separating information pertaining to the editor's second row.
2.2. Div block element
Check Wiki Syntax
2.3. Clear floats
Check Wiki Syntax
2.4. Tables
Clicking on the button Table wizard will insert the syntax for simple tables of your selected size. You can specified number of rows, number of columns, and whether you want the first raw to contain headers or not.
In syntax form, you can create simple tables by typing the cell contents between two vertical lines "|| ||" (these lines represent the left and right limits of each cell). Add more vertical lines in your line of text to create columns; add more vertical lines in next lines of text to create rows.
- || cell-1 || cell-2 || will, thus, create a table with two columns and one row (i.e. two cells). E.g.
cell-1 cell-2
- || cell-1 || cell-2 ||
- || cell-3 || cell-4 || will create a table with two columns and two rows (i.e. four cells). E.g.
cell-1 cell-2cell-3 cell-4
- ||~ header-1 ||~ header-2 ||
- || cell-3 || cell-4 || will add headings as appropriate. E.g.
header-1 header-2 cell-3 cell-4
2.5. Table of contents
Clicking on the button Table of contents will insert the syntax for a table of contents automatically made up from the information contained in your headings.
In syntax form, you can add tables of content by typing:
- [[toc]]
2.6. Link to an external webpage
Clicking on the button URL link will insert the syntax for creating a link to a webpage external to your site together with a self-selected description. The self-selected description will be used to type the word or words in your text (anchor text) that will open the desired website. However, don't forget to write the web address in the first part of the syntax, substituting www.example.com with the address of the target website.
In syntax form, you can add a link by typing:
- [http://target-web-address anchor-text] (e.g. [http://www.wikidot.com wikidot])
- http:…, https:…, ftp://… and similar locations can be used. Simply write the needed one as appropriate
- not all webpages start with www… Simply remember to write the correct page (double-check as required)
- if you want the link to open a webpage in a new window, start the syntax with an asterisk, as follows:
[*http://target-web-address anchor-text] (e.g. [*http://www.wikidot.com wikidot])
- you may find much easier to use the URL link wizard button
2.7. External link using the wizard
Clicking on the button URL link wizard will prompt you to add all the required information and functions necessary to create and activate your link. It can make your life a bit easier when starting out.
2.8. Internal link to a page in your site
Clicking on the button Page link will insert the syntax for creating a link to page within your site together with a self-selected description. Substitute this self-selected description with the name of your page.
In syntax form, you can create an internal link by typing the name of the page (i.e. the pagename!) between :
- [[[pagename]]] will create the required link. E.g. [[[start]]] will appear as start)
- remember that most pages are named as category:pagename. Don't forget to write the category: part.
- if you want to use an alternative anchor than the namepage, you can provide the anchor text after the name of the page, as follows:
[[[pagename |anchor-text]]]. E.g. [[[start |inicio]]] will appear as inicio, but will link to the page start.
Notice: the maximum length of a page name is 60 characters over all!
2.9. Internal link using the wizard
Clicking on the button Page link wizard will prompt you to add all the required information and functions necessary to create and activate your link.
2.10. Insert image
Check Wiki Syntax
2.11. Inset image wizard
Check Wiki Syntax
2.12. Embed video
Check Wiki Syntax
2.13. Embed audio
Check Wiki Syntax
2.14. Code block
Check Wiki Syntax
2.15. Code block wizard
Check Wiki Syntax
3. The editor's third row
3.1. Numbered list
Clicking on the button Numbered list will insert the syntax for a numbered points together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can create a numbered list by typing "#":
- # first list element
- # second list element, will appear as:
- first list element
- second list element
3.2. Bulleted list
Clicking on the button Bulleted list will insert the syntax for bullet points together with a self-selected description. Substitute the self-selected description with your own typing.
In syntax form, you can create a bulleted list by typing "*":
- * first list element
- * second list element, will appear as:
- first list element
- second list element
3.3. Increase list indentation
Clicking on the button Increase list nesting will insert a space before a numbered or bulleted point in a list (you will need to have the list element already created).
In syntax form, you can increase list indentation by typing spaces before the numbered or bulleted item:
- * first list element will have no list indentation.
- _* second list element (where _ is a blank space), will show indentation as:
- first list element
- second list element
3.4. Decrease list indentation
Clicking on the button Decrease list nesting will delete a space before a numbered or bulleted point in a list (you will need to have the list element already created).
In syntax form, you can decrease list indentation by deleting spaces before the numbered or bulleted item.
3.5. Definition list
Clicking on the button Definition list will insert the syntax for a list of items together with a self-selected description. The self-selected description directs you to write the name of a particular item for your list (e.g. a word, a reference, or a webpage location). Substitute the self-selected description with your own typing. Furthermore, substitute the section definition with an explanation of the item. If you need to add more items, simply list them using the same syntax ( : item : definition ).
In syntax form, you can list items by typing your list with the following syntax:
- : item : definition
- : item : definition, will appear as:
- This website
- It provides a model of what we are saying.
- This other website
- It is a very good site for encyclopedic knowledge on the topic.
- This book
- It illustrates the theory in greater detail for advanced users.
3.6. Footnote
Clicking on the button Footnote will insert the syntax for footnotes together with a self-selected description. Substitute the self-selected description with your own typing. Wikidot will use this syntax to allocate a number to your footnote in the text, write the footnote in a footnote section at the end of the text together with the default heading Footnotes, and link both. When the text has been saved, pointing to the footnote number will open a window showing the footnote text, so that there is no need to scroll down to the end of the page to read the footnote.
In syntax form, you can add footnotes by typing your text between [[footnote]] [[/footnote]]:
- [[footnote]] your footnote here [[/footnote]] will appear as
3.7. Mathematical equation
Check Wiki Syntax
3.8. Inline mathematical equation
Check Wiki Syntax
3.9. Equation reference
Check Wiki Syntax
3.11. Bibliography citation
(Let's discuss this function before the Bibliography block function)
Clicking on the button Bibliography citation will insert the syntax for a citation within the text together with a self-selected description. This self-selection description prompts you to write a one-word keyword (or label) that will be used to link the citation with its full reference in the Bibliography section. Substitute the self-selected description with your own keyword. Wikidot will use this syntax to allocate a number to your citation in the text, write the full reference in the bibliography section at the end of the text together with the default heading Bibliography, and link both. When the text has been saved, pointing to the citation number will open a window showing the full reference, so that there is no need to scroll down to the end of the page to read that reference. [Note: if you create a citation but forget to write the full reference in the bibliography section, Wikidot will show an error message in red font when you exit the editor].
In syntax form, you can add citations by substituting label with your own keyword in the following syntax:
- [((bibcite label))]
For example, [((bibcite firstlabel))] and [((bibcite secondlabel))] will appear as [] and [].
3.10. Bibliography
Clicking on the button Bibliography will insert the syntax for creating a block of references, together with a self-selected description. The self-selected description directs you towards writing the same one-word label that you used in the text to identify a particular citation (e.g. firstlabel). Substitute the self-selected description with your own typing. Furthermore, substitute the section full source reference with your reference. If you need to add more references, simply list them using the same syntax ( : label : full reference ) before [[/bibliography]].
In syntax form, you can add references by creating the bibliography block in separate lines, and writing your reference syntax in between the blocks, as follows:
- [[bibliography]]
- : firstlabel : first full reference in the bibliography section
- : secondlabel : second full reference in the bibliography section
- [[/bibliography]] , will appear as:
Authors
JDPerezgonzalez JDPerezgonzalez
Related articles
Comments
I'm wondering if it's possible to modify rows of buttons above the editor — for example, I use the [[collapsible]] tag quite a bit and would love to add a button for that.
to add to - WIKIDOT.combined.js:
collapse: function(b) {
WIKIDOT.Editor.utils.insertTags("[[collapsible]]", "[[/collapsible]]", "hidden text",
WIKIDOT.Editor.utils.trimSelection)
},You can change the styling of the buttons with CSS, for example:
editor_buttons.jpgbut you can't add a collapsible block to that javascript code.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
You can actually reduce the bulkiness of the editor buttons using some code that leiger leiger wrote some time ago. You can read about it on his blog.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
How can I categorise my documents in Docs as placing them in seperate folders?
Exampe:
- IELTS Writing Task 1
- Topic 1
- Topic 2
- IELTS Writing Task 2
- Topic 1
- Topic 2
By the way this is the link to my Wiki.
http://pliwritinglab.wikidot.com/docs:_start
I assume by documents you mean pages. The way I did it for a long document I built on Wikidot a few years ago for the Scottish Government was to have each chapter (in your case a writing task) as a category with each topic on its own page in the chapter category. I then added tags to each page related to specific subjects.
So for what you want I would do this:
category: wt1 - pages in the category should be autonumbered, so the result would be wt1:1, wt1:2 etc
category: wt2 - pages in the category should be autonumbered, so the result would be wt2:1, wt2:2 etc
The title of each page can still be whatever you want to call it, but the autonumbering prevents duplicates.
Categories and pages can be listed in a number of different ways with the ListPages module and if you have used tags then you can list pages with the relevant tags.
Your live template for each category would have a newpage module for you to add the title of the page and for the page to go into the correct writing task, or you could have an admin page with lots of different newpage modules.
Of course the problem is that if you already have a lot of content it can take quite a time to reorganise the structure of your site.
So if you want to keep all your current pages in the same category then you will need to make use of tags for example wt1 topic1, wt1 topic2 and so on. You can then list them with the ListPages module based on the tags.
If this doesn't make sense or you need some clarification or a live example just let us know.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
I would use tags ( or better a tags-treee) to insert a structure in existing or coming Lists of contents.
As Rob has written, but I would use "hidden" tags for the second level - with a starting underscore - like wt1 _topic1 , wt1 _topic2 and so on..
Such a list:
IELTS Writing Task 1
[[module ListPages category="*" tags="+wt1" order="title" separate="no" ]]
* **%%title_linked%%**
[[/module]]IELTS Writing Task 2
[[module ListPages category="*" tags="+wt2" order="title" separate="no" ]]
* **%%title_linked%%**
[[/module]]I am not sure if the bulllet list will work correct in the second ( or first ) level…
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?