Sierra Vista Community Theatre Wiki

Entertain, Educate, Empower and Inspire

User Tools

Site Tools

You are here: Welcome » FAQ's & How To's » All About This Wiki » The Visual Editor
Trace:
faqs:about_this_wiki:the_visual_editor

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
faqs:about_this_wiki:the_visual_editor [07/04/2025 03:40 PM (5 months ago)] – removed - external edit (Unknown date) 127.0.0.1faqs:about_this_wiki:the_visual_editor [07/04/2025 03:40 PM (5 months ago)] (current) – ↷ Links adapted because of a move operation Chris Daley
Line 1: Line 1:
 +====== The Visual Editor ======
 +
 +Dokuwiki uses an [[doku>wiki:syntax|custom formatting syntax]] using lots of equal signs = and brackets [] {} to format pages. This worked really well back when Yahoo ruled the Internet, but we have better [[wp>WYSIWYG|WYSIWYG]] editing tools now, like the [[doku>plugin:prosemirror|Prosemirror plugin]] editor.
 +
 +Use the //''Toggle syntax ⬌ visual editor'' //button to switch between the Syntax and Visual WYSIWYG editors.
 +
 +It's a good idea to ''Save'' your work every 20 minutes or so, especially when working with the Visual editor. It sometimes gets grumpy if you work it too long. (Just like some people.)
 +
 +===== The Visual Editor Toolbar =====
 +
 +This is the toolbar that lives at the top of the edit screen when using the Visual editor. Here's what all the options do.
 +
 +{{ faqs:about_this_wiki:toolbar.png?475 }}
 +
 +==== Formatting ====
 +
 +{{ faqs:about_this_wiki:toolbar-formatting.png?200}}This drop down menu has all the standard text formatting options.
 +
 +Note: the CTRL keys like CTRL-B (**bold**) and CTRL-I (//italic//) do not work. (But we keep trying them. LOL )
 +
 +The //ignore wiki formatting //option allows you to include text that would normally be converted into formatting.
 +
 +
 +==== Insert Link ====
 +
 +{{faqs:about_this_wiki:toolbar-insert_link.png?50 }}Used to create a link to another page or a link to another website.
 +
 +This one is complex enough that it has [[its own how to page|its own how to page]].
 +
 +==== Insert image or file ====
 +
 +{{faqs:about_this_wiki:toolbar-insert_image_or_file.png?50 }}Used to insert an image into the web page.
 +
 +This one also has [[its own how-to page|its own how-to page ]]too.
 +
 +==== Wrap in bullet list ====
 +
 +{{faqs:about_this_wiki:toolbar-wrap_in_bullet_list.png?50 }}Highlight one or more paragraphs and convert them into a bullet list.
 +
 +==== Wrap in ordered list ====
 +
 +{{faqs:about_this_wiki:toolbar-wrap_in_ordered_list.png?50 }}Highlight one or more paragraphs and convert them into a numbered list.
 +
 +==== Lift list item ====
 +
 +{{faqs:about_this_wiki:toolbar-lift_list_item.png?50 }}When editing a bullet or ordered list, clicking this icon will move the item to the left. If you click it too many times, it will convert the item into a paragraph.
 +
 +==== Sink list item ====
 +
 +{{faqs:about_this_wiki:toolbar-sink_list_item.png?50 }}When editing a bullet or ordered list, clicking this icon will move the item to the right.
 +
 +==== Undo ====
 +
 +{{faqs:about_this_wiki:toolbar-undo.png?50 }}Will undo the last thing you did. Ctrl-Z may also work.
 +
 +==== Redo ====
 +
 +{{faqs:about_this_wiki:toolbar-redo.png?50 }}Will redo the last thing you ud-did (undo'ed?). Ctrl-Y may also work.
 +
 +==== Code Block ====
 +
 +{{faqs:about_this_wiki:toolbar-code_block.png?50 }}Used when including a computer programming example in a page. You're not going to be using this.
 +
 +==== Paragraph ====
 +
 +{{faqs:about_this_wiki:toolbar-paragraph.png?50 }}We haven't figured out what this does. Normally not used.
 +
 +==== Bock Quote ====
 +
 +
 +>{{faqs:about_this_wiki:toolbar-blockquote.png?50 }}
 +>\\ 
 +>Used to format text into a quote like this.\\
 +>
 +
 +==== Add a Footnote ====
 +
 +{{faqs:about_this_wiki:toolbar-add_a_footnote.png?50 }}Used to add a footnote to the page.((
 +Like this footnote.
 +))
 +
 +To add a footnote, position the cursor where you want the footnote and click on this option. A numbered footnote will appear. Click on the footnote number to open a new window where you can enter the footnote text. When done, just close the window. The footnote text is automatically saved.
 +
 +==== Add new RSS feed ====
 +
 +{{faqs:about_this_wiki:toolbar-add_a_new_rss_feed.png?50 }}Useful if you ever need to display an external [[wp>RSS feed|RSS feed]], like from a blog or podcast in a page -  [[doku>wiki:syntax#rss_atom_feed_aggregation|learn more here]]. You'll probably never use this.
 +
 +==== Smileys ====
 +
 +{{faqs:about_this_wiki:toolbar-smileys.png?175 |learn more here}}What's life, or [[wp>Comedy_and_tragedy_masks|theater]], without some joy :-) and sorrow :-(. Position your cursor where you want the smiley , then click this option to insert the emotion or symbol of your choice.
 +
 +The last two entries are FIXME %%(FIXME)%% and DELETEME %%(DELETEME)%%. They are used to tag things that need to be fixed or that probably need to be removed. A nice way to flag something and worry about it later.
 +
 +:!: You can search for %%FIXME%% and %%DELETEME%% in the search bar.
 +
 +
 +==== Headings ====
 +
 +{{faqs:about_this_wiki:toolbar-heading.png?120 }}You can convert a paragraph into a heading by clicking on the paragraph and then clicking on this option.
 +
 +  * **H1** should normally only be used for the title of the page.
 +  * **H2** is used to identify the different sections of a page
 +  * **H3**-**H5** allow you to create a deeper outline.
 +
 +If there are 3 or more headings, a [[faqs:about_this_wiki:what_are_all_these_icons_stuff#table_of_contents|Table of Contents ]]will automatically be created for the page. If the contents do not line up correctly, take a look at the heading numbers you're using.
 +
 +:!: Headings can only contain text. No links, no images, and no formatting.
 +
 +==== Add new ====
 +
 +{{faqs:about_this_wiki:toolbar-add_new_2x2_table.png?50 }}Position your cursor and click this option to insert a new table into your page. Starts out as a 2x2 table, but can be expanded and modified using the next option.
 +
 +==== Edit table ====
 +
 +{{ faqs:about_this_wiki:toolbar-edit_table.png?220}}Once you've created your table, you can use these options to add more rows or columns, change a cell from regular to header, change the text alignment with a cell, combine multiple cells into one big cell and delete the entire table.
 +
 +Using these options, you can create pretty much any table layout:
 +
 +^ Heading | Regular |
 +| left (default) |  centered align  |
 +|  right align ^  Right Heading ^
 +|  2 cells merged into one  ||
 +
 +:!: When creating a table, you might not be able to get past the last cell in the table. [[#stuck_in_a_table|See below]] to fix the problem.
 +
 +==== Plugins ====
 +
 +{{ faqs:about_this_wiki:toolbar-plugins.png?166}}This option allows you to include additional features provided by plugins added to [[doku>plugins|DokuWiki]]. We currently have the [[doku>plugin:gallery|Gallery]] and [[doku>plugin:wrap|Wrap]] plugins installed.
 +
 +FIXME //Exactly how to use this still needs to be documented. Contact the [[people:wiki_admins|Wiki Admins]] if you need something soon.//
 +
 +==== Page Settings ====
 +
 +{{faqs:about_this_wiki:toolbar-page_settings.png?200 |qqq }}The first options allows you to include the [[doku>caching#prevent_caching|~~NOCACHE~~ tag]] in this page. You would only use this if you were using an RSS feed or something and the page was not updating correctly. Normally, you should leave this unchecked.
 +
 +The second option allows you to include the [[doku>toc#tips|~~NOTOC~~ tag]], hiding the Table of Contents. Normally, you'd leave this unchecked too.
 +
 +===== Issues with the Visual editor =====
 +
 +Life is not perfect, and neither is the Visual editor. Here are a couple of things to watch out for. You'll notice a common theme in the solutions.
 +
 +==== Stuck in a table ====
 +
 +When creating a table, you might not be able to get past the last cell in the table. You're stuck.
 +
 +If this happens...
 +
 +  * switch into Syntax editor using the //''Toggle syntax ⬌ visual editor'' //button,
 +  * go down to the very bottom of your page, and position your cursor at the end of your table,
 +  * press the ''Enter'' key a couple of times, then type a word (anything),
 +  * switch back to the Visual editor using the //''Toggle syntax ⬌ visual editor'' //button,
 +  * you can now continue editing your page.
 +
 +To prevent this from happening, when you get to where you want your table, press the ''Enter'' key a couple of times and type something (anything). Then go back and create your table. When done, you'll have something to click on after the table.
 +
 +==== Links disappear during copy & paste ====
 +
 +This is a feature, not a bug. It prevents HTML "crapola" from being loaded into a page when copying from an outside source. Unfortunately, it also prevents you from copying [[doku>link|links]] in a page from one place to another.
 +
 +If this happens...
 +
 +  * switch into Syntax editor using the //''Toggle syntax ⬌ visual editor'' //button,
 +  * locate the text you want to copy & paste (including the ''%%[[link]]%%''),
 +  * paste it where it needs to go,
 +  * switch back to the Visual editor using the //''Toggle syntax ⬌ visual editor'' //button,
 +  * continue editing your page.
 +
 +The page text displayed in the Syntax editor can be a little confusing, but you'll see the same words and it should be fairly straight forward. Remember, you can always try things using the [[Playground page|Playground page]].
 +
 +==== I just can't make the change that I want to ====
 +
 +Sometimes you just can't click in the right spot to do what you want to do. This can happen when you want to add a space between a work and a link, for example.
 +
 +The solution will look familiar...
 +
 +  * switch into Syntax editor using the //''Toggle syntax ⬌ visual editor'' //button,
 +  * locate the text you want to fix and make the change there,
 +  * switch back to the Visual editor using the //''Toggle syntax ⬌ visual editor'' //button,
 +  * continue editing your page.
 +
 +==== The editor just starts acting funny ====
 +
 +It's a good idea to ''Save'' your work every 20 minutes or so. The Visual editor sometimes just gets grumpy if you work it too long. (Just like some people.)
 +
 +===== The Bottom Buttons =====
 +
 +FIXME //need to document Save / Preview / Cancel / Edit Summary//
 +
 +===== Epilogue =====
 +
 +The Visual editor works great. We used it to create all the initial pages for this wiki.
 +
 +There are occasions when it's not perfect. Just switch over to the Syntax editor using the //''Toggle syntax ⬌ visual editor'' //button and/or ''Save'' your work. You should be good to go.
 +
 +If you have any questions, talk to a [[people:wiki_admins|Wiki Admin]]. We're here to help.
 +