{"id":122,"date":"2016-08-30T18:06:15","date_gmt":"2016-08-30T18:06:15","guid":{"rendered":"https:\/\/openbook.ums.edu.my\/iotb\/chapter\/visual-text-editors\/"},"modified":"2024-09-19T04:16:58","modified_gmt":"2024-09-19T04:16:58","slug":"visual-text-editors","status":"publish","type":"chapter","link":"https:\/\/openbook.ums.edu.my\/iotb\/chapter\/visual-text-editors\/","title":{"raw":"Visual &amp; Text Editors","rendered":"Visual &amp; Text Editors"},"content":{"raw":"<div class=\"textbox\">\n\nWhen writing and editing your work in Pressbooks, you have a choice between working in the \"Visual Editor\" and the \"Text Editor\" according to your preferences. This chapter will cover the different features of:\n<ul>\n \t<li><a href=\"#visualeditortoolbar\">Visual Editor<\/a><\/li>\n \t<li><a href=\"#texteditortoolbar\">Text Editor<\/a><\/li>\n<\/ul>\n<\/div>\n<h2><a id=\"visualeditortoolbar\" href=\"\"><\/a>Visual Editor<\/h2>\nThe visual editor is the\u00a0default editor. It is a WYSIWYG (What You See Is What You Get) interface that allows you to see styling and formatting as they are applied.\n\nThis interface also\u00a0includes a toolbar that the top of the editor. While most options are straightforward, there are a range of buttons whose functions\u00a0might not be obvious at first. Below is a guide to each of the toolbar functions, and where you'll find them.\n<div class=\"textbox\"><strong>NOTE:\u00a0<\/strong>While much of this formatting is possible in other programs, such as MS Word, applying it in the Pressbooks editing interface ensures it will function correctly in all outputs. For more, read our chapter on <a href=\"\/iotb\/chapter\/bad-markup-bad-formatting\/\">common formatting problems<\/a>.<\/div>\n&nbsp;\n\n<a href=\"https:\/\/pressbooks.com\/app\/uploads\/sites\/10270\/2016\/08\/Screen-Shot-2019-03-06-at-10.33.09-AM-1.png\"><img class=\"alignnone size-full wp-image-120\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2023\/03\/Screen-Shot-2019-03-06-at-10.33.09-AM-1.png\" alt=\"Visual editor toolbar with tools numbered\" width=\"731\" height=\"225\"><\/a>\n\n<strong>Toolbar options:<\/strong>\n<ol>\n \t<li>Paragraph styles dropdown menu: choose from normal paragraph style, six different heading styles, or preformatted text<\/li>\n \t<li><strong>Bold<\/strong><\/li>\n \t<li><em>Italics<\/em><\/li>\n \t<li>Bulleted list<\/li>\n \t<li>Numbered list<\/li>\n \t<li>Blockquote<\/li>\n \t<li>Left-align<\/li>\n \t<li>Center-align<\/li>\n \t<li>Right-align<\/li>\n \t<li><a href=\"#haha\">Link<\/a><\/li>\n \t<li>Read more<\/li>\n \t<li>Toolbar toggle<\/li>\n \t<li>Formats dropdown menu: choose from several text indent and tracking options, as well as pullquote options<\/li>\n \t<li>Textboxes dropdown menu: choose from a variety of plain textboxes or predesign educational textboxes (read more <a href=\"\/iotb\/chapter\/tables-and-textboxes\/\">here<\/a>)<\/li>\n \t<li><span style=\"text-decoration: underline\">Underline<\/span><\/li>\n \t<li><del>Strikethrough<\/del><\/li>\n \t<li>Horizontal line<\/li>\n \t<li>Justify<\/li>\n \t<li><span style=\"color: #3366ff\">Text color<\/span><\/li>\n \t<li><span style=\"background-color: #ccffcc\">Text background color<\/span><\/li>\n \t<li>Paste as text<\/li>\n \t<li>Clear formatting<\/li>\n \t<li>Special character<\/li>\n \t<li>Decrease indent<\/li>\n \t<li>Increase indent<\/li>\n \t<li>Undo and\u00a0Redo<\/li>\n \t<li>Keyboard shortcuts guide<\/li>\n \t<li>Tables (read more <a href=\"\/iotb\/chapter\/tables-and-textboxes\/\">here<\/a>)<\/li>\n \t<li>Apply Class<\/li>\n \t<li><a id=\"haha\" href=\"\"><\/a>Anchor<\/li>\n \t<li>Super<sup>script<\/sup><\/li>\n \t<li>Sub<sub>script<\/sub><\/li>\n \t<li><code>Code<\/code><\/li>\n \t<li>Footnote[footnote]This is an example of a footnote. [\/footnote] (read more <a href=\"\/iotb\/chapter\/footnotes-and-chapter-endnotes\/\">here<\/a>)<\/li>\n \t<li>Convert MS footnotes<\/li>\n \t<li>Glossary [pb_glossary id=\"631\"]Term[\/pb_glossary] (read more <a href=\"\/iotb\/chapter\/glossaries\/\">here<\/a>)<\/li>\n<\/ol>\nYou can highlight a section of existing content and then click a tool on the toolbar to add formatting to that section. Alternatively, select the tool first, and then add new formatted content.\n<div class=\"textbox\"><strong>NOTE:<\/strong> The visual editor toolbar displays all formatting options by default. You can collapse the second and third rows of tools by clicking the toggle button (12).<\/div>\n&nbsp;\n<h2><a id=\"texteditortoolbar\" href=\"\"><\/a>Text Editor<\/h2>\nAs an alternative to the visual editor, you can also work in a text editor, or switch to it as necessary for specific needs. Here, you can view and edit\u00a0the HTML version of any text written and formatted in the visual editor, and you can also write directly in HTML, using the toolbar as necessary.\n\nThe text editor toolbar offers fewer options, tailored to working in HTML. They are detailed below.\n<div class=\"textbox\"><strong>NOTE:<\/strong> While you can work in HTML directly, not all HTML will work in all\u00a0exports. We recommend keeping it simple, and using the tools available in the visual editor as a guide.<\/div>\n<a href=\"https:\/\/pressbooks.com\/app\/uploads\/sites\/10270\/2016\/08\/Screen-Shot-2019-06-03-at-5.09.24-PM-1.png\"><img class=\"alignnone size-full wp-image-121\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1.png\" alt=\"The text editor and its toolbar\" width=\"940\" height=\"512\"><\/a>\n<ol>\n \t<li>Open and close &lt;strong&gt; tags to make text bold (click once to open, and again to close the tag)<\/li>\n \t<li>Open and close &lt;em&gt; tags to make text italics<\/li>\n \t<li>Link text (a pop up will appear)<\/li>\n \t<li>Insert the blockquote tags<\/li>\n \t<li>Strikethrough text (also adds a date and time marker)<\/li>\n \t<li>Insert a date\/time tag<\/li>\n \t<li>Insert an image (from URL)<\/li>\n \t<li>Insert a bulleted list<\/li>\n \t<li>Insert a numbered\u00a0list<\/li>\n \t<li>Add list item<\/li>\n \t<li>Open and close &lt;code&gt; tags, to style text as code<\/li>\n \t<li>Insert a 'Read More' tag (beta)<\/li>\n \t<li>Close tags (automatically closes any open tags)<\/li>\n \t<li>Open and close footnote shortcode<\/li>\n<\/ol>","rendered":"<div class=\"textbox\">\n<p>When writing and editing your work in Pressbooks, you have a choice between working in the &#8220;Visual Editor&#8221; and the &#8220;Text Editor&#8221; according to your preferences. This chapter will cover the different features of:<\/p>\n<ul>\n<li><a href=\"#visualeditortoolbar\">Visual Editor<\/a><\/li>\n<li><a href=\"#texteditortoolbar\">Text Editor<\/a><\/li>\n<\/ul>\n<\/div>\n<h2><a id=\"visualeditortoolbar\" href=\"\"><\/a>Visual Editor<\/h2>\n<p>The visual editor is the\u00a0default editor. It is a WYSIWYG (What You See Is What You Get) interface that allows you to see styling and formatting as they are applied.<\/p>\n<p>This interface also\u00a0includes a toolbar that the top of the editor. While most options are straightforward, there are a range of buttons whose functions\u00a0might not be obvious at first. Below is a guide to each of the toolbar functions, and where you&#8217;ll find them.<\/p>\n<div class=\"textbox\"><strong>NOTE:\u00a0<\/strong>While much of this formatting is possible in other programs, such as MS Word, applying it in the Pressbooks editing interface ensures it will function correctly in all outputs. For more, read our chapter on <a href=\"\/iotb\/chapter\/bad-markup-bad-formatting\/\">common formatting problems<\/a>.<\/div>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/pressbooks.com\/app\/uploads\/sites\/10270\/2016\/08\/Screen-Shot-2019-03-06-at-10.33.09-AM-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-120\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2023\/03\/Screen-Shot-2019-03-06-at-10.33.09-AM-1.png\" alt=\"Visual editor toolbar with tools numbered\" width=\"731\" height=\"225\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2023\/03\/Screen-Shot-2019-03-06-at-10.33.09-AM-1.png 731w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2023\/03\/Screen-Shot-2019-03-06-at-10.33.09-AM-1-300x92.png 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2023\/03\/Screen-Shot-2019-03-06-at-10.33.09-AM-1-65x20.png 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2023\/03\/Screen-Shot-2019-03-06-at-10.33.09-AM-1-225x69.png 225w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2023\/03\/Screen-Shot-2019-03-06-at-10.33.09-AM-1-350x108.png 350w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><\/a><\/p>\n<p><strong>Toolbar options:<\/strong><\/p>\n<ol>\n<li>Paragraph styles dropdown menu: choose from normal paragraph style, six different heading styles, or preformatted text<\/li>\n<li><strong>Bold<\/strong><\/li>\n<li><em>Italics<\/em><\/li>\n<li>Bulleted list<\/li>\n<li>Numbered list<\/li>\n<li>Blockquote<\/li>\n<li>Left-align<\/li>\n<li>Center-align<\/li>\n<li>Right-align<\/li>\n<li><a href=\"#haha\">Link<\/a><\/li>\n<li>Read more<\/li>\n<li>Toolbar toggle<\/li>\n<li>Formats dropdown menu: choose from several text indent and tracking options, as well as pullquote options<\/li>\n<li>Textboxes dropdown menu: choose from a variety of plain textboxes or predesign educational textboxes (read more <a href=\"\/iotb\/chapter\/tables-and-textboxes\/\">here<\/a>)<\/li>\n<li><span style=\"text-decoration: underline\">Underline<\/span><\/li>\n<li><del>Strikethrough<\/del><\/li>\n<li>Horizontal line<\/li>\n<li>Justify<\/li>\n<li><span style=\"color: #3366ff\">Text color<\/span><\/li>\n<li><span style=\"background-color: #ccffcc\">Text background color<\/span><\/li>\n<li>Paste as text<\/li>\n<li>Clear formatting<\/li>\n<li>Special character<\/li>\n<li>Decrease indent<\/li>\n<li>Increase indent<\/li>\n<li>Undo and\u00a0Redo<\/li>\n<li>Keyboard shortcuts guide<\/li>\n<li>Tables (read more <a href=\"\/iotb\/chapter\/tables-and-textboxes\/\">here<\/a>)<\/li>\n<li>Apply Class<\/li>\n<li><a id=\"haha\" href=\"\"><\/a>Anchor<\/li>\n<li>Super<sup>script<\/sup><\/li>\n<li>Sub<sub>script<\/sub><\/li>\n<li><code>Code<\/code><\/li>\n<li>Footnote<a class=\"footnote\" title=\"This is an example of a footnote.\" id=\"return-footnote-122-1\" href=\"#footnote-122-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a> (read more <a href=\"\/iotb\/chapter\/footnotes-and-chapter-endnotes\/\">here<\/a>)<\/li>\n<li>Convert MS footnotes<\/li>\n<li>Glossary Term (read more <a href=\"\/iotb\/chapter\/glossaries\/\">here<\/a>)<\/li>\n<\/ol>\n<p>You can highlight a section of existing content and then click a tool on the toolbar to add formatting to that section. Alternatively, select the tool first, and then add new formatted content.<\/p>\n<div class=\"textbox\"><strong>NOTE:<\/strong> The visual editor toolbar displays all formatting options by default. You can collapse the second and third rows of tools by clicking the toggle button (12).<\/div>\n<p>&nbsp;<\/p>\n<h2><a id=\"texteditortoolbar\" href=\"\"><\/a>Text Editor<\/h2>\n<p>As an alternative to the visual editor, you can also work in a text editor, or switch to it as necessary for specific needs. Here, you can view and edit\u00a0the HTML version of any text written and formatted in the visual editor, and you can also write directly in HTML, using the toolbar as necessary.<\/p>\n<p>The text editor toolbar offers fewer options, tailored to working in HTML. They are detailed below.<\/p>\n<div class=\"textbox\"><strong>NOTE:<\/strong> While you can work in HTML directly, not all HTML will work in all\u00a0exports. We recommend keeping it simple, and using the tools available in the visual editor as a guide.<\/div>\n<p><a href=\"https:\/\/pressbooks.com\/app\/uploads\/sites\/10270\/2016\/08\/Screen-Shot-2019-06-03-at-5.09.24-PM-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-121\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1.png\" alt=\"The text editor and its toolbar\" width=\"940\" height=\"512\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1.png 940w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1-300x163.png 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1-768x418.png 768w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1-65x35.png 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1-225x123.png 225w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Screen-Shot-2019-06-03-at-5.09.24-PM-1-350x191.png 350w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/p>\n<ol>\n<li>Open and close &lt;strong&gt; tags to make text bold (click once to open, and again to close the tag)<\/li>\n<li>Open and close &lt;em&gt; tags to make text italics<\/li>\n<li>Link text (a pop up will appear)<\/li>\n<li>Insert the blockquote tags<\/li>\n<li>Strikethrough text (also adds a date and time marker)<\/li>\n<li>Insert a date\/time tag<\/li>\n<li>Insert an image (from URL)<\/li>\n<li>Insert a bulleted list<\/li>\n<li>Insert a numbered\u00a0list<\/li>\n<li>Add list item<\/li>\n<li>Open and close &lt;code&gt; tags, to style text as code<\/li>\n<li>Insert a &#8216;Read More&#8217; tag (beta)<\/li>\n<li>Close tags (automatically closes any open tags)<\/li>\n<li>Open and close footnote shortcode<\/li>\n<\/ol>\n<div class=\"media-attributions clear\" prefix:cc=\"http:\/\/creativecommons.org\/ns#\" prefix:dc=\"http:\/\/purl.org\/dc\/terms\/\"><h3>Media Attributions<\/h3><ul><li >Screen Shot 2019-03-06 at 10.33.09 AM       <\/li><li >Screen Shot 2019-06-03 at 5.09.24 PM       <\/li><\/ul><\/div><hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-122-1\">This is an example of a footnote.  <a href=\"#return-footnote-122-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><\/ol><\/div><div class=\"glossary\"><span class=\"screen-reader-text\" id=\"definition\">definition<\/span><template id=\"term_122_631\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_122_631\"><div tabindex=\"-1\"><\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><\/div>","protected":false},"author":1,"menu_order":4,"template":"","meta":{"pb_show_title":"","pb_short_title":"","pb_subtitle":"","pb_authors":["pressbooks"],"pb_section_license":""},"chapter-type":[],"contributor":[62],"license":[],"class_list":["post-122","chapter","type-chapter","status-publish","hentry","contributor-pressbooks"],"part":110,"_links":{"self":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/122\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/122\/revisions\/123"}],"part":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/parts\/110"}],"metadata":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/122\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapter-type?post=122"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/contributor?post=122"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/license?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}