After much research, we've decided to install JoomlaCK professional editory on your My Artisan Website. 

Note: If you need to make this your defaults editor (for long-time My Artisan Web customers only!): to turn the editor on, go to site>global configuration. Once loaded, click on editor and choose JoomlaCK. Click Save. Now you're ready to get started.

 

The editor is composed of two main parts: the toolbar and the content input space. At the bottom there are also three-four different view tabs (depending on if you have DocMan enabled), and the bottom right corner can be dragged to toggle the size of the editor. The screenshot below shows these parts.

editor

In this guide, we will teach you about each piece of the editor, and how they interface with each other. You will be interacting most with the content input space, so we will start there and then move on to explaining the more complicated toolbar.

Content Input

The content input space is, of course, where you input your content. All you do here is type what you want the article to say. To format this content you would use the toolbar; this includes formatting your text and the placement of images, videos, and/or external links. The content input space is merely used to type the content of your article and a way to see how everything fits together. To make the content input area larger, grab the size toggle (bottom right hand corner) and drag the box to the desired size.

Toolbar

The toolbar is where almost all of the features in your article editor reside. In this section of the guide, I will go over the toolbar in fragments, explaining each of its functions in order. Each fragment of the toolbar will be presented with a screenshot, followed by an explanation of each function shown in the screenshot.

Toolbar Fragment 1 (Edit Source Code and Save)

toolbar1

In this toolbar fragment, we see two different icons. Going from left to right, they are:

  1. Source Editor: By clicking on this, you will open a pop-up that allows you to edit the source code of the document. This is only recommended for Advanced Users who know how to write HTML, CSS, and Javascript.
  2. Save: Save the contents of the Editor. It's a good idea to do this as you are working since this program does not autosave. Tip: If you make a big mistake and want to leave the article, click close (upper right hand corner) and it will revert to your old version of the article since Auto Saving does not occur.

Toolbar Fragment 2 (Cut, Paste, Import from Word, Print, Spell Check)

toolbar2

In this toolbar fragment, we see nine different icons. Going from left to right, they are:

  1. Cut: This icon acts in the same way as any word processing application you use, and will 'cut' the text you have selected, copying it to your clipboard.
  2. Copy: Again, this icon works the same as 'copy' in your word processing application, and copies the selected text your clipboard.
  3. Paste without formatting: This icon pastes the content of your clipboard to where your cursor is located but it strips all of the formatting.
  4. Paste with formatting: This icon pastes the content of your clipboard to where your cursor is locatedwith the pre-formatting intact.
  5. Paste From External Source like Microsoft Word: This paste function is slightly different, and you should always use it if you are trying to paste something from a seperate document (e.g. a Word document) into your article. Clicking this icon pulls up a seperate screen into which you paste your text, and then you click 'Insert.' This automatically formats your text to work properly in your Simplweb article.
  6. Select All: Select all contents of the document. Also you can use ctrl+a to accomplish this.
  7. Print: By clicking the printer, you'll send a command to print the document contents.
  8. Spell Check: A new feature we love! Check the spelling inside your article.
  9. Check Spelling as you Type: Reads as you write and makes suggestions.

Toolbar Fragment 3 (Redo/Undo, Erase Styling and Find)

toolbar3

In this toolbar fragment, we see five different icons. Going from left to right, they are:

  1. Undo: Clicking this icon will 'undo' your last action. Clicking it multiple times will continue to undo actions in the reverse order from which they were performed.
  2. Redo: Clicking this icon will 'redo' the last action that you 'undid' using the undo icon.
  3. Remove Formatting: If you have a style that you don't like when you preview your website, like bold text or the wrong font, highlight the text and click the eraser button. This will remove any CSS styling that may be affecting the content (inline only).
  4. Find: This great little button will help you find a word or phrase in your article. This is great to save time.
  5. Find & Replace: Takes the find feature a step further by actually allowing you to replace the word you don't like. Careful, you could replace all of the instances of that word in the document if you're not careful.

Toolbar Fragment 4 (Font Styling and Special Characters)

This fragment of the toolbar has more to do with formatting your text. Here we see eight functions. The first four act in the same way, so we've bundled the description. From left to right, they are:

  1. Bold, Italic, Underline, Strikethrough: Clicking his icon affects the selected with the respective command: bold, italic, underline, strikethrough. You can click on this button before typing and all consequent text will be styled until you click it again. You can combined any of these buttons to get bold italic, underlined bold, etc.
  2. X2 (below or above): These two icons give you the option to use superscript or subscript formatting.
  3. Special Characters: Insert special characters to enrich your content: %, ≈, ¥, ©, etc.

Toolbar Fragment 5 (Form Elements)

5th Fragment from toolbar

Use this toolbar with nine buttons to create a simple form. For advance users only. We recommend using WuFoo for form creation, not the article.

  1. Insert Form: By clicking on this, you'lll open a popup that asks you for the form properties. Once completed it will insert the form into the article. If you are not a code, then please choose the route of using WuFoo.
  2. Checkmark: Inserts a checkbox into your document form.
  3. Radio Button: Inserts a radio button selector into your document form.
  4. Text Field: Inserts a text field for data entry into your document form.
  5. Multi-Line Text Area: For data that is broken into multiple lines like addresses, etc, you would use this option.
  6. Selection Field: Inserts a selection field into the document form.
  7. Button: Adds a button to the form.
  8. Image Button: Adds an image button to the form.
  9. Hidden Field: Places a hidden field into the form. This is helpful for reducting spam.

Toolbar Fragment 6 (Lists and Indentation)

This is the fragment to look for if you want to add a numbered or bulleted list or if you want to indent a paragraph of text to make it stand out. From left to right:

  1. Numbered List: Highlight a section of information that has definitive break points (ie: sentance one, then press enter, sentance two, or paragraph one, then press enter, paragraph two). Then click this button and it will indent, style and add numbers to the list.
  2. Bulleted List: Same principal as the numbered list, but it adds bullets in front of the information. This is good for outlining points that have no real order.
  3. Decrease or Increase Text Indentation: Highlight a piece of text to indent it or if it is already indented to remove that feature.

Toolbar Fragment 7 (Paragraph Formatting)

7th Toolbar Fragment

  1. Align Left: This icon aligns the selected text to the left side of your page.
  2. Align Center: This icon centres the selected text in the middle of your page.
  3. Align Right: This icon aligns the selected text to the right side of your page
  4. Justify: This icon 'justifies' the selected text, making it aligned on all sides.

Toolbar Fragment 8 (Add/Edit a HyperLink, Create an Anchor)

Link Building Toolbar

If you want to make links in your text this is a toolbar you'll want to learn more about. From left to right:

  1. Insert a J:Tree Link: The first icon allows you to insert or edit a remove hyperlink that is connected to a page or article items within your website.  A hyperlink transforms a word or multiple words in your content area into a clickable link that will load another website page. The picture below shows the hyperlink popup box. Notice that there are three tabs:

    • Link Info (watch the video) :. In this dialogue box you can see that you have your entire website directory. This is wonderful if you're trying to "interlink" to a page inside your website. This way you don't have to go and find the link, copy it and then paste it into the URL field. Instead, simply browse by content or by menu to find the right page to link to and then select it. The page is automatically added to the URL box. Oftentimes we forget to add the title to this page. The title is very important for accessibility; by adding a title, you are rendering the site useful for people who view the internet with a screen reader. Also, your website will not validate according the the W3C standards if you do not include titles for your links, so make sure to do this part. If you highlighted your text ahead of time, then the text field will populate automatically. If you simply clicked the link creator then, you'll need to type in the words you'll want to become a link.
      hyperlink1
    • Target:The target delineates the link behavior. Do you want the link to refresh the page with the new URL or do you want a new window to open? It's a good idea to choose the target since every browser has different default settings - this way you are in control of your content not the browser. These are the different Target Attributes and how they open a linked document or URL:

      Attribute Values:

      ValueDescription
      _blankOpens the linked document in a new window or tab
      _selfOpens the linked document in the same frame as it was clicked (this is default)
      _parentOpens the linked document in the parent frame
      _topOpens the linked document in the full body of the window
      framenameOpens the linked document in a named frame

    • Advanced: This tab gives the web designer a number of tools to add an ID or a Class to the link for styling purposes. With this you have a selector that allows you to style the link into a button or special look with CSS. Advanced users only.
      Advanced Link Building

  2. Insert/Edit/Remove External Hyperlink: The next two icons allows you to insert/edit or remove hyperlinks in your content.  Chose the second button from the left to add on off-site URL or to edit a URL that you've already created.  Choose the third button to remove the link completely from the text.

  3. Insert an Anchor: This inserts an anchor into your content that will take your user to the appropriate part of the page where that content is detailed. You see that oftentimes used on the "FAQS" page of a website as the table of contents link.

Toolbar Fragment 9 (Add/Edit an Image, Flash item, Template, Horizontal Line, and/or Emoticon)

9th toolbar fragment

  1. Add/Edit Image (Watch the Video): This icon pulls up a screen like that shown below. Image Properties InfoImage Properites Image 2Image Properties Image 3As you can see there are also three tabs on this popup dialogue box
    • Image Info Tab: By clicking browse server you can select an image that already exists in your stories folder in your media manager.  You can also upload a new image to the server and/or add a new folder to help keep you organized.  Alternative text is used for accessibility and is important to keep your site up to the W3C standards.  Type in a semantically meaningful title to keep your audience engaged.  The width and height boxes allow you to determine the size of the picture without having to resize it first.  If you want the proportions to remain constrained so the image does not get distorted, then make sure the lock is closed.   By placing a number in the border field you increase the size of the image with a black border of x amount of pixels.  Hspace is the horizontal amount of margin in pixels and Vspace is the vertical amount of space in pixels.  Align will float the picture left or right so the text moves in and around the picture.
    • Link Tab: Use this to make your image a hyperlink to another page on your site or a page on another website.
    • Advanced Tab: This tab allows you to add more enriched content like a long description to the image which is a good practice if it is copyrighted.  It also allows Web Designers the opportunity to add a class or an id to the image for styling purposes.
  2. Insert/Edit Flash Object:  This icon will pull up a popup similar to the 'insert image' screen, but will allow you to insert or edit small video files in .SWF formats.
  3. Insert a Template: (Coming Soon)
  4. Table: This icon calls up a formatting screen to create a new table, which will be inserted where your cursor is. The formatting screen, pictured below, is used to specify the properties of your table, including dimensions, border widths and colours, spacing and padding, and any headings you may want for your table. (Images/More Tutorial Coming Soon).
  5. Insert/Edit Horiztonal Line: As its name suggests, this icon will insert a horizontal line across your article at the specified point, with the specified properties.
  6. Insert Emoticon: This icon will pull up a menu like the one shown below. Selecting an emoticon from this menu will insert it into you article.emoticons

 

Toolbar Fragment 10 (Styling your Fonts)

10th fragment of the toolbar

This fragment of the toolbar is another segment dealing with formatting, and we can see eight icons here.  

  1. Styles can be added via the plugin parameters and then they will populate this dropdown.  For now, it's empty since I have not set any custom styles in the parameters.
  2. Format: This dropdown assigns an HTML element to a piece of text or phrase.  Remember to carefully use the heading tags.  This is to denote what is important like the heading for a chapter.  The H1 should never be used in an article since it has already been used for your website name in the header of the page.  If you want your text size larger, use the Size dropdown.  This allows you to choose from a number of different heading styles. Select the text and assign its heading style using this bar.
  3. Div:  This will place a div or divider around a piece of content so you can style it.  This is useful if you know HTML and CSS.  You could use it to take a piece of text, float it to the right and make it a quote.  The uses are endless but it will not serve you if you don't know more advanced coding practices.
  4. Show Blocks:  This is also helpful to coders who are trying to debug why the editor isn't displaying something as it should.  Click in on to show all HTML Block Elements.  Click it off to see regular view.
  5. Font: This bar allows you to choose the font for the text you have selected.
  6. Size: This bar allows you to choose the size of the text you have selected.
  7. Text Color: This opens a colour palette to choose the colour of your font.
  8. Highlight: This icon allows you to highlight selections of text.

Toolbar Fragment 10 (New Features including HTML5 Video and Audio)

This tooblar adds a number of new features to the editors capability.   Over the next week I'll be adding videos and information on how to make use of these new features.

Wrapping up the Toolbar

As you can see by now, the toolbar is a complex and powerful tool. You will use it almost every time you create or edit an article, and it is important to understand how it works in order to maximise your ability in creating solid content.

The View Tabs

Beneath the content input space, we find the view tabs, as shown below. These tabs are used to toggle your view between Design, Source, and Preview. Each of these views will be summarised below.

view tabs

Design: This is the default view for the content input space of your editor. In this view, you type content and use the toolbar as normal.

Source: This view will allow you to edit the source HTML code of your article. Your toolbar will disappear in this view. You should only use this view if you have HTML knowledge.

Preview: This view simply allows you to preview your article to see what it will look like. Your toolbar will be disabled and you will not be able to make any edits until you go back to Design or Source.

Wrapping up with the Editor

Those are all of the pieces of the editor. As you can hopefully see by now, it is a powerful editor, with a lot of tools, and it can cope with anything you need a content article to do. Almost all of your interaction with content articles will take place in the editor. There are still a couple pieces of the article editor to review, however, that are not connected to the editor.

Additional Article Functions

Beneath the editor, you will find three more buttons, which are additional functions for editing your article that are built into Joomla!, rather than. These buttons, pictured below, will be summarised here.

joomla buttons

Image: This button pulls up a screen like the one pictured below to allow you to upload and insert images into your article. We recommend that you use the editor function for this instead.

joomla image

Pagebreak: This button allows you to insert a pagebreak into your article. A pagebreak will break your article into fragments so that to see the next 'page,' a user will have to click a 'next' button. Pagebreaks are useful for long pages with a lot content.

Readmore: This button inserts a 'readmore line.' The screenshot below shows an article with a readmore line. When this is enabled, everything above the red line will be seen by your viewer, but it in order to read everything below the red line, they will have to click a 'read more' link. This is useful if you want to highlight something, or draw attention, and then explain it afterward.

joomla readmore

Article Information and Parameters

Finally, to the right of the editor, we see the article information and parameters, as shown in the screenshot below. The article information is in the dotted box, and the parameters are immediately below this.

article details

Article Information: This box shows you various statistics about your article, including the article ID, publication status, number of hits it has received, edits it has undergone, and the date of creation and last modification.

Parameters: The parameters box includes three tabs for the Article, Advanced, and Metadata. Each of these parameter boxes has different functions, but they all serve to modify technical aspects of your article.

Concluding Article Editing

This tutorial has hopefully given you a basic grasp of what is available within your article editor. The most important tool you need to understand is the editor, because this is where you will interact with your article most.

As long as you have understood how to use the editor, you are ready to edit your content in any and every way you want! Also bear in mind the additional functions provided by the Pagebreak and Readmore buttons, and go have at it!


My Artisan Web is a Vermont based company that is committed to lightning fast websites that are securely hosted and completely supported. Although we live in a rural area, we are technologically clever and always up to date with our services, coding, and design recommendations.

ADDRESS: My Artisan Web
White Glove Joomla Hosting as a Service
214 Main Street Brattleboro, VT 05301
CONTACT Tel (802) 579-1340
sales@myartisanweb.com

GET SOCIAL WITH

ARTISAN WEB AND PRINT (our parent company)