-
- Contributed By: Curriki Team
The What You See Is What You Get (WYSIWYG) Toolbar offers a variety of buttons that allow you to format your Wiki resource’s content as you go, without needing to know any complicated code.
Using the toolbar, you will be able to:
By hovering over each of the icons on the toolbar, you will see the function that the icon represents.
Many of these functions are similar to office programs such as Microsoft Word, and are easy to pick up. The more difficult functions are covered in more detail in the next few sections of the Formatting Content with the WYSIWYG Editing Toolbar section of the Help Collection.
You may also want to watch the video tutorial "Using the WYSIWYG Toolbar".
Please note: Curriki uses a plug-in for the WYSIWYG editing toolbar. As a result, we cannot control much of this critical component's behavior, specific instructions, or interfaces. We are looking to update the WYSIWYG editor in the future, as soon as XWiki enables it for the core platform. This update should significantly improve the functionality and dependability of this tool.
Using the toolbar, you will be able to:
- Format your text with bold, italics, underline, and strikeout formatting
- Align your text to the left, center, or right
- Add bullets and numbering
- Change the font size, color, and style
- Insert hyperlinks
- Insert images
- Attach documents
- Insert tables
By hovering over each of the icons on the toolbar, you will see the function that the icon represents.
Many of these functions are similar to office programs such as Microsoft Word, and are easy to pick up. The more difficult functions are covered in more detail in the next few sections of the Formatting Content with the WYSIWYG Editing Toolbar section of the Help Collection.
You may also want to watch the video tutorial "Using the WYSIWYG Toolbar".
Please note: Curriki uses a plug-in for the WYSIWYG editing toolbar. As a result, we cannot control much of this critical component's behavior, specific instructions, or interfaces. We are looking to update the WYSIWYG editor in the future, as soon as XWiki enables it for the core platform. This update should significantly improve the functionality and dependability of this tool.
The HTML editing toolbar is very similar to the WYSIWYG toolbar, but has additional functions available when editing an HTML resource (instead of wiki).
By hovering over each of the icons on the toolbar, you will see the function that the icon represents.
Many of these functions are similar to office programs such as Microsoft Word, and are easy to pick up. The more difficult functions are covered in more detail in the next few sections of the Formatting Content with the WYSIWYG Editing Toolbar section of the Help Collection.
You may also want to watch the video tutorial "Using the WYSIWYG Toolbar". Please note: Curriki uses a plug-in for the HTML editing toolbar. As a result, we cannot control much of this component’s behavior, specific instructions, or interfaces. Additional help for the plug-in is available from the provider at http://wiki.moxiecode.com/index.php/TinyMCE:FAQ
By hovering over each of the icons on the toolbar, you will see the function that the icon represents.
Many of these functions are similar to office programs such as Microsoft Word, and are easy to pick up. The more difficult functions are covered in more detail in the next few sections of the Formatting Content with the WYSIWYG Editing Toolbar section of the Help Collection.
You may also want to watch the video tutorial "Using the WYSIWYG Toolbar". Please note: Curriki uses a plug-in for the HTML editing toolbar. As a result, we cannot control much of this component’s behavior, specific instructions, or interfaces. Additional help for the plug-in is available from the provider at http://wiki.moxiecode.com/index.php/TinyMCE:FAQ
The ability to create and edit symbolic markup (such as LaTex or MathML) is not currently available on Curriki. There are several obstacles to adding this ability, primarily finding a usable solution to render multiple markup languages on a single page and integrating a WYSIWYG-like editing tool to allow access to all users. These features are part of Curriki’s long-term roadmap. If you have specific thoughts about features or solutions we should look at, please email webmaster@curriki.org.
In some cases you may be able to create math notation using the special characters available in the editing toolbar (see for example Solid Geometry). For more extensive notation in the short term, here are a couple of workarounds to be able to display formulas on Curriki:
Simple Resource Upload Approach The simplest work-around is to create your resource using a typical Office program which allows symbolic markup, then upload that document to Curriki as an attached resource. All of the content including formulas would be contained in a single document, which is created and edited outside of Curriki, then posted as an attachment for other users to find on the site.
The downside to this approach is, like all file attachments, the content is not displayable on-screen. A user must have compatible software and physically download the file before they can review the resource.
For step-by-step instructions on uploading files, watch the How to Contribute a File Attachment Video Tutorial.
Here are a few examples of resources that use this approach:
On-Screen Resource Approach This solution will allow you to display the content of your resource on-screen, but the downside is that it takes more effort up front and is more difficult to update, should edits become necessary. In this method, you will enter the content of your resource using a Curriki Form or Template, then insert any math notation as images and/or attachments for reference. This allows most of the content of the resource to be editable on Curriki, rather than having to download the file, edit it, then upload it again.
To use this method, follow these steps:
Step 1: Create your resource using one of the templates or the “from scratch” forms. For more information, review the Creating Resources with Forms & Templates section of the Help Collection. Enter as much notation as possible using the editing toolbar so that the content will appear on-screen as editable text.
Step 2: Create your formula(s) in an Office document using the program’s equation editor.
Using MS Office:
Step 4: Insert the screenshot of your formula within the content of your Curriki resource. For instructions on inserting and formatting images, see the Insert an Image section of the Help Collection.
Step 5 (optional): Attach the original document with your formula. This will help you and other collaborators edit or add formulas in the future.
Here are a few examples of resources that use this approach:
In some cases you may be able to create math notation using the special characters available in the editing toolbar (see for example Solid Geometry). For more extensive notation in the short term, here are a couple of workarounds to be able to display formulas on Curriki:
Simple Resource Upload Approach The simplest work-around is to create your resource using a typical Office program which allows symbolic markup, then upload that document to Curriki as an attached resource. All of the content including formulas would be contained in a single document, which is created and edited outside of Curriki, then posted as an attachment for other users to find on the site.
The downside to this approach is, like all file attachments, the content is not displayable on-screen. A user must have compatible software and physically download the file before they can review the resource.
For step-by-step instructions on uploading files, watch the How to Contribute a File Attachment Video Tutorial.
Here are a few examples of resources that use this approach:
- http://www.curriki.org/xwiki/bin/view/Coll_Group_MathForAmerica--Geometry/Quiz--Formulasforsurfaceareaandvolume
- http://www.curriki.org/xwiki/bin/view/Coll_Group_MathForAmerica--Geometry/Assessments--Area
- http://www.curriki.org/xwiki/bin/view/Coll_mathercize/1-3LocationLocationLocation
On-Screen Resource Approach This solution will allow you to display the content of your resource on-screen, but the downside is that it takes more effort up front and is more difficult to update, should edits become necessary. In this method, you will enter the content of your resource using a Curriki Form or Template, then insert any math notation as images and/or attachments for reference. This allows most of the content of the resource to be editable on Curriki, rather than having to download the file, edit it, then upload it again.
To use this method, follow these steps:
Step 1: Create your resource using one of the templates or the “from scratch” forms. For more information, review the Creating Resources with Forms & Templates section of the Help Collection. Enter as much notation as possible using the editing toolbar so that the content will appear on-screen as editable text.
Step 2: Create your formula(s) in an Office document using the program’s equation editor.
Using MS Office:
- Click the Insert Menu.
- Click Object.
- On the Create New tab, click Microsoft Equation 3.0; you may need to install additional features to access this.
- Use the toolbar to build your equation.
- To edit the equation, double-click the object.
- Click the Insert menu.
- Click Object.
- Click Formula.
- Use the equation editing toolbar to create or edit your formula.
- To edit the equation, double-click the object.
Step 4: Insert the screenshot of your formula within the content of your Curriki resource. For instructions on inserting and formatting images, see the Insert an Image section of the Help Collection.
Step 5 (optional): Attach the original document with your formula. This will help you and other collaborators edit or add formulas in the future.
Here are a few examples of resources that use this approach:
This function removes hidden or unwanted formatting. It allows you to
start fresh when copying/pasting content into a blank content block,
and should be the first step to fixing any formatting issues you may
experience.
To use this function:
- Copy the content you are adding into the blank content block.
- Paste the selection into Curriki.
- Select the content you've just added and click the "Remove Formatting" button.
- Review the results and re-format using the editing toolbar as needed.
This function is only available from the wiki WYSIWYG editing toolbar. To attach a file to your content, two steps are involved, both of which take place in a dialog box. First you will need to upload the file to Curriki, then you will need to insert the file into your chosen location on the page. Refer to this image of the Insert attachment link dialog box as you read the step by step instructions below:
- Click the insert attachment button in the toolbar; it shows a blank page with a plus sign on one corner and says “Insert an Attachment Link” when you roll over it.
- In the pop-up window that appears, scroll down to the 2nd section of the window called "Upload attachment".
- Click the "Browse" button to find an file from your computer.
- Select a file from your computer, then click "Attach This File" to upload it onto Curriki.
- Now that your file is uploaded, click the file name from the “Upload attachment” section of the dialog box. (Note: file names may have been shortened to remove spacing and special characters, so do not try to copy the file name from your computer). This will insert the file name into the field “Attachment name" in the 1st section of the window (called “Insert attachment link”).
- Make any edits to the attachment title (displayed in your content block as a hyperlink) and click the "Insert" button.
If you are using the HTML editing toolbar, you can reference attached documents that are posted on the internet by inserting a link to that document in your HTML block.
To insert an image from your computer into your content when using the Wiki WYSIWYG editing toolbar, two steps are involved, both of which take place in a dialog box. First you will need to upload the image to Curriki, then you will need to insert the image into your chosen location on the page. Refer to this image of the Insert/Edit Image dialog box as you read the step by step instructions below:
- Click the image button in the toolbar; it shows a picture of a tree and says "Insert/edit image" when you roll over it.
- In the pop-up window that appears, scroll down to the 2nd section of the window called "Upload Image".
- Click the "Browse" button to find an image from your computer
- Select an image from your computer, then click “Attach This File” to upload it onto Curriki.
- Now that your image is uploaded, click the file name of the image from the “Upload Image” section of the dialog box. (Note: image names may have been shortened to remove spacing and special characters, so do not try to copy the file name from your computer). This will insert the file name into the field “Image (attachment) name" in the 1st section of the window (called “Insert/edit image”).
- Make any modifications to the image size or alignment within the 1st section of the dialog box. Note: for best display results within your resource, the maximum width of an image should be set to 540 pixels.
- Click the "Insert" button.
To edit the size or placement after inserting an image, select the image in your content, then click the image button again. Use the image size and alignment fields in the Insert/edit image pop-up window, and click the "Update" button to save your changes.
If you are using the HTML editing toolbar, you will need to upload your image to the internet as either a separate Curriki resource or using a photo sharing website such as Flickr or Picasa. Once your image is uploaded, use the “Insert/edit image” dialog box on the HTML editing toolbar to insert the link to the image and change the appearance as needed.
For advanced HTML users, you may wish to add a zipped up selection of images as a reference resource. After you have uploaded the zip file, you can enter web links to specific files within the zip using the HTML editing toolbar.
You can insert hyperlinks to any web page, including other Curriki resources.
To create a hyperlink inside your content when using the Wiki WYSIWYG editing toolbar:
- Highlight the text that you want to have appear as a link.
- Click the hyperlink button in the toolbar; it shows a picture of a chain link and says "Insert/edit link" when you roll over it.
- In the pop-up window that appears, click to the "Web Link" tab, if necessary.
- In the field that shows "http://", insert the full URL for your link. You can type it in directly, or copy/paste it from your web browser. Make sure there is only a single “http://” at the beginning of the field or else the link will appear broken.
- In the "Target" field, type in "_blank" if you want the link to open in a new browser window.
- Click the "Insert" button.
To create a hyperlink inside your content when using the HTML editing toolbar:
- Highlight the text that you want to have appear as a link.
- Click the hyperlink button in the toolbar; it shows a picture of a chain link and says "Insert/edit link" when you roll over it.
- In the pop-up window that appears, click to the "General" tab, if necessary.
- Paste the full URL for your link into the “Link URL” field
- Enter any rollover text you wish to appear in the “Title” field.
- For advanced users, update the other fields as desired.
- Click the "Insert" button.
The hyperlink should now appear in your content.
To create a table in your content:
- Click the table button in the toolbar; it shows a grid with a pencil hovering over it and says "Inserts a new table" when you roll over it.
- In the pop-up window that appears, enter the number of rows and columns for your table.
- Click the "Insert" button.
A table should now appear in your resource. Click inside a cell in your table to begin entering information.
Now that you have a table in your content, the table adjustment buttons will become active in the toolbar. Use these buttons to insert or remove rows or columns, based on the position of your mouse:
Sometimes when editing content, copying and pasting is not as simple as it should be. Often the formatting will turn out badly, and sometimes bulleted lists are not completely pasted. Here are the things you can do to try to fix a bad formatting situation:
1. Cut all content out of the editor and paste it into a text editor like Notepad. (Make sure to use a pure text editor and not a program like Word which often inserts hidden formatting on its own, which cause more problems.) In the text editor, take out any line breaks or "*"s as bullets, etc. Make sure your wiki block is devoid of anything and everything, then copy your content from the text editor and paste it back into the content block. Format anew using the WYSIWYG toolbar.
2. Delete the entire resource and try again. 3. Re-type your content by hand instead of copying & pasting, or only re-type the portions that did not paste in correctly (i.e. bullets in a list). 4.Look at the resource in wiki syntax to see if you can figure out if there's something awry in there. You can do this by using the "Switch Editor" menu bar on the WYSIWYG toolbar (it looks like 2 pieces of paper and is located at the far right). For more information, see the Editing in Pure Text Mode section of the Help Collection.
You may want to watch the video tutorial "How to Copy & Paste from an Existing Document" for a visual presentation of these options.
1. Cut all content out of the editor and paste it into a text editor like Notepad. (Make sure to use a pure text editor and not a program like Word which often inserts hidden formatting on its own, which cause more problems.) In the text editor, take out any line breaks or "*"s as bullets, etc. Make sure your wiki block is devoid of anything and everything, then copy your content from the text editor and paste it back into the content block. Format anew using the WYSIWYG toolbar.
2. Delete the entire resource and try again. 3. Re-type your content by hand instead of copying & pasting, or only re-type the portions that did not paste in correctly (i.e. bullets in a list). 4.Look at the resource in wiki syntax to see if you can figure out if there's something awry in there. You can do this by using the "Switch Editor" menu bar on the WYSIWYG toolbar (it looks like 2 pieces of paper and is located at the far right). For more information, see the Editing in Pure Text Mode section of the Help Collection.
You may want to watch the video tutorial "How to Copy & Paste from an Existing Document" for a visual presentation of these options.
Both the Wiki WYSIWYG editor and the HTML editor have a feature that allows advanced users to edit the content in Pure Text mode. This means you can directly change the coded markup used to format your content in either Wiki or HTML.
In order to take advantage of this feature in the Wiki WYSIWYG editor, you will need to click the “Switch Editor” button. For help with Wiki Syntax, see http://next.dev.curriki.org/xwiki/bin/view/XWiki/XWikiSyntax?xpage=popup.
In order to take advantage of this feature in the HTML editor, click the “Edit HTML Source” button. For help with HTML syntax, see http://www.w3schools.com/html/default.asp.
Please note that once you edit a resource in Pure Text mode, you may introduce code that cannot be edited with the WYSIWYG toolbar. If this happens, the resource will load the Pure Text Editing Mode every time you go to edit the resource. You may also see this mode if you place HTML formatting marks within a Wiki content block, i.e. if you are embedding a video using HTML code within a Wiki area such as a Group Welcome message.
If you attempt to switch back to the WYSIWYG editing mode after editing in Pure Text Mode, you may introduce errors in the resource that make it appear ‘broken’. We recommend only using Pure Text mode if you are an advanced user, and only on resources that no one else will be attempting to edit.
In order to take advantage of this feature in the Wiki WYSIWYG editor, you will need to click the “Switch Editor” button. For help with Wiki Syntax, see http://next.dev.curriki.org/xwiki/bin/view/XWiki/XWikiSyntax?xpage=popup.
In order to take advantage of this feature in the HTML editor, click the “Edit HTML Source” button. For help with HTML syntax, see http://www.w3schools.com/html/default.asp.
Please note that once you edit a resource in Pure Text mode, you may introduce code that cannot be edited with the WYSIWYG toolbar. If this happens, the resource will load the Pure Text Editing Mode every time you go to edit the resource. You may also see this mode if you place HTML formatting marks within a Wiki content block, i.e. if you are embedding a video using HTML code within a Wiki area such as a Group Welcome message.
If you attempt to switch back to the WYSIWYG editing mode after editing in Pure Text Mode, you may introduce errors in the resource that make it appear ‘broken’. We recommend only using Pure Text mode if you are an advanced user, and only on resources that no one else will be attempting to edit.
