{"id":38,"date":"2017-03-17T16:28:10","date_gmt":"2017-03-17T16:28:10","guid":{"rendered":"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/editing-interface\/"},"modified":"2020-05-15T01:04:41","modified_gmt":"2020-05-15T01:04:41","slug":"editing-interface","status":"publish","type":"chapter","link":"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/editing-interface\/","title":{"raw":"Editing Interface","rendered":"Editing Interface"},"content":{"raw":"<div class=\"textbox shaded\">\n\nWhen editing your chapters in Pressbooks, you have two options: you can use either the visual editor or the text editor.\n\nBy default, Pressbooks is set\u00a0to 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.\n\nIn this chapter, you\u2019ll learn how to:\n<ul>\n \t<li>View the Screen Options<\/li>\n \t<li>Expand your WYSIWYG Toolbar<\/li>\n<\/ul>\nYou'll also take a tour of the Visual Editor\u00a0and Text Editor.\n\n<\/div>\n<h4>Screen Options<\/h4>\nIn 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. \u00a0Under 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.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/Expanded-screen-options-and-distraction-free-view.png\"><img class=\"alignnone wp-image-33 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view.png\" alt=\"Image of extended screen options interface that allows users to choose which attributes they would like to display on the editor panel.\" width=\"1263\" height=\"469\"><\/a>\n<h4>Extending the WYSIWYG Toolbar<\/h4>\nIf your toolbar looks like this:\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/truncated-toolbar-v2.png\"><img class=\"alignnone wp-image-34 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2.png\" alt=\"truncated toolbar\" width=\"956\" height=\"92\"><\/a>\n\nYou can click the Toggle Toolbar button to expand it.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/expand-toolbar-v2.png\"><img class=\"alignnone wp-image-35 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2.png\" alt=\"\" width=\"944\" height=\"180\"><\/a>\n\nNow that you have a fully expanded WYSIWYG Visual Editor Toolbar, you're ready to a tour of it.\n<h4>WYSIWYG Tour<\/h4>\n<div class=\"bcc-box bcc-highlight\">\n<h3>WYSIWYG Visual Editor Tour<\/h3>\nThe WYSIWYG Editor Includes:\n<ol>\n \t<li>Screen Options<\/li>\n \t<li>Visual Editor (WYSIWYG)<\/li>\n \t<li>Text Editor (HTML)<\/li>\n \t<li>Full Screen<\/li>\n \t<li>Add Media &amp; Add H5P<\/li>\n \t<li>Text Formatting - Paragraph and Heading Styles, Bold Font, Italic Font, Bulleted List, Numbered List, Formats, Textboxes, Underline Text, and Strikethrough Text.<\/li>\n \t<li>Block Quote<\/li>\n \t<li>Paragraph Justification - Left, Center, Right<\/li>\n \t<li>Links - Add a Link, Remove a Link<\/li>\n \t<li>Toolbar Toggle -<\/li>\n \t<li>Clear Formatting<\/li>\n \t<li>Special Characters<\/li>\n \t<li>Table<\/li>\n \t<li>Footnote and Convert MS Word Footnotes<\/li>\n \t<li>Textboxes - LO: Learning Objectives, KT: Key Takeaways, EX: Exercises and Critical Thinking<\/li>\n \t<li>Anchor<\/li>\n \t<li>Superscript and Subscript<\/li>\n<\/ol>\n<\/div>\nThis image below\u00a0shows 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\u00a0the toolbar.\n<h4><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-numbered-WYSIWYG.png\"><img class=\"alignnone wp-image-36 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG.png\" alt=\"image of WYSIWYG display with numbered guide\" width=\"1920\" height=\"872\"><\/a><\/h4>\n<h4>Text Editor<\/h4>\nBy 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.\u00a0Clicking these buttons will insert the tags into the text editor.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-text-editor-tour.png\"><img class=\"alignnone wp-image-37 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour.png\" alt=\"text editor display\" width=\"1494\" height=\"388\"><\/a>\n\nThe tags are fairly self-explanatory, but here's a list of what they specifically mean:\n<ul>\n \t<li>b - bolds the font<\/li>\n \t<li><em>i\u00a0<\/em>- italicizes the font<\/li>\n \t<li><span style=\"text-decoration: underline;\">link<\/span> - inserts a link<\/li>\n \t<li>b-quote - inserts a\u00a0block quote<\/li>\n \t<li>ins - inserts a date\/time tag<\/li>\n \t<li>img - inserts an image from a\u00a0URL<\/li>\n \t<li>ul - inserts and bulleted list<\/li>\n \t<li>ol - inserts an numbered list<\/li>\n \t<li>li - inserts a list item<\/li>\n \t<li>code -\u00a0styles text as code<\/li>\n \t<li>Table - inserts a table<\/li>\n \t<li>more - inserts a 'Read More' tag<\/li>\n \t<li>close tags - automatically closes any open tags in your code<\/li>\n \t<li>fn - open and close footnote shortcode<\/li>\n \t<li>proofread - changes text to an easier to read proofreading style<\/li>\n<\/ul>\n&nbsp;","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\u00a0to 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\u00a0and 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. \u00a0Under 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\/app\/uploads\/sites\/67\/2017\/03\/Expanded-screen-options-and-distraction-free-view.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view.png\" alt=\"Image of extended screen options interface that allows users to choose which attributes they would like to display on the editor panel.\" width=\"1263\" height=\"469\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view.png 1263w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view-300x111.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view-1024x380.png 1024w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view-768x285.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view-65x24.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view-225x84.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/Expanded-screen-options-and-distraction-free-view-350x130.png 350w\" sizes=\"auto, (max-width: 1263px) 100vw, 1263px\" \/><\/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\/app\/uploads\/sites\/67\/2017\/03\/truncated-toolbar-v2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-34 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2.png\" alt=\"truncated toolbar\" width=\"956\" height=\"92\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2.png 956w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2-300x29.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2-768x74.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2-65x6.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2-225x22.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/truncated-toolbar-v2-350x34.png 350w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/a><\/p>\n<p>You can click the Toggle Toolbar button to expand it.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/expand-toolbar-v2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-35 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2.png\" alt=\"\" width=\"944\" height=\"180\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2.png 944w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2-300x57.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2-768x146.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2-65x12.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2-225x43.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/expand-toolbar-v2-350x67.png 350w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/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>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\u00a0shows 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\u00a0the toolbar.<\/p>\n<h4><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-numbered-WYSIWYG.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-36 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG.png\" alt=\"image of WYSIWYG display with numbered guide\" width=\"1920\" height=\"872\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG.png 1920w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG-300x136.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG-1024x465.png 1024w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG-768x349.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG-1536x698.png 1536w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG-65x30.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG-225x102.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-numbered-WYSIWYG-350x159.png 350w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/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.\u00a0Clicking these buttons will insert the tags into the text editor.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-text-editor-tour.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-37 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour.png\" alt=\"text editor display\" width=\"1494\" height=\"388\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour.png 1494w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour-300x78.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour-1024x266.png 1024w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour-768x199.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour-65x17.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour-225x58.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-text-editor-tour-350x91.png 350w\" sizes=\"auto, (max-width: 1494px) 100vw, 1494px\" \/><\/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\u00a0<\/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\u00a0block quote<\/li>\n<li>ins &#8211; inserts a date\/time tag<\/li>\n<li>img &#8211; inserts an image from a\u00a0URL<\/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;\u00a0styles 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":14,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-38","chapter","type-chapter","status-publish","hentry"],"part":19,"_links":{"self":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/users\/14"}],"version-history":[{"count":1,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/38\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/38\/revisions\/39"}],"part":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/parts\/19"}],"metadata":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/38\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapter-type?post=38"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/contributor?post=38"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/license?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}