{"id":72,"date":"2016-08-30T18:06:15","date_gmt":"2016-08-30T18:06:15","guid":{"rendered":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/edit-content-with-the-visual-text-editors\/"},"modified":"2024-09-19T04:19:26","modified_gmt":"2024-09-19T04:19:26","slug":"edit-content-with-the-visual-text-editors","status":"publish","type":"chapter","link":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/edit-content-with-the-visual-text-editors\/","title":{"raw":"Edit Content with the Visual & Text Editors","rendered":"Edit Content with the Visual & Text Editors"},"content":{"raw":"When writing and editing your book in Pressbooks, you can choose between a default \"Visual Editor\" which displays your content with shows you much of the styling and formatting you have applied or a \"Text Editor\" which displays the full HTML structure of your content without any CSS applied.\n

<\/a>Use the Visual Editor<\/h1>\nThe visual editor is the default 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. This interface also includes a toolbar that the top of the editor. The visual editor toolbar displays all formatting options by default. You can collapse the second and third rows of tools by clicking the Toolbar toggle button (Shift + Alt + Z) and can move into a 'Distraction-free writing mode' by pressing 'Shift + Alt + W'.\n\nTo shift focus to inline toolbar when an image, link, or preview is selected, press 'Alt + F8`' (fn + F8 on a Mac); to shift focus to the visual editor menu, press 'Alt + F9' (fn + F9 on a Mac); to shift focus to the visual editor toolbar, press 'Alt + F10' (fn + F10 on a Mac); and to shift focus to the elements path, press 'Alt + F11' (fn + F11 on a Mac). You can also view a set of Keyboard Shortcuts for various keys in the visual editor by pressing 'Shift + Alt + H'.\n\n\"Visual\n

Visual toolbar options:<\/h2>\nTop row:\n
    \n \t
  1. Paragraph styles dropdown menu: choose from normal paragraph style (Shift + Alt + 7), six different heading styles (Shift + Alt + 1-6), or preformatted text<\/li>\n \t
  2. Bold <\/strong>(Ctrl + B)<\/li>\n \t
  3. Italics\u00a0<\/em>(Ctrl + I)<\/li>\n \t
  4. Unordered (bulleted) list (Shift + Alt + U)<\/li>\n \t
  5. Ordered (numbered) list (Shift + Alt + O)<\/li>\n \t
  6. Blockquote (Shift + Alt + Q)<\/li>\n \t
  7. Left-align (Shift + Alt + L)<\/li>\n \t
  8. Center-align (Shift + Alt + C)<\/li>\n \t
  9. Right-align (Shift + Alt + R)<\/li>\n \t
  10. Link<\/a> (Ctrl + K)<\/li>\n \t
  11. Read more (Shift + Alt + T)<\/li>\n \t
  12. Toolbar toggle (Shift + Alt + Z)<\/li>\n<\/ol>\nSecond row:\n
      \n \t
    1. Formats dropdown menu: choose from several text indent and tracking options, as well as pullquote options<\/li>\n \t
    2. Textboxes dropdown menu: choose from a variety of plain textboxes or predesign educational textboxes (read more here<\/a>)<\/li>\n \t
    3. Underline<\/span> (Ctrl + U)<\/li>\n \t
    4. Strikethrough<\/del>\u00a0(Shift + Alt + D)<\/li>\n \t
    5. Horizontal line<\/li>\n \t
    6. Justify (Shift + Alt + J)<\/li>\n \t
    7. Text color<\/span><\/li>\n \t
    8. Text background color<\/span><\/li>\n \t
    9. Paste as text<\/li>\n \t
    10. Clear formatting<\/li>\n \t
    11. Special character<\/li>\n \t
    12. Decrease indent<\/li>\n \t
    13. Increase indent<\/li>\n \t
    14. Undo (Ctrl + Z) and Redo (Ctrl + Y)<\/li>\n \t
    15. Keyboard shortcuts guide (Shift + Alt + H)<\/li>\n<\/ol>\nBottom row:\n
        \n \t
      1. Tables (read more here<\/a>)<\/li>\n \t
      2. Apply Class<\/li>\n \t
      3. <\/a>Anchor<\/li>\n \t
      4. Superscript<\/sup><\/li>\n \t
      5. Subscript<\/sub><\/li>\n \t
      6. Code<\/code> (Shift + Alt + X)<\/li>\n \t
      7. Footnote[footnote]This is an example of a footnote.[\/footnote]<\/li>\n \t
      8. Convert Microsoft Word footnotes<\/li>\n \t
      9. LaTeX shortcode<\/li>\n \t
      10. Glossary [pb_glossary id=\"132\"]Term[\/pb_glossary]<\/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

        <\/a>Use the Text Editor<\/h1>\nYou can also choose to work in a text editor, or switch to it as necessary as needed (to clean up messy HTML for example). The text editor allows you to directly view and edit your book's HTML content as HTML.\n

        Text Editor Options<\/h2>\nThe text editor toolbar offers fewer options, tailored to working in HTML. None of the buttons in the HTML editor have keyboard shortcuts, but their functionality is detailed below.\n\n\"The\n
          \n \t
        1. Open and close <strong><\/code> tags to make text bold (click once to open, and again to close the tag)<\/li>\n \t
        2. Open and close <em><\/code> tags to make text italics<\/li>\n \t
        3. Insert Link text (a pop up will appear)<\/li>\n \t
        4. Insert <blockquote><\/code> tags<\/li>\n \t
        5. Strikethrough text (<del><\/code> tags)<\/li>\n \t
        6. Insert a date\/time tag<\/li>\n \t
        7. Insert an image (from URL)<\/li>\n \t
        8. Insert an unordered (bulleted) list<\/li>\n \t
        9. Insert a ordered (numbered) list<\/li>\n \t
        10. Add list item<\/li>\n \t
        11. Open and close <code><\/code> tags<\/li>\n \t
        12. Insert a 'Read More' tag (<!--more-->)<\/code><\/li>\n \t
        13. Close tags (automatically closes any open tags)<\/li>\n \t
        14. Insert footnote shortcode<\/li>\n<\/ol>\n

          HTML Basics<\/h1>\nPressbooks is designed to make it easy for you to create attractive webbooks and export files without knowing much about book design or web development. Our ability to do this, however, is constrained in many ways by the quality of the underlying 'markup' in your book. Pressbooks uses H<\/strong>yperT<\/strong>ext M<\/strong>arkup L<\/strong>anguage [HTML] to provide the content and structure of your book and C<\/strong>ascading S<\/strong>tyle S<\/strong>heets (CSS) to apply the styles that control the appearance of your webbook and export files. You don't need to know HTML or CSS to use Pressbooks, but understanding a little bit about how they work will help make sure your books look good when you export from Pressbooks.\n
          NOTE:<\/strong> Pressbooks' visual editor allows you to write your book and apply several style choices without ever seeing any of your book's underlying HTML. If you've find that you have formatting problems with your output, however, it's almost always caused by problems with your book's underlying markup.<\/div>\nHere is a brief passage of text with some formatting:<\/span>\n
          A long, long<\/em> time ago, in a galaxy far, far away, there lived a fine young man unaware<\/strong> of various things about his past.<\/div>\nThis is what you might write into the VISUAL editor of Pressbooks. But if you look at the TEXT editor, you'll see that the way that italic <\/em>and bold <\/strong>is achieved is through \"markup\", or HTML. So the markup of that text looks like:\n
          A long, <em>long<\/em> time ago, in a galaxy far, far away, there lived a fine young man <strong>unaware<\/strong> of various things about his past.<\/code><\/div>\nThe <em>tag<\/em><\/em> specifies that a text should be italicized. The <strong>tag<\/strong> <\/strong>specifies that it should be bold.\n\nA reader reading an ebook, or a print book, or a web page won't see those tags. They are instead used to tell the ebook software, or browser, how those words should look. In addition to the em and strong tags, there are a handful of other basic HTML tags you should know about:\n\n\n\n\n\n\n\n\n\n
          tag name<\/strong><\/td>\nused for<\/strong><\/td>\n\u00a0tags<\/strong><\/td>\n<\/tr>\n
          strong<\/td>\nused to make text bold<\/td>\n<strong> \u00a0or <b><\/code><\/td>\n<\/tr>\n
          emphasis<\/td>\nused to make text italic<\/td>\n<em> or <i><\/code><\/td>\n<\/tr>\n
          blockquote<\/td>\nused to quote a long text, can be used for instance for a letter, a poem etc<\/td>\n<blockquote><\/code><\/td>\n<\/tr>\n
          unordered list<\/td>\nused to create a list with bullets<\/td>\n<ul><li>item 1<\/li><li>item 2<\/li><\/ul><\/code><\/td>\n<\/tr>\n
          ordered list<\/td>\nused to create a numbered list<\/td>\n\u00a0<ol>\n<li>item 1<\/li>\n<li>item 2<\/li>\n<\/ol><\/code><\/td>\n<\/tr>\n
          headings<\/td>\nused to make headings in your document<\/td>\n<h1>, <h2>, <h3> ... <\/h6><\/code><\/td>\n<\/tr>\n<\/thead>\n<\/table>\nHere is an extended version of the text from above with more HTML tags:\n
          \n

          The Background<\/h3>\nA long,\u00a0long<\/em>\u00a0time ago, in a galaxy far, far away, there lived a fine young man\u00a0unaware<\/strong>\u00a0of various things about his past, including:\n