Daily Kos Editor Toolbar: Overview

The text editor that Daily Kos provides for writers of both stories and comments includes many built-in formatting tools, displayed in a toolbar at the top of every story and comment draft window. This setup enables users to create well-styled posts with minimal effort, though it does eliminate the possibility of using additional HTML tags to style content. This resource introduces users to what the editor tools do, and do not, permit. Some of these tools--notably, the Link tool, the Table tool, the Image Library tool, and the Embed tool--also have their own reference guides, available in the Related Articles linked below.

In general, the tools work the same for draft stories as they do for comments, but there are a few exceptions. For example, the story editor supports a WYSIWYG (what you see is what you get) method of creating stories. Thus there is no other “preview” mode for a story prior to publication, though there is for a comment. Of course, comments do not offer a page break. The comment toolbar also does not offer subheader options. At the moment, the toolbar displayed in comments does not scroll along as you add content to the comment text window, though it will do so in a story draft window.

Toolbar Overview

Let’s start with reviewing the toolbar placement within the story draft window. Upon load it is displayed, collapsed, at the top of the story area, just below the story image area. (Note that once a story image is chosen, then a line for a caption will display between the image and the toolbar.) The toolbar is "sticky" so that it will stay attached to the top of the display as the draft grows longer. The carat at the right of the top row permits expansion and collapse of the toolbar. Expanded, the toolbar shows both rows of tools. The vertical line by the pen icon is the cursor. In hover mode, each icon in the toolbar displays the name of the tool as well as any keyboard combination available to implement the tool.

Most tools are toggles, that is, they turn on and off with a click. Most tools are designed to apply either to text as selected or to text that follows a clicking a tool on. If the latter, the format choice will continue until the tool is clicked off.  Some tools work on an entire paragraph, for example the blockquote and PRE (monocode) format tools, rather than on a word-by-word basis.

The screenshots embedded here show each row of the toolbar with explanations of most of the toolbar icons. Short but more thorough explanations for some of the tools--the Insert Link tool, the Table tool, and the Image Library tool (on the top row) and the Embed tool (on the bottom row)--are provided at the end of this resource, below the second-row screenshot. Detailed explanations of these four tools are offered through the related articles linked below.

Toolbar Icons, Top Row

The screenshot below shows the toolbar's top row along with examples of what each tool produces. The tool names that include a parenthetical ⌘ plus some other character are those that have keyboard commands.

Suggestion regarding the page break tool

Using a page break in a story helps readers and writers in multiple ways. Paradoxically enough, an effective lead-in to a story can encourage more click-throughs to the full story. (Readers often wind up feeling put off when they encounter a wall-of-text.) In addition, creating short introductions to posted stories make blog pages, especially for groups, much more pleasant and inviting. Inclusion of this feature helps support other contributors to a group, because the short introductions permit a reader to view several stories at once in the group blog view.

When the page break is included in a story, only the text and embeds above the line will appear with the story’s headline and byline on a group blog page. The text and embeds below the line will be visible only on the story page. Then, if someone chooses to click the Continue Reading link or the Read More link associated with that preview, the full story page will be loaded. The Continue Reading link loads the story at the point of the page break, while the Read More link loads the story from the beginning.

Toolbar Icons, Bottom Row

In the screenshot below, the bottom row of tools is explained, again with illustrations of the effect of each tool. You may notice that only the Strikethrough tool has an associated key command.

Special Tools

Insert Link (⌘ + K)
Clicking the Insert Link tool will open the link editor, a built-in "modal" (user-friendly popup) that provides an easy way to create a hyperlink. The link editor displays two fields to complete for the creation of a hyperlink. The text field on the top, labeled URL, is where to provide the URL to which the associated text should redirect, and the one below, labeled Display Text, is where to provide the text to be show for the link. 

The hyperlink will appear in the exact spot where your cursor was in the text box when you click the tool. Once you open the modal, then it takes priority over the text window beneath it. Thus, clicking on that text window below will dismiss the modal, without saving the text you've entered into those fields. 

People tend to use one of two methods to provide text for those fields. For the URL field, it's most often the case that you'll copy and paste the desired URL from its page rather than key it all in, though of course some URLs are short and easy enough that typing it right into the text field is faster. It is not necessary to repeat the https:// to signal the beginning of a URL, but if you do include it that's OK too; only one of them will be included in the link. 

For the text field, it's possible to select text BEFORE you click on the Insert Link tool. Doing so will populate the display text field with the selected text. But again, entering the display text directly into the text field will also work.

You must click the Insert Link button to complete the hyperlink. It is possible to check the link when a comment is in preview mode, and when the story is in draft mode. The story draft mode will offer the option to "Open in new tab" when you hover over the link.

Table

The Table tool permits addition of a table with a variety of options for formatting. Upon clicking the Table tool, a modal will display to offer the number of rows and comments, the choice to accept our default formatting, the choice for header rows or columns, and the choice for table width and height. A Table can also be given a title, which is helpful for later reference.

Image

A user may add images within the body of a story or in a comment, using the same icon that is in the Story Image field, IF you want to use an image from our own Image Library. Within a story body or in a comment, however, it is not required to use the site's Image Library. It is possible instead to insert an image directly from Flickr--the last major photo host standing--if you prefer.


Embed

You can embed tweets, YouTube videos, Facebook videos, Instagram posts, Vimeo videos, and several other kinds of sources in comments and stories. There are two methods: either paste the embed code for the source item into the embed tool that opens when you click the </> icon, or paste the source's URL right into the draft window.