Showing posts with label wysiwyg. Show all posts
Showing posts with label wysiwyg. Show all posts

Oct 27, 2010

Change Text Into a Link

The WYSIWYG editor makes it easy to transform text into a link to a web page or to a document with a web address.  For example, here is an introduction to the features of the WYSIWYG editor.

You can create a l ink for an internal page, an internal document, or an external document or web address.

To create a link:
  1. Highlight the text where you want to embed the link.
  2. Click the icon that looks like a geode, and a popup will appear.



3.  Select your link 

To link to an internal page on your GeoDocs website, from the tab labeled "Internal Page" click through your navigation until the page you want is highlighted.  

To link to an internal document, click the tab marked "Internal Document" and then navigate to highlight the file you want.


To link to an external page or document, click the tab marked "External Item" and paste the address (with http:// or https://) into the field.


4.  Select your target

       None = doesn't assign a property, so goes to the default behavior for your site or browser
       Blank = open link in new window (leaves your site open in the original window)
       Parent = only used in sites that use frames.  You probably won't use this.
       Self = open link in same window (navigate away from your website in the same window)
       Top= like 'parent' this is only used in sites with frames, so you probably won't use it.

5.  Click 'Select Link' at the bottom of the window, and voila, your text is now a link.



How to unlink text:
  1. Highlight the text to be unlinked
  2. Click on the icon that looks like a globe with a chain link in front.  





Oct 26, 2010

Formatting Text with the WYSIWYG Editor

The WYSIWYG editor allows you to format text just like you were working with a word processing program, such as Microsoft Word.
  1. Highlight the text you want to change, or position the cursor on the line where you want to begin typing with the formatting.  
  2. Click the appropriate buttons for the desired format change.  (Or use keyboard shortcuts in some cases)  
Formatting that can be done with the click of a button: (or with keyboard shortcuts)
  • Bold (Ctrl+b)
  • Underline (Ctrl + u)
  • Italics (Ctrl + i)
  • Strikethrough
  • Numbers
  • Bullets
  • Indent
  • Quotes
  • Align text right, left, center, or justify (align right and left)
  • Subscript
  • Superscript


To remove formatting, simply highlight the text, and then click the eraser next to the BOLD symbol.  When you mouse over the eraser a text window reads 'remove format'.



The editor does not allow you to change text font, color or size or the background color so that content authors keep the site as consistent looking as possible.  However, there are several pre-loaded formats in your website that will allow you to make formatting changes that are consistent with the rest of the site.

These are found in the dropdown in the editor toolbar.  Your options are 'normal', 'Heading 1' through 'Heading 6', 'formatted', 'address', and 'Normal (DIV)'.  Depending on how your site is styled, these may do something and they may do nothing.  Note: When you view your text inside the WYSIWYG, you'll see it styled the way it is in the dropdown, but it will look different on the page if your page template has these headings configured differently.


Why does GeoDocs work this way?  One great thing about a content management system is that you can take the same piece of content and use it over and over again, and it can change styles to match the page where you're viewing it.  So we use a collection of styles called 'heading 2' or 'h2' instead of "green, bold, and 14 pt font" so that h2 can be a different set of styles on different pages.  This is also useful if you ever want to restyle your site you can just change the settings for all these headings and you don't have to edit every piece of content to match the new look.

Intro to the GeoDocs Text Editor

Most content types in GeoDocs 8 allow you to create rich text with links, images, and more using a 'what you see is what you get' text editor, or 'WYSIWYG' for short.  This article will give you an overall intro to the editor.  Links are provided when more detail is needed on particular features.

You must be a content author or site author within a group in order to open content for editing.  The easiest way to know is to look at your GeoDocs toolbar when you're logged in.  If you see buttons for EDIT, PREVIEW, and LIVE modes, then you are a content or site author in at least one group.

Edit-Preview-Live Buttons in GeoDocs 8

Here is the editor, with buttons labeled.  (Click to enlarge picture)

GeoDocs 8 Content Editor with buttons labeled

Most functions within the editor allow a person with little or no experience with websites to edit content.  It's not too different from working with a word processing program like Microsoft Word.  There are just a few extra functions you might not use in Word because now you're dealing with web content.

Here are some of the things you can do with the WYSIWYG editor (click to go to instructions):

Most common or easy to use functions
  • Format text - bold, italics, underline, strikethrough, numbers, bullets, indent, quotes, justify right/left/center, subscript, superscript, and title formatting.  (and remove formatting) 
  • Insert picture
  • Create links - embed a link within a word or phrase
  • Copy, paste, or cut text
  • Copy text from a file, or specifically Microsoft Word (strips out formatting)
  • Check spelling or find and replace words

Advanced users (may require some knowledge of HTML)
  • Edit the HTML directly
  • Use HTML templates
  • Insert tables, lines, symbols, and page breaks
  • Create anchor

Aug 13, 2010

How to add a Twitter Widget to your GeoDocs™ website

Putting a Twitter widget on your website is easy and can be a great way to keep it looking fresh, connect your website with your social media campaign, or to allow you to update your website from your phone! The WYSIWYG editor in GeoDocs makes it easy to add a widget to your site.


 

  1. Find and prepare the HTML code for your widget
    1. Twitter provides several different kinds of widgets on their site, with lots of different color options or no frame at all. http://twitter.com/goodies/widgets
    2. Choose Widgets for...My Website
    3. Play around with the settings until you like what you've got, and click "Finish & Grab Code". Keep that page open and start the next step in a different browser window so you can go back and forth if you need to.
  2. Log in to your GeoDocs website and switch to edit mode (or WebView Editor in GeoDocs v.7)
  3. Open a page where you want to add the widget (page>open)
  4. Add a section to the page at the Geode where you want a widget to go
    1. This can be any section type that will display the BODY field from content items- summary content, summary plus
    2. Remember- this section won't appear on the page until there is content in it and the page has been approved
    3. You must be a site author to add sections to a page! If you're not, have a site author perform this step and you'll be able to continue from here if you're a content author.
  5. Add new content item. From the section Geode dropdown (left click for v.8, right click for v.7), select 'Add new content'.
    1. Give your content a title and topic
  6. Add the html code to the body
    1. In the body field (WYSIWYG editor), click the button to see the source code. This will be blank if you have nothing in the body yet.
    2. NOW go copy your code for the Twitter widget and paste it here.
    3. Click the source code button to return to normal editing mode. (This is very important! The editor might not save the code correctly if you skip this step)
    4. You'll notice that all you see is a blank white field, and you might worry that it didn't take, but it's there!
  7. Save your new piece of content
    1. After saving the content, your brand new widget will display on your page in edit or preview mode (hit the F5 key if you don't see it right away)
    2. If you're happy with your widget, then run it through workflow (Enterprise only) or publish it so everyone can see it!
    3. You may find that you need to tweak the dimensions or reduce the number of tweets to make it fit well on the page. You can go back to Twitter's tool or try reading the code- even if you're a novice you'll probably recognize what the code means.