View source for Help:Wiki University VisualEditor--Undo and Redo

<div style="display:grid; grid-template-columns:1fr 1fr 2fr 2fr 2fr 2fr">
<!--------------row 1-------------------------->
<!--tool bar--------------------------------------------------->
{{VisualEditor School}}
<!----------------row 2---------------------------->
<!-------------------menu-------------------------------->
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{VisualEditor Tutorial Sidebar}}</div>
<!-----------------------main------------------------>
<!-------------------------------chapters top row---------------------------------->
<div style="grid-column:3/8; padding-left:0.5em">
<!-------------------------------chapters top row---------------------------------->
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
<div style="font-size:1.3em">[[Help:Wiki University VisualEditor-- Introduction|<< Previous Chapter]]</div>
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University VisualEditor--Paragraph and Headers|Next Chapter >>]]</span></div>
</div>
<div style="margin-left:0.5em">
<!-----------------------MAIN MATERIAL BELOW THIS LINE-------------------------------------------->
==Visual Editor toolbar==
<div style="display:flex">
<!---------------------------UNDO ARROW-------------------------------------------------------------->
<div style="flex:0.75; border:1px solid red">[[File:UndoVE.jpg|40px]]</div>
<!---------------------------------REDO ARROW------------------------------------------------------------->
<div style="flex:0.75; border:1px solid red">[[File:RedoVE.jpg|40px]]</div>
<!---------------------------------------PARAGRAPH --------------------------------------------------------->
<div style="flex:3; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Paragraph <div style="margin-left:3vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!--------------------------------------TEXT STYLE--------------------------------------------------->
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><div style="font-size:1.3vw; font-style:italic; text-decoration: underline">'''A'''</div><div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!------------------------------------LINKS------------------------------------------------------------>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
<div style="display:flex;">[[File:Link.png|50px]]
</div>
</div>
<div style="flex:1.5; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Cite<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!------------------------------LISTS---------------------------------------------------------------------->
<div style="flex:1.2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">

<div style="display:flex; flex-direction:column">
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
</div>
<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div>

</div>
<!----------------------------------------------INSERT------------------------------------------------------->
<div style="flex:1.5; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Insert<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!---------------------------------------------------------OMEGA----------------------------------------------------->
<div style="flex:0.8; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><span style="font-size:1.5vw">Ω</span></div>
<!-------------------------------------------------------------------HELP----------------------------------------------------->
<div style="flex:3; display:flex; align-items:center; justify-content:flex-end; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"></div>
<div style="flex:1; display:flex; align-items:center; justify-content:flex-end; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
<div style="display:flex; align-items:center; justify-content:center; width:20px; height:20px; font-size:1.5em; margin-right:10px">'''?'''</div>
</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
<div style="display:flex; flex-direction:column">
<div style="width:15px; height:3px; margin-bottom:3px; background-color:black"></div>
<div style="width:15px; height:3px; margin-bottom:3px; background-color:black"></div>
<div style="width:15px; height:3px; background-color:black"></div>
</div>
</div>
<!-------------------------------------------------------------TO GO WIKITEXT--------------------------------------------->
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><span style="font-size:1.3vw; font-weight:bold">[[File:VE Switch icon.png]]</span></div>
<!--------------------------------------------------------SAVE--------------------------------------------------------->
<div style="flex:2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue; color:white; background-color:lightgray">Save changes...</div>
</div>

<!--visualeditor toolbar------------------------------------------------------------------------------------->

==Undo and Redo tabs==

<!--detailed explanation of items on VisualEditor toolbar------------------------------------------->
<p>The first two tabs on the Visual Editor tool bar are the Undo and Redo arrows</p>
<table style="width:100%; border:1px solid lightgrey">
<tr>
<td>
</td></tr>
<tr>
<!--Undo arrow------------------------------------------------------------------------------------->
<td style="border:1px solid red">
[[File:UndoVE.jpg|100px]]</td>
<td style="border:1px solid lightgrey; width:100px; padding:10px">Undo arrow</td>
<td style="border:1px solid lightgrey; padding:10px">If you decided that you did not like your last edit, you can delete it with one click of the undo arrow rather than using the delete key.  If there is more than one edit to delete, you can undo more than once.  However, you cannot undo after you have saved your edits.</td>
</tr>
<!--redo arrow--------------------------------------------------------------------------------->
<tr>
<td style="border:1px solid red">
[[File:RedoVE.jpg|100px]]</td>
<td style="border:1px solid lightgrey">Redo arrow</td>
<td style="border:1px solid lightgrey">If you decided that you really did like your last edit (or edits) after all, you can restore it by clicking the Redo arrow.  You can redo more than once.  However, you can not redo after you have saved your edit.</td>
</tr>



</table>
{{reflist}}

==Try these out==
[[File:Tests.gif|100px|right]]
<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"><div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgray;">Quick Quiz</div> <div style="padding-top:12px; padding-left:10px;">
*What does the undo arrow allow you to do?

::A. Fix a mistake you made before saving the page.
::B. Reverse a link entered incorrectly after you have saved the page.
::C. Reverse an entry after it was saved.
::D. All of the above.

*How many undos can you enter?
::A. You can only reverse one entry at a time.
::B. You can reverse more than one.
::C. All of the above.
::D. None of the above.

*How many redos can you do?
::A. You can only add back your edits one at a time.
::B. You can add back more than one edit at a time.
::C. All of the above.
::D. None of the above.
</div> <div style="background-color:lightgray; width:100%; height:35px; padding-top:10px;"><div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px;">[[FamilySearch VisualEditor Tutorial Answers#Undo and Redo|Check your answers ]] </div> </div> </div>


<!--Exercises -------------------------------------------------------------->
<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; border-radius:5px ">
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
<div style="padding-top:12px; padding-left:10px; ">
*In case you have never used the "redo" or "undo" arrows in other programs, place this text in a sandbox page of yours (remember you can have as many sandbox pages as you want) and then use these arrows to both remove and restore this text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
*Remember you cannot use these arrows after you have saved your entries.
</div>
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">

</div>
</div>
<!---------------------------------END OF MATERIAL------------------------------------------->
</div>
<!-------------------------------chapters bottom---------------------------------------------------->
<div style="clear:both"></div>
<div style="display:flex; justify-content:space-between; padding:10px">
<div style="font-size:1.3em">[[Help:Wiki University VisualEditor-- Introduction|<< Previous Chapter]]</div>
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University VisualEditor--Paragraph and Headers|Next Chapter >>]]</span></div>
</div>
{{reflist}}
</div>
__NOTOC__
[[Category:Wiki Lessons]]