When you first use the editor, you'll find sometimes you get stuck into a situation that you cannot seem to get out. Especially the text you're modifying is at the end. So here comes the first rule of thumb:

    Type it in first, change it later.

For example, if you wish to make a piece of text red, type it in, type a little beyond that piece of text, then highlight it and change it to red. 


Change style attributes on a block of text is tricky. The reason is that the editor does not allow nested span tags.  I found the following procedure allows you to set style class to a block of text (by block I mean a paragraph.)

1. Highlight the block, and press the Justify left button .
2. Unhighlight the block, by clicking at the beginning of the block (the first letter is almost always a good choice).
3. Set the style class by using the style class dropdown menu.

Images can be dragged from a browser window into the editor. However, the size of the image can get wrong  if it is not displayed at its original size. You can resize the image in the editor by dragging the handle at the corner of the image, but most of the time, the editor couldn't record the size. One reliable method of setting image size is using "Image" popup dialogue, available by clicking the icon. You can set a few other image attributes there. Unfortunately, if you accidently rescale the image again in the future, the size may get lost again. So here is the second rule of thumb.

    Don't scale images, display your images in their native sizes.

Of course, this requires that you first process your image using photo touching tools. For external images that you have no control over, just  set the size and remember not to scale it inside the editor.