Rich Text Editor

Adding stylized text to pages

Rich editing, also called WYSIWYG (which stands for What You See Is What You Get), means your text is formatted as you type. The rich editor creates HTML code behind the scenes while you concentrate on writing. In the case of PhotoShelter's rich editor, font styles, links, and images all appear approximately as they will on your PhotoShelter website.

PhotoShelter's rich HTML editor is designed to work well in all major web browsers used today. However, editing HTML is not the same as typing text. Each web page has two major components: the structure (which is the actual HTML code and is produced by the editor as you type), and the display (which is dictated by your selected PhotoShelter theme or manual customization). Some colors, sizes, or other elements (like bullets or tables) may appear changed within the context of the specific PhotoShelter theme you've chosen for your website. In these cases, CSS inheritance usually provides the most consistent look and feel for your content. If you'd like to override the appearance, you can always edit the HTML directly using the "HTML" tab on the top left corner of the editor.


Keyboard Shortcuts

Just as they will in any other text editor, most basic keyboard shortcuts will work while using the rich editor. For example:

Ctrl+C = copy 

Ctrl+X = cut

Ctrl+Z = undo

Ctrl+Y = redo

Ctrl+A = select all

Ctrl+B = bold

Ctrl+I = italics etc.

(On a Mac, use the Command key instead of Ctrl.)


Entering Plain Text

If you do not like the way the rich editor works, you can always switch to the "HTML" tab and simply input your plain text there. Plain text will be displayed on your website in the manner specified by your particular theme.


Pasting in the Rich Editor

Web Content: When pasting content from another web page, the results can be inconsistent; they will depend on your browser and on the web page from which you are pasting. The editor tries to correct any invalid HTML code that was pasted, but for best results, try using the HTML tab or one of the paste buttons you see on the second row. Alternatively, try pasting paragraph by paragraph. To select one paragraph at a time, try triple-clicking on it (this works in most browsers).

Pasting from MS Office: Pasting content from another application, like Word or Excel, is best done with the Paste from Word button on the second row. Click the "Paste from Word" button and paste your content into the pop-up window that appears. The editor will attempt to translate any characters that are not intended for the web and to format your text in compatible HTML.


International Character Mapping

Although PhotoShelter does not currently support universal use of international characters, when adding or editing text in the rich editor you may achieve your desired result using the editor's HTML character mapping feature. In the second row, click the "Insert custom character" button to display a visual map of supported characters. Selecting a character will insert it into your text at the cursor's current position.


Images and Attachments

Inserting Images: In order to display an image, it needs to be embedded. To embed an image, that image must first be hosted somewhere on the web so it has its own URL, including PhotoShelter. If you want to embed an image from PhotoShelter you need to first make sure that the image is publicly searchable. To learn more about making images publicly searchable, click here. Once the image is searchable, get the embed code by double-clicking the image so it is enlarged, and then clicking the Actions drop-down menu in the Center Pane. From there, click "Get links and embed code." Copy the image's embed code, and paste it into the rich text editor box.

There is a button in the editor toolbar for inserting images that are already hosted somewhere on the Internet. If you have a URL for an image, click this button and enter it into the "Image URL" field that appears.

Working with Images: **This section applies to our Classic Websites Platform only!**  The rich text editor allows you to manipulate the size, borders, descriptions, and hover effects associated with your image. To use these features, navigate to the "Advanced" tab within the Image dialogue. You can use the "Style" field to specify additional CSS styles.

Image Alignment: The image dialogue window allows you to specify a multitude of alignment options for your images. It is important to note that not all combinations of sizes and alignments may be compatible with all fields on your PhotoShelter pages. Specifying an image size or font size that is too large for your particular theme's content area may lead to undesirable results.


HTML in the Rich Editor

Any HTML entered directly into the rich editor will show up as text when the post is viewed. What you see is what you get. When you want to include HTML elements that cannot be generated with the toolbar buttons, you must enter it by hand in the HTML editor. Examples are tables and code, the latter of which is often used to embed content such as slideshows, videos, and badges. To do this, click the HTML tab and edit the code, then switch back to Visual mode. If the code is valid and understood by the editor, you should see it rendered immediately within the "Visual" pane.

Still have questions? Contact us.