[V4.0] User Manual: Basic Editing

Craig Riecke edited this page Aug 16, 2014 · 19 revisions
Clone this wiki locally

This section covers tasks that content editors do most often. For the purposes of this section, all examples assume a locally running copy of BrowserCMS, accessed as http://localhost:3000. A site hosted elsewhere might be running at http://yourcms.yourcompany.com.

Logging into BrowserCMS

To access that administrative portions of BrowserCMS you have to go to the admin login page. To do this, add /cms to your website’s URL. Working locally, this would be http://localhost:3000/cms. For site hosted elsewhere, it'll look like http://yourcms.yourcompany.com/cms.

Switch to Admin

From the /cms URL, you can login like so:

Sign In Admin

For a local site, this will be username = cmsadmin and password = cmsadmin. For a live site, this will have been randomly set during install.

After you log in, you will be sent to an edit screen for the site's home page.

Home Admin

When you visit a page in BrowserCMS, and are logged in as editor, you will see the page exactly as a visitor would, but with a menu bar at the top of the page and various tool icons scattered in the content blocks. You use the menu bar and tool icons to make changes to the page.

In Context Editing

BrowserCMS makes editing pages simple with ‘In Context Editing’. You browse the site just like a visitor would by clicking hyperlinks, menu items and buttons on the page. When you get to the page you want to edit, you just start editing it.

After you've made changes, click the Preview button at the top right of the page to see the page with your changes in it, just as users would see it.

Each asset (portlet, text, picture, or whatever) has editing tools above it. In the example below, there are four tools above the List All Books! portlet:

Edit Container

Here are the buttons and their uses:

Button Meaning
Move Up Moves asset up on the page
Move Down Moves asset down on the page
Remove Asset Removes entire text block from the page, keeping it in the asset list so you can use it on another page.
Full Edit Switch to full BrowserCMS editor. See Editing a Text Asset With The Pencil Tool below

Editing a Text Asset With Direct Edit

Text assets are the most common assets. You can edit one simply by clicking anywhere in the text:

Direct Edit

The content itself has a toolbar with standard tools like bold, underline, bulleted text, etc. If you're used to editing content with WordPress or Microsoft Word, you will feel at home here. You can copy or paste text into the text asset, add links, and other things. Here's a list of all the things you can do:

Button Meaning
Cut Cut text to clipboard. Removes the text, but makes it available to other programs through Paste.
Copy Copy text to clipboard. Like Cut, but leaves text in place.
Paste Pastes text from clipboard. Retain formatting, like bold and italic, as much as possible.
Paste Plain Text Pastes text from clipboard but removes formatting like bold and italic.
Paste from Microsoft Word Pastes text from Microsoft Word, retaining as much formatting as possible.
Undo Undoes last edit
Redo Re-applies last thing undone ... effectively undoes an undo
Spell Check Spell-checks block
Image Insert an image from the Internet. To insert images stored as BrowserCMS assets, see User Manual: Assets
Link Insert a hyperlink to another URL on the Internet, or an anchor
Unlink Remove a hyperlink from selected text and turn it back to plain text.
Anchor Set an anchor, which acts like a bookmark within a page. Use Link tool to make a hyperlink to it.
Full Edit Switched to full BrowserCMS editor, same as the identical-looking icon below the asset
Move Up Moves asset up on the page
Move Down Moves asset down on the page
Remove Asset Removes entire text block from the page, keeping it in the asset list so you can use it on another page.
Heading Level Sets a paragraph as normal text or a heading
Styles Sets styles for selected text: highlighter, typewriter font, etc.
Bold Makes selected text boldface
Italic Makes selected text italic
Remove Formatting Removes bold, italic, or other style from selected text
Number Paragraphs Makes selected paragraphs numbered. Alternatively, click this button beoffe you type to start creating numbered paragraphs. Click again to return to normal.
Bulleted Paragraphs Makes selected paragraphs bulleted, similar to numbered paragraphs above.
Decrease Indent Decrease distance to left-hand margin.
Increase Indent Increase distance from left-hand margin, i.e. indent.

When you're done editing, simply click anywhere outside the text asset. The editing toolbar will disappear, and the page will revert to Draft status as shown at the top:

Direct Edit Aftermath

If you are also a content publisher for this section, you will see a Publish button. Click the Publish button and your changes will be "live" and visible to all users. (Or you can come back and publish it later. The changed page will remain in Draft mode, and the old page will continue to be displayed to users).

Editing a Text Asset With The Pencil Tool

Alternatively you can click on the pencil icon over a text asset. This gives you a complete editing screen for the text asset:

Edit Text Container

You can also switch the Content Type to Simple Text to add plain, ordinary, unadorned text or HTML code ... if you like that sort of thing. :-)

The editing toolbar has a few more tools than Direct Edit:

Button Meaning
Source Switched to source mode where you can see and edit the raw HTML for the text.
Find Search for certain words in your text
Find and Replace Search and replace words in your text
Insert Horizontal Rule Insert a horizontal line
Table Insert or change the shape of a table
Formula Insert a mathmatical formula
Underline Underline selected text
Left Justify Left-justify selected text (the default)
Center Justify Center-justify selected text
Right Justify Right-justify selected text
Text Color Set color of selected text

When you're ready to make the change permanent, click "Publish". Like Direct Editing, this will put the page in Draft mode, ready to be published.

Adding a New Text Asset to a Page

The + tool appears at the very bottom of the page. Click on it to add a Text asset, or any other kind of asset.

Add Asset Dialog

We want to add a new Text asset, so click Add Text. The editing screen is the same one you use for editing text assets.

Add Text Asset Screen

You are required to type a name here. By naming a text asset, you can use this text asset on more than one page, which we'll discuss in [V4.0] User Manual: Assets. Once you're done adding the text, you save and publish the page like you normally would.

Adding a New Page

To add a new page to a site, click on the New menu and choose Page.

Add New Page

There are plenty of options here, but the main thing you need to fill in is Name. Like editing a page, you click Publish to make the new page live. When you do this, you'll be on the editing screen for the new page, which starts out completely blank. You then add assets with the + tool.

Add Page creates a top-level page, i.e. it doesn't belong to any particular section. To place it in a particular section, see [V4.0] User Manual: Pages.

Next: [V4.0] User Manual: Assets