The New Text Capsule

Early this morning, HubPages released our new text capsule that uses the TinyMCE 3 open source library.

We kept the look and feel pretty much the same as the old capsule.  The new features are now available for everyone.  To activate the new features, you will need to edit your profile and set the editor version to 3.  You can always switch back to the older version, if you like, by editing your profile and changing the version back to 2.

Once you activate the new features, here’s what you will see when you next edit your hub:

Screenshot of the new text capsule

Screenshot of the new text capsule

There’s now an “HTML” button and a status bar at the bottom that indicates the status of your network connection and the last time a draft was saved.  Green means that the connection is good.

The New Autosave Feature

Once you open the editor and start typing, autosave will now automatically save a draft of your text every 2 minutes.  After the first autosave, a new link appears that says “recover draft.  This link won’t appear unless there’s at least one draft saved.

Each time that an autosave is done, the following message appears: “Draft saved at … on …!”. To recover a recent draft, you click on the “recover draft” link.  Now, you will see a list of the last 5 drafts saved.

A screen shot of the new draft recovery window.

A screen shot of the new draft recovery window.

You can select on any of these drafts to review it. In this way, you can check to see what was saved before you recover.

When you click on a draft choice, you will see a new tab pop up with two additional buttons.

Screenshot of preview draft window

Screenshot of preview draft window

You can now scroll through the preview to make sure that the draft is the right one to use for your recovery. Then, you select the “use” button to update the editor text. If you are unsure, you can select the other tab button and return to the list of drafts.

If you choose not to recover an old draft, then you hit the “cancel” button to close the window.

The New Link Pop up

The updated link pop up is used in the exact same way as the old one. Select the text that you would like to use for your hyperlink and then click on the link button (the button that looks like a chain). The link tool now includes a quick link to your hubs.

The links are in alphabetical order.

Screenshot of link tool

Screenshot of new link pop up

You will also notice a link that says “show advanced options.” If you click on it, you will see two additional options:

Screenshot of link tool with advanced options showing

Screenshot of link pop up with advanced options showing

The first one “target” is the same as the previous version of the link pop up. It allows you to link in the same window or in a new window. The second option is “Tool Tip” which allows you to specify tool tip text that appears when a mouse goes over the link.

New HTML Editor

If you look at the top of the new text capsule, you will see an “html button” on the far left. If you click on this new button, you will load the new Html Editor.

Screenshot of the new html editor

Screenshot of the new HTML editor

The new Html Editor allows you copy and paste html directly or to make changes to the existing html. For now, in order to keep the editor simple and reliable, we are limiting the supported html tags. You can see the list of the acceptable tags at the top of the editor.

We html editor supports word wrap. If you select this checkbox, the html will wrap to fit in the html editor window. If you unselect it, you can see how the html looks to the browser.

Because of the limited tags supported, I recommend that you use the “clean up html” button. The clean up button does two things:
1) It reformats the layout into a more human friendly layout which will make it easier to edit the tags
2) It replaces unsupported tags with supported tags.

For example, <b> is not supported so it would get replaced by <strong>. <h1> is not supported so it would get replaced by <h2>.

When you hit the “clean up button”, the unsupported tags are removed.

Keep in mind that the html does not get saved until you hit “Update the Editor”.  The html editor does not get autosaved until you hit “update to editor” so make sure to click this button.

If you decide that you want to abandon the changes made in the html, you can hit the “discard changes” button.

When you hit the “update to editor”, unsupported tags automatically get cleaned up.  if a tag get removed, a pop up box will confirm that you are ok with the changes being made. If you are not, you can hit “cancel” and manually remove the tags yourself.  You can also use the “clean html” button.

Tell Us What You Think

I hope that you enjoy these new features. Please keep your comments coming on the features that you would like to see and your opinions of the current features.

Also, thanks to everyone who sent me the friendly e-mails! I am very glad that you approve of the new text capsule features.

4 thoughts on “The New Text Capsule

  1. Hi there, everytime i attempt to edit, the text capsule leaps to the top of the page, and the save/discard buttons are missing, i have tried to drag it down but to no avail…it’s a real pain as i cannot finish anything, as i am unable to save it.

    Any assistance would highly appreciated,
    Many thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s