Editing with wySUwyg

To edit the contents of a textbox, right click inside the textbox and choose "Edit with wySUwyg" from the menu that pops up (See screenshot below). You can also use the Tools menu in Firefox, or use one of the shortcut keys listed below.

Submitting edited content: After you've finished editing, use the Submit button on the editor and your edited contents will be deposited to the original textbox. 

 Here is a screenshot of launching wySUwyg on blogger.com : (click for a larger view)

 

Background Styles

While editing, you can  choose the background style that matches most closely to the style of the page where you're posting.
Click on the editor once to activate it
Double-click on the style panel to hide it and get full width of editing space.

Here is a screenshot of the bottom part of the editor page. You can hide and show the style chooser from there. Hiding it after picking a style will give you a better view of your content. The width of this edit area will exactly match the default width of Stumbleupon page

 

Understanding Editor Toolbar

 Most of the items provided by Xinha toolbar are intuitive, you won't have any problem if you have ever used a word-processor program.

Here is a small clarification of some items that might be confusing, including two that are specific to wySUwyg at this time.

Note: The box-resize button is available in wySUwyg 2.0Beta upwards.  

Editing Help: For help for (Xinha) Editor's feature: Use the ? button inside the editor toolbar.

Keyboard Shorcuts

1. Alt+Shift+U: Launch Editor in a new tab
2. Alt+Shift+Y: Launch Editor in a new Window
3. Alt+Shift+I: Launch Editor in Full Mode (unrestricted Xinha)
   
4. Ctrl+Shift+S: Launch wySUwyg sidebar
5. Xinha (the embedded editor) offers a set of shorcuts available inside the editor. A list of these options can be accessed by using the Help button on the editor toolbar.

Save and Reuse Favourite Code

Use the sidebar ont the right. The controls for adding and managing code snippets are at the bottom.
Use Add button to save the current editor contents for reuse.
To reuse a code-snippet, just drag it from the list onto the editor.

Adding your favourite fonts In your browser, go to Tools -> Launch wySUwyg Editor -> Additional Fonts
In the font dialog box, right some font name (e.g. -Hello) on the left and related fonts (e.g. -Lucida Handwriting, Lucida Console) on the right.
The font name will appear in the font selection drop-down.
Choosing the font name will insert the code provided by you.

Turning off StumbleUpon specific features Although StumbleUpon is so restrictive that if a piece of HTML is acceptable there it will probably be OK with most sites on the web, but if you want a less restrictive editor with many more features, use the Launch Xinha Full option in the context menu. Or you can use the browser's Tool's menu
Tools->Launch wySUwyg Editor->Launch Xinha Full

As you can see from this toolbar, this mode has many more features than the restricted mode: 

Locating Browser Menus for wySUwyg Menus: wySUwyg menus are located in these places-

1. Context Menu (right-click popup) inside a textbox to launch the editor
2. Context Menu outside a textbox has "Toggle wySUwyg Sidebar"
3. View->Sidebar-> wySUwyg Sidebar
4. Tools->Launch wySUwyg Editor-> This option shows all the tools available [viz. opening in Tab or window, Opening uncustomised Xinha editor, Opening Sidebar,History or Help, and setting wySUwyg Preferences]

Locating Help inside wySUwyg

Editing Help: For help for (Xinha) Editor's feature: Use the ? button inside the editor toolbar.
There is no separate built-in Help for other features, however there is something useful to be found in tooltips that appear when you leave the cursor over some of the items, or somewhere on the opened panel. Some important info is given on the right side of the Tabbed Editor page.

Working with Drag & Drop Sidebar

The wySUwyg sidebar is a regular firefox sidebar application with drag and drop support. You can drag images from any webpage(for instance, your online photo album) onto the wySUwyg sidebar. From there you can drag them onto the editor.You can also use the sidebar for dragging plain text and HTML.

The sidebar has two tabs, Image and HTML.

1. For HTML: Open the Html tab on the sidebar. Now you can select anything on a page and drag the selection onto this. A small textbox will appear, containing the HTML Source for the selection.
2. For Text: The text box is on top part of the Image tab. Works same as above, select some text and drag it,  instead of html source, it will only grab the text from dragged data (even things like src and alt from a dragged image, if you choose to drop one).
3. For Images: Just drag and drop on any of the three boxes for image. You can drop as many images on each box as you wish.
   
4. Removing items: To remove an image, double-click on it. The text-boxes created for html and text cannot be removed as of now.
5. And...by design , all the dragged data is removed from the sidebar when you close the sidebar (even if by opening the browser history)

Using the new 'Insert Box' Feature You can add boxed text to your posts using wySUwyg. It not only supports Div, but also uses other elements to support boxes on sites which restric use of div, span etc.

wySUwyg History (Privacy Note) wySUwyg remembers the history of pages edited through it. You can access this history from the wySUwyg menu-item on your tools menu. You can also delete individual entries from there.
You can switch off this feature from the wySUwyg Preference pane. (In Firefox. go to Tools-> Extensions, then right-click on wySUwyg Editor, select Options.)

.: Tips :. Here are few handy titbits I discovered as I used the editor:

1. Before centering or making link, or 'boxing' an element, it's a good idea to add some text after it. Otherwise you might get 'locked' inside that block.
2. The best way of copying a link is to select and copy it as it appears on a page, and just paste the thing on the editor. After pasting, you can always change the text displayed for the link, without opening the Link Dialog.