Highlighting text and selecting this button will open a modal window where an author can enter a destination URL, choose whether or not to open in a new window, or choose to link to another page on their own site. Link (chain icon): The link icon is available for clicking only when text is highlighted.In HTML, since there are no native tags for alignment, TinyMCE adds a tag around the paragraph with a style=align: applied to it An author need not highlight a whole paragraph, as this style will be applied from one full return to another. Most themes align text to the left by default and this is how an author can break out of that mold. Left, Center and Right Align: These buttons will align highlighted text.Horizontal Rule: Inserts a horizontal rule (a line) between elements.The style of it will vary from theme to theme, but most of the time italic text is used, it is indented, and may have quotes around it automatically. Blockquote: Highlighted text will be indicated as a blockquote, which typically means that a whole passage has been quoted from another source.In HTML, this uses the (ordered list) tag in combination with the list item Numbered List: Similar to above, but with numbers.In HTML, this uses a set of and tags for the “unordered list” and the “list items” Lists can be nested - a bulleted list may have a numbered list inside of it. Depending on your theme’s style, the bullets may be round or square. Bulleted List: Highlighted text will be formatted like a bulleted list.This uses the tag, and it is used to indicate text for deletion or removal, or to indicate that a change in the text has taken place Strikethrough: Highlighted text will appear with a line through the center.Can be used in combination with the bold button. Italic: Highlighted text will become italic.Hotkey is ⌘ b (see the Help modal window for a list of Hotkeys and how to use them) Bold: Highlighted text will become bold.Content View Switcher: The Editor window can function as a Visual Editor ( WYSIWYG), or as an HTML editor for those more adventurous ( more about plaintext).Add Media: This button invokes an overlay for all of the uploaded media - images, documents, galleries, etc… Plugins will insert an icon in this area for additional media. When you first use WordPress the “kitchen sink” is automatically set to off, so the Editor window will most likely look like this, with the following options: This helps you craft content that will look great before you even hit the Save Draft button and preview it. Most people are familiar with it for posts, and it looks like this: Hover over any of the buttons to get a quick description of what they are.Ī good theme should have some styles set up so that content in this window more closely resembles how it will look in your theme - colors, font, heading styles, etc. The “WordPress Editor” window is the main focus of any page that produces content in the WordPress admin section. Luckily, the WYSIWYG Editor does the grunt work for you. Most of the options are similar to those in a Word Processor - bold, italic, bulleted list style, etc… When designers like myself start to throw out terms like h1 and blockquote, most people’s eyes glaze over, but that is how these options are stored as HTML elements. The editor is pretty powerful, with multiple buttons and options for writing content. WYSIWYG is an acronym for “What You See Is What You Get” and it is the best way to craft content before saving your post. WordPress uses a javascript plugin called TinyMCE for its WYSIWYG editor. Updated January, 2016 to include screenshots and options from WordPress 4.4įor the over 74 million sites in the world using WordPress, it is amazing to me that there is no great tutorial to point our clients to about the WordPress Editor window. 1 2 3 4 5 6 7 8 9 10 11 12 < p > Welcome to the TinyMCE jQuery example! < /p > 13 14 15 $ ( 'textarea#tiny' ).
0 Comments
Leave a Reply. |