WYSIWYG Editor User's Guide

Discussion in 'Forum News' started by nobodynose, May 6, 2016.

  1. nobodynose

    nobodynose Moderator

    Joined:
    Sep 30, 2012
    Messages:
    4,191
    Motherboard:
    ASRock Z270M Pro4
    CPU:
    i7-7700K
    Graphics:
    GTX 1060
    Mac:
    iMac, MacBook, MacBook Pro, Mac mini
    Classic Mac:
    iBook, iMac, Quadra
    Mobile Phone:
    Android, iOS
    May 6, 2016 at 5:58 PM #1
    nobodynose

    nobodynose Moderator

    Joined:
    Sep 30, 2012
    Messages:
    4,191
    Motherboard:
    ASRock Z270M Pro4
    CPU:
    i7-7700K
    Graphics:
    GTX 1060
    Mac:
    iMac, MacBook, MacBook Pro, Mac mini
    Classic Mac:
    iBook, iMac, Quadra
    Mobile Phone:
    Android, iOS
    User's Guide to the XenForo WYSIWYG Editor
    This guide intends to explain how to use the XenForo WYSIWYG editor. Note that the editor isn't truly WYSIWYG ("what you see is what you get") -- while the majority of the formatting options are displayed immediately in the editor (indicated by "WYSIWYG"), some are displayed (until previewed or posted) as their BBCode markup equivalents (indicated by "BBCode").

    Text Style: Bold, Italic, and Underline (WYSIWYG)
    text_style.png
    These three buttons make the selected text Bold, Italicized, or Underlined, respectively. You may also use them to toggle these modes on and off for text as you enter it. Keyboard shortcuts for these are ⌘-B, ⌘-I, and ⌘-U (OS X); or Ctrl-B, Ctrl-I, and Ctrl-U (Windows/Linux), respectively. All of these modes may be combined with each other, and with the Text Appearance modes below.

    Text Appearance: Text Color, Font Size, and Font Family (WYSIWYG)
    text_appearance.png
    These three buttons change the Color, Size, or Font Family (typeface) of the selected text, respectively. You may also use them to toggle these modes on and off for text as you enter it. All of these may be combined with each other, and with the Text Style modes above.

    Hyperlinks: Create Link and Remove Link (WYSIWYG)
    hyperlinks.png
    These two buttons are used to create, modify, and remove hyperlinks. To create a link, select the text you wish to use for the link and click the first button. A dialog will pop up allowing you to enter the URL:

    link_dialog.png

    This same dialog can be used to modify an existing link - just select the linked text, click the link button, and the dialog will pop up with the current URL already filled in. You can then modify the URL and save your changes.

    The second button (the one with the "x" on it) is used to remove an existing link - select the linked text and click the Remove Link button. The link will be removed and the text restored to its normal appearance.

    Text Alignment (menu): Align Left, Align Center, and Align Right (WYSIWYG)
    align_menu.png
    This menu allows you to choose how you want the selected text to be aligned on the screen: left, center, or right. Examples:

    This is left-aligned text.
    This is center-aligned text.
    This is right-aligned text.

    Lists and Indentation: Bulleted List, Numbered List, Outdent, and Indent (WYSIWYG)
    lists_indent.png
    The first two buttons create a list from the selected text, one list item per new line. You can choose from a Bulleted (unordered) list or a Numbered (ordered) list. The second two buttons shift the text a fixed amount to the left (Outdent) or to the right (Indent). Examples:

    Bulleted List
    • Item 1
    • Item 2
    • Item 3

    Numbered List
    1. Item 1
    2. Item 2
    3. Item 3

    Indent and Outdent
    Normal text.The quick brown fox jumped over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque nulla, sed feugiat nisl.
    Indented text. The quick brown fox jumped over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum dignissim enim non semper.​
    Outdented text. The quick brown fox jumped over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, ligula ac maximus imperdiet, nisl eros pellentesque velit, sed egestas enim lorem sit amet dui.​

    Insert Media: Emoticon (or "Smilie"), Image, and Video (WYSIWYG)
    insert_media.png
    The first button (Emoticon) causes a selection of emoticons to pop up at the bottom of the edit window. You can then click on the desired emoticon to insert it into your post. :wave:

    The second button (Image) pops up a dialog allowing you to enter a URL for an externally hosted image, to be displayed inline in your post (as opposed to uploading an image to tonymacx86.com and displaying it).

    image_dialog.png

    The third button (Video) pops up a dialog allowing you to enter a URL for a video hosted at any of the following websites:
    • Dailymotion.com
    • Facebook.com
    • LiveLeak.com
    • Metacafe.com
    • Vimeo.com
    • YouTube.com
    The video is embedded in your post, without being autoplayed (that would just be obnoxious!)

    video_dialog.png

    Miscellaneous Formatting (menu): Quote, Spoiler, Code, and Strike-through (BBCode)
    misc_menu.png
    This menu allows you to choose various other text formatting styles: Quote, Spoiler, Code, or Strike-through.

    Quote inserts formatting tags around the selected text to format it as a block quote. Example - this text, wrapped in {QUOTE} {/QUOTE} tags (with square brackets, not curly braces):
    Code:
    [QUOTE]This is some quoted text.[/QUOTE]
    
    will result in this:
    Options that are added to QUOTE by default display the name of the person who originally posted the quote, along with an arrow that when clicked, will take the reader to the original posting. These options:
    Code:
    [QUOTE="nobodynose, post: 1247858"]
    
    will result in a quote header that looks like this:
    quote_header.png
    where the arrow takes you to the original post containing the quote. It is usually unnecessary to modify or otherwise touch these options.

    Spoiler pops up a dialog for creating a "spoiler alert", that is, a button which unhides or hides the given text so that the user is in control of whether he or she wants the text displayed. The term "spoiler" originated with TV and movies, where discussion of plot elements may "spoil" the show or movie for those who haven't yet seen it.

    spoiler_dialog.png

    Spoiler inserts formatting tags around the selected text to hide it until the reader clicks the button. Example - this text, wrapped in {SPOILER} {/SPOILER} tags(with square brackets, not curly braces):
    Code:
    [SPOILER="Spoiler Alert!"]This is a spoiler.[/SPOILER]
    
    will result in this:
    This is a spoiler.

    Code inserts formatting tags around the selected text to format it as computer code, which means it is displayed in a monospaced font and all spaces are treated as non-breaking spaces (so that whitespace in the code is indented as it should be, and long lines are possible without the text wrapping). Example - this text is wrapped in {CODE} {/CODE} tags (with square brackets, not curly braces):
    Code:
        on helloWorld()
            display dialog "Hello World!" buttons {"OK"}
        end helloWorld
    
    Strike-through inserts formatting tags around the selected text to format it as stricken text (with a horizontal line drawn through it). Example - this text, wrapped in {S} {/S} tags (with square brackets, not curly braces):
    Code:
    [S]This text is stricken.[/S]
    
    will result in this:

    This text is stricken.

    Media Gallery Embed (WYSIWYG)
    media_gallery.png
    This button allows you to embed images you have stored in a media album on this site into your post. If you do not have any albums or images stored, you'll see a message at the bottom of the edit window, with a link inviting you to add media:

    add_media.png
    Clicking this link will give you a dialog which will step you through the process of creating a media album and uploading images to it. If you do have images in an album, they will be displayed as thumbnails at the bottom of the edit window:

    my_media.png
    You can embed an image from your media albums by clicking its thumbnail; it will be embedded at the current position.

    Newegg Affiliate Link (BBCode)
    newegg.png
    This button adds a set of tags around the selected URL text to make it into a Newegg.com affiliate link. The text must be the URL of a Newegg.com product page in order for the link to work. Every time someone clicks a Newegg.com affiliate link on this site and purchases the product, tonymacx86.com earns a commission for the referral. So by creating Newegg.com affiliate links, you're supporting tonymacx86.com. (Amazon.com has a similar affiliate program, of which tonymacx86.com is also a member. However, Amazon.com product links have the affiliate code automatically embedded by the forum software.)

    Undo and Redo
    undo_redo.png
    The Undo button backs out the most recent action you performed in the editor - entering text, changing a font, etc., and has the keyboard shortcut ⌘-Z (Ctrl-Z on Windows/Linux). Redo repeats the previous action you performed in the editor, and has the keyboard shortcut ⌘-Y (Ctrl-Y on Windows/Linux).

    Remove Formatting
    remove_formatting.png
    The Remove Formatting button removes all formatting, images, and so on from the selected text, returning it to plain text in the default font size, typeface, etc.

    Use BBCode Editor
    use_bbcode.png
    The Use BBCode Editor button switches you from the WYSIWYG view in the editor to a code view, similar to working with the source HTML code in a regular web page. This view reveals - and allows you to directly edit - all the BBCode tags that the WYSIWYG editor has inserted in your post (tags which are rendered as text formatting, embedded images, etc.)

    Drafts (menu): Save Draft and Delete Draft
    drafts_menu.png
    This menu is only available in the WYSIWYG editor when you are creating a new post (including replying to another member's post); it isn't available when you are editing one you've already posted.

    Save Draft retains the text and formatting you've entered so far into the editor, so you can leave the page and come back to it later if you want, and the editor will be pre-populated with your saved work.

    Delete Draft removes the text and formatting you previously saved (with Save Draft), so that it won't come back next time you start to create a new post.

    Other Buttons
    misc_buttons.png
    post_reply_button.png save_button.png more_options_button.png
    These buttons perform various functions, and which ones you have available to you vary whether you are creating a post for the first time, editing your own post, or replying to someone else's post.

    ButtonFunction
    Create ThreadSaves your post when you are creating a new post, making it public.
    Post ReplySaves a post that you are creating in response to someone else's post, making it public.
    Save ChangesSaves modifications you are making to a previous post you are editing, making them public.
    Upload a FileFor uploading images and other attachments (see Working with Attachments for more information).
    PreviewShows you what your post will look like to forum members once you have saved it. Note that Preview does *not* save your work.
    Insert QuotesAdds any quotes from other posts that you've marked for inclusion in your post, inserting them (with the appropriate BBCode tags) into your post at the current position.
    More OptionsSwitches your view from a simplified version of the editor to the full WYSIWYG editor.


    Working with Attachments
    Attachments are very easy to work with in XenForo. The method for attaching a file to a post is the same for images as well as other types of files: click the Upload a File button. This gives you a standard operating system dialog box, which will allow you to choose a file to upload. You can select multiple files at once by holding down the ⌘ key (Ctrl in Windows/Linux) in the dialog. Not all file types are allowed as attachments; the allowed file types are:

    File TypeExtension
    ZIP archive.zip
    RAR archive.rar
    Text file.txt
    PDF document.pdf
    PNG image.png
    JPEG image.jpg, .jpeg, or .jpe
    GIF image.gif
    ACPI machine language binary.aml
    ACPI source file.dsl
    OS X disk image.dmg
    ISO image.iso
    MultiBeast config file.mb
    Property list file (XML).plist
    IOJones file.iojones
    IORegistryExplorer file.ioreg


    Images (with filenames ending in .png, .jpg, .jpeg, .jpe, and .gif) are treated differently from other attachment types as you can embed them within your post. You can embed them either as a thumbnail (which will display full size when it's clicked on) or full size, using the Thumbnail or Full Image button that's displayed with each image. Clicking either button will embed the image at your current cursor position.

    Kernel extensions (.kext "files") are a special case - since they are technically folders, they have to be zipped (compressed) before they can be uploaded as attachments.

    Tables
    Tables can be created in postings by switching to the BBCode Editor mode. The BBCode markup for a simple table looks like this:
    Code:
    [TABLE]
    [TR][TH="grid:none"] [/TH][TH]Header A[/TH][TH]Header B[/TH][TH]Header C[/TH][/TR]
    [TR][TH]Row 1[/TH][TD]1A[/TD][TD]1B[/TD][TD]1C[/TD][/TR]
    [TR][TH]Row 2[/TH][TD]2A[/TD][TD]2B[/TD][TD]2C[/TD][/TR]
    [TR][TH]Row 3[/TH][TD]3A[/TD][TD]3B[/TD][TD]3C[/TD][/TR]
    [/TABLE]
    
    and renders like this:

    Header AHeader BHeader C
    Row 11A1B1C
    Row 22A2B2C
    Row 33A3B3C


    Options available for tables are at the cell (TD and TH) level are:
    grid:none to remove gridlines
    bgcolor:color_descriptor to fill the cell background with a color other than white. color_descriptor is either a standard color name (e.g. "black", "gray", "red", etc.) or an HTML hex #rrggbb code (e.g. "#FF0000" for red, "#0000FF" for blue, "#C0C0C0" for a medium gray, etc.)​

    For example:
    Code:
    [TABLE]
    [TR]
    [TH="grid:none"] [/TH]
    [TH="grid:none,bgcolor:#00AA00"][COLOR=#FFFFFF]Header A[/COLOR][/TH]
    [TH="grid:none,bgcolor:gray"][COLOR=#0000FF]Header B[/COLOR][/TH]
    [TH="grid:none,bgcolor:black"][COLOR=#FFFFFF]Header C[/COLOR][/TH]
    [/TR]
    [TR]
    [TH="grid:none"]Row 1[/TH]
    [TD="grid:none"]1A[/TD]
    [TD="grid:none"]1B[/TD]
    [TD="grid:none"]1C[/TD]
    [/TR]
    [TR]
    [TH="grid:none"]Row 2[/TH]
    [TD="grid:none"]2A[/TD]
    [TD="grid:none"]2B[/TD]
    [TD="grid:none"]2C[/TD]
    [/TR]
    [TR]
    [TH="grid:none"]Row 3[/TH]
    [TD="grid:none"]3A[/TD]
    [TD="grid:none"]3B[/TD]
    [TD="grid:none"]3C[/TD]
    [/TR]
    [/TABLE]
    
    removes gridlines from the table above and changes the background colors of the specified cells, like so:

    Header A Header B Header C
    Row 1 1A 1B 1C
    Row 2 2A 2B 2C
    Row 3 3A 3B 3C


    Post Options
    At the end of the posting form, after the edit window and attachments list, there is a pair of checkboxes:
    options.png
    These control notifications for the thread. Select the first checkbox ("Watch this thread") to be notified in the alert dropdown at the top of your screen whenever someone posts a reply to the thread. Select the second checkbox ("receive email notifications") to receive an email notification as well.
     
    Last edited: May 8, 2016
  2. Stork

    Stork Admin Staff Member

    Joined:
    Sep 21, 2010
    Messages:
    12,239
    Motherboard:
    ASUS ROG MAXIMUS X HERO Z370
    CPU:
    i7-8700K
    Graphics:
    RX 580
    Mac:
    MacBook Pro, Mac mini, Mac Pro
    Classic Mac:
    Power Mac, PowerBook
    Mobile Phone:
    iOS
    May 7, 2016 at 1:34 PM #2
    Stork

    Stork Admin Staff Member

    Joined:
    Sep 21, 2010
    Messages:
    12,239
    Motherboard:
    ASUS ROG MAXIMUS X HERO Z370
    CPU:
    i7-8700K
    Graphics:
    RX 580
    Mac:
    MacBook Pro, Mac mini, Mac Pro
    Classic Mac:
    Power Mac, PowerBook
    Mobile Phone:
    iOS
    Good job. I've learned several editing items that I though I could only do in the BBCode (plain) editor.
     
  3. hpsychedelic

    hpsychedelic

    Joined:
    May 6, 2015
    Messages:
    61
    Motherboard:
    GA-Z97MX-Gaming 5
    CPU:
    i7 4790k
    Graphics:
    GTX 1080ti SC2
    Mac:
    MacBook Air
    Mobile Phone:
    iOS
    Sep 28, 2016 at 3:20 AM #3
    hpsychedelic

    hpsychedelic

    Joined:
    May 6, 2015
    Messages:
    61
    Motherboard:
    GA-Z97MX-Gaming 5
    CPU:
    i7 4790k
    Graphics:
    GTX 1080ti SC2
    Mac:
    MacBook Air
    Mobile Phone:
    iOS
    Save draft is not working though. I started writing a guide on Sunday and now I come back and nothing gets pre-populated. It used to in the past (last year). Should have saved it locally as usual...
     
  4. adamsmasher

    adamsmasher Data Destroyer Staff Member

    Joined:
    Jan 21, 2010
    Messages:
    6,781
    Motherboard:
    GA-Z68MX-UD2H-B3
    CPU:
    i5 2400
    Graphics:
    Sparkle 9400 GT
    Mac:
    MacBook Pro
    Classic Mac:
    eMac, iBook
    Mobile Phone:
    iOS
    Sep 28, 2016 at 3:48 AM #4
    adamsmasher

    adamsmasher Data Destroyer Staff Member

    Joined:
    Jan 21, 2010
    Messages:
    6,781
    Motherboard:
    GA-Z68MX-UD2H-B3
    CPU:
    i5 2400
    Graphics:
    Sparkle 9400 GT
    Mac:
    MacBook Pro
    Classic Mac:
    eMac, iBook
    Mobile Phone:
    iOS
    If drafts are saved by cookie (I don't know that they are - just speculating), it might have been lost when we switched the site over to SSL. Browsers treat cookies from http://www.tonymacx86.com as not the same as https://www.tonymacx86.com. It might be something else, though.

    Did you use a different brower or computer for the first draft? I'm not sure how long XenForo saves drafts.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice