{"id":34,"date":"2017-03-17T16:28:10","date_gmt":"2017-03-17T16:28:10","guid":{"rendered":"http:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/chapter\/editing-interface\/"},"modified":"2018-01-16T13:54:46","modified_gmt":"2018-01-16T13:54:46","slug":"editing-interface","status":"publish","type":"chapter","link":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/chapter\/editing-interface\/","title":{"rendered":"Editing Interface"},"content":{"raw":"\n<div class=\"textbox shaded\">\n<p>When editing your chapters in Pressbooks, you have two options: you can use either the visual editor or the text editor.<\/p>\n<p>By default, Pressbooks is set&nbsp;to the visual editor. The visual editor uses a What You See Is What You Get interface (often called WYSIWYG) similar to what you'd expect to see in your favorite word processing software. The text editor option uses a plain text editor style where you can directly edit the HTML code that creates your text in the Pressbooks environment.<\/p>\n<p>In this chapter, you\u2019ll learn how to:<\/p>\n<ul>\n<li>View the Screen Options<\/li>\n<li>Expand your WYSIWYG Toolbar<\/li>\n<\/ul>\n<p>You'll also take a tour of the Visual Editor&nbsp;and Text Editor.<\/p>\n<\/div>\n<h4>Screen Options<\/h4>\n<p>In the top right corner of the page, you'll find the Screen Options tab. If you click this it will extend a tool tray with options that affects what you see on the editing interface of your Chapter page. &nbsp;Under additional settings on this tool tray, you have the option to \"Enable full-height editor and distraction free functionality.\" This affects what shows up in your visual editor toolbar.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/screen-options.png\"><img src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/screen-options.png#fixme\" alt=\"Screen Options Tool Tray\" width=\"1704\" height=\"337\" class=\"alignnone size-full wp-image-218\"><\/a><\/p>\n<h4>Extending the WYSIWYG Toolbar<\/h4>\n<p>If your toolbar looks like this:<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/tinytool.png\"><img src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/tinytool.png#fixme\" alt=\"truncated toolbar\" width=\"1315\" height=\"112\" class=\"alignnone size-full wp-image-220\"><\/a><\/p>\n<p>You can click the Toggle Toolbar button to expand it.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/expand.gif\"><img src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/expand.gif#fixme\" alt=\"expand toolbar\" width=\"480\" height=\"82\" class=\"alignnone size-full wp-image-221\"><\/a><\/p>\n<p>Now that you have a fully expanded WYSIWYG Visual Editor Toolbar, you're ready to a tour of it.<\/p>\n<h4>WYSIWYG Tour<\/h4>\n<div class=\"bcc-box bcc-highlight\">\n<h3 itemprop=\"educationalUse\">WYSIWYG Visual Editor Tour<\/h3>\n<p>The WYSIWYG Editor Includes:<\/p>\n<ol>\n<li>Screen Options<\/li>\n<li>Visual Editor (WYSIWYG)<\/li>\n<li>Text Editor (HTML)<\/li>\n<li>Full Screen<\/li>\n<li>Add Media &amp; Add H5P<\/li>\n<li>Text Formatting - Paragraph and Heading Styles, Bold Font, Italic Font, Bulleted List, Numbered List, Formats, Textboxes, Underline Text, and Strikethrough Text.<\/li>\n<li>Block Quote<\/li>\n<li>Paragraph Justification - Left, Center, Right<\/li>\n<li>Links - Add a Link, Remove a Link<\/li>\n<li>Toolbar Toggle -<\/li>\n<li>Clear Formatting<\/li>\n<li>Special Characters<\/li>\n<li>Table<\/li>\n<li>Footnote and Convert MS Word Footnotes<\/li>\n<li>Textboxes - LO: Learning Objectives, KT: Key Takeaways, EX: Exercises and Critical Thinking<\/li>\n<li>Anchor<\/li>\n<li>Superscript and Subscript<\/li>\n<\/ol>\n<\/div>\n<p><span>This image below<\/span><span>&nbsp;shows a fully extended toolbar in Pressbook\u2019s WYSIWYG Visual Editor that has been labeled with numbers that correspond to the list above to provide a visual where each component displays on&nbsp;the toolbar.<\/span><\/p>\n<h4><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/wsiwyg-2.png\"><img src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/wsiwyg-2.png#fixme\" alt=\"text editor tour\" width=\"1644\" height=\"812\" class=\"size-full wp-image-217 alignnone\"><\/a><\/h4>\n<h4>Text Editor<\/h4>\n<p>By clicking the Text tab above the editor, you can quickly switch the text editor. This allows you to directly edit the HTML code for your content. Above the toolbar, you'll still see the (1) Add Media &amp; Add H5P buttons. The toolbar for the text editor offers (2) buttons for commonly used HTML tags.&nbsp;Clicking these buttons will insert the tags into the text editor.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/text-editor.png\"><img src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/text-editor.png#fixme\" alt=\"text editor toolbar\" width=\"1310\" height=\"632\" class=\"alignnone size-full wp-image-223\"><\/a><\/p>\n<p>The tags are fairly self-explanatory, but here's a list of what they specifically mean:<\/p>\n<ul>\n<li>b - bolds the font<\/li>\n<li><em>i&nbsp;<\/em>- italicizes the font<\/li>\n<li><span style=\"text-decoration: underline;\">link<\/span> - inserts a link<\/li>\n<li>b-quote - inserts a&nbsp;block quote<\/li>\n<li>ins - inserts a date\/time tag<\/li>\n<li>img - inserts an image from a&nbsp;URL<\/li>\n<li>ul - inserts and bulleted list<\/li>\n<li>ol - inserts an numbered list<\/li>\n<li>li - inserts a list item<\/li>\n<li>code -&nbsp;styles text as code<\/li>\n<li>Table - inserts a table<\/li>\n<li>more - inserts a 'Read More' tag<\/li>\n<li>close tags - automatically closes any open tags in your code<\/li>\n<li>fn - open and close footnote shortcode<\/li>\n<li>proofread - changes text to an easier to read proofreading style<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n\n","rendered":"<div class=\"textbox shaded\">\n<p>When editing your chapters in Pressbooks, you have two options: you can use either the visual editor or the text editor.<\/p>\n<p>By default, Pressbooks is set&nbsp;to the visual editor. The visual editor uses a What You See Is What You Get interface (often called WYSIWYG) similar to what you&#8217;d expect to see in your favorite word processing software. The text editor option uses a plain text editor style where you can directly edit the HTML code that creates your text in the Pressbooks environment.<\/p>\n<p>In this chapter, you\u2019ll learn how to:<\/p>\n<ul>\n<li>View the Screen Options<\/li>\n<li>Expand your WYSIWYG Toolbar<\/li>\n<\/ul>\n<p>You&#8217;ll also take a tour of the Visual Editor&nbsp;and Text Editor.<\/p>\n<\/div>\n<h4>Screen Options<\/h4>\n<p>In the top right corner of the page, you&#8217;ll find the Screen Options tab. If you click this it will extend a tool tray with options that affects what you see on the editing interface of your Chapter page. &nbsp;Under additional settings on this tool tray, you have the option to &#8220;Enable full-height editor and distraction free functionality.&#8221; This affects what shows up in your visual editor toolbar.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/screen-options.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/screen-options.png#fixme\" alt=\"Screen Options Tool Tray\" width=\"1704\" height=\"337\" class=\"alignnone size-full wp-image-218\" \/><\/a><\/p>\n<h4>Extending the WYSIWYG Toolbar<\/h4>\n<p>If your toolbar looks like this:<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/tinytool.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/tinytool.png#fixme\" alt=\"truncated toolbar\" width=\"1315\" height=\"112\" class=\"alignnone size-full wp-image-220\" \/><\/a><\/p>\n<p>You can click the Toggle Toolbar button to expand it.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/expand.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/expand.gif#fixme\" alt=\"expand toolbar\" width=\"480\" height=\"82\" class=\"alignnone size-full wp-image-221\" \/><\/a><\/p>\n<p>Now that you have a fully expanded WYSIWYG Visual Editor Toolbar, you&#8217;re ready to a tour of it.<\/p>\n<h4>WYSIWYG Tour<\/h4>\n<div class=\"bcc-box bcc-highlight\">\n<h3 itemprop=\"educationalUse\">WYSIWYG Visual Editor Tour<\/h3>\n<p>The WYSIWYG Editor Includes:<\/p>\n<ol>\n<li>Screen Options<\/li>\n<li>Visual Editor (WYSIWYG)<\/li>\n<li>Text Editor (HTML)<\/li>\n<li>Full Screen<\/li>\n<li>Add Media &amp; Add H5P<\/li>\n<li>Text Formatting &#8211; Paragraph and Heading Styles, Bold Font, Italic Font, Bulleted List, Numbered List, Formats, Textboxes, Underline Text, and Strikethrough Text.<\/li>\n<li>Block Quote<\/li>\n<li>Paragraph Justification &#8211; Left, Center, Right<\/li>\n<li>Links &#8211; Add a Link, Remove a Link<\/li>\n<li>Toolbar Toggle &#8211;<\/li>\n<li>Clear Formatting<\/li>\n<li>Special Characters<\/li>\n<li>Table<\/li>\n<li>Footnote and Convert MS Word Footnotes<\/li>\n<li>Textboxes &#8211; LO: Learning Objectives, KT: Key Takeaways, EX: Exercises and Critical Thinking<\/li>\n<li>Anchor<\/li>\n<li>Superscript and Subscript<\/li>\n<\/ol>\n<\/div>\n<p>This image below&nbsp;shows a fully extended toolbar in Pressbook\u2019s WYSIWYG Visual Editor that has been labeled with numbers that correspond to the list above to provide a visual where each component displays on&nbsp;the toolbar.<\/p>\n<h4><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/wsiwyg-2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/wsiwyg-2.png#fixme\" alt=\"text editor tour\" width=\"1644\" height=\"812\" class=\"size-full wp-image-217 alignnone\" \/><\/a><\/h4>\n<h4>Text Editor<\/h4>\n<p>By clicking the Text tab above the editor, you can quickly switch the text editor. This allows you to directly edit the HTML code for your content. Above the toolbar, you&#8217;ll still see the (1) Add Media &amp; Add H5P buttons. The toolbar for the text editor offers (2) buttons for commonly used HTML tags.&nbsp;Clicking these buttons will insert the tags into the text editor.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/text-editor.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wisc.pb.unizin.org\/pressbooks101\/wp-content\/uploads\/sites\/67\/2017\/03\/text-editor.png#fixme\" alt=\"text editor toolbar\" width=\"1310\" height=\"632\" class=\"alignnone size-full wp-image-223\" \/><\/a><\/p>\n<p>The tags are fairly self-explanatory, but here&#8217;s a list of what they specifically mean:<\/p>\n<ul>\n<li>b &#8211; bolds the font<\/li>\n<li><em>i&nbsp;<\/em>&#8211; italicizes the font<\/li>\n<li><span style=\"text-decoration: underline;\">link<\/span> &#8211; inserts a link<\/li>\n<li>b-quote &#8211; inserts a&nbsp;block quote<\/li>\n<li>ins &#8211; inserts a date\/time tag<\/li>\n<li>img &#8211; inserts an image from a&nbsp;URL<\/li>\n<li>ul &#8211; inserts and bulleted list<\/li>\n<li>ol &#8211; inserts an numbered list<\/li>\n<li>li &#8211; inserts a list item<\/li>\n<li>code &#8211;&nbsp;styles text as code<\/li>\n<li>Table &#8211; inserts a table<\/li>\n<li>more &#8211; inserts a &#8216;Read More&#8217; tag<\/li>\n<li>close tags &#8211; automatically closes any open tags in your code<\/li>\n<li>fn &#8211; open and close footnote shortcode<\/li>\n<li>proofread &#8211; changes text to an easier to read proofreading style<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"author":1,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-34","chapter","type-chapter","status-publish","hentry"],"part":18,"_links":{"self":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/34\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/34\/revisions\/35"}],"part":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/pressbooks\/v2\/parts\/18"}],"metadata":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/34\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/pressbooks\/v2\/chapter-type?post=34"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/wp\/v2\/contributor?post=34"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/pressbooks101\/wp-json\/wp\/v2\/license?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}