CKEditor Javascript Editor

Transcription

1 Tool Bar and Buttons CKEditor Javascript Editor Insert Drop Doc Use the Drop Doc Form option on the tool bar to create a form to post to your SOCS site. Visitors can complete the information online and it will automatically be sent to a designated recipient in an . For step-by-step instructions on creating forms, refer to the Training Guides section SOCS Toolbar and print out the Drop Doc Form training guide. Article Redirect Use the Article Redirect icon when you want a Section to redirect to another website, to a webpage or file within your site. The article containing redirect must be the only article within the Section otherwise the redirect will not happen. This feature also creates a hyperlink to the website or webpage within your articles as a reference. Redirect URL: Type the URL of the website/webpage/file path in the Redirect URL field. Hyperlink text to display: Enter the text/name of the hyperlink to display in the article. Note: if you insert a local file and fail to fill in the Hyperlink text to display field, the file will upload and the default text in you document will appear as Default Hyperlink Text. Redirect to a new window: Select the check box if you wish the hyperlink to open in a new browser window. Note: Website or Webpage: Visit the website or webpage you want to link to and copy the URL into the Redirect URL field. File: If you linking directly to a file (i.e. PDF) you have two options to upload the file to the SOCS Servers. o FTP your file to the Pages directory on the SOCS Server

2 o Use Insert Local File to upload your file. After uploading your file, select the Hyperlink icon to copy the URL from the Address field. You can then delete the link in the article. Local File Use Insert, Local File to transfer a file from your machine to the SOCS server and create a hyperlink to it. You will not be able to edit the hyperlinked file. Any changes must be made to the original document and the new file then reinserted. Position the cursor in your document where you want the hyperlink to display. From the Insert menu option, select: Local File Note: Most file types will upload to our servers, but you should use files types that your public will be able to view. For example, PDF files tend to be more universally accessible than Microsoft Word files.

3 Local file to insert: This field is required and populates with the name of the file you select using the Browse. Hyperlink text to display: Enter the text/name of the hyperlink to display in the article. Note: if you insert a local file and fail to fill in the Hyperlink text to display field, the file will upload and the default text in you document will appear as Default Hyperlink Text. Hyperlink screen tip (optional): Include text to appear when you hover over the hyperlink text. Example: Click to View Open link in new window: Select the check box if you wish the hyperlink to open in a new browser window. Note: Some browsers/operating systems will automatically open documents/files in a new window. Definitions for file and image storage: Article Storage: The document/image will be stored with your article. Only editors of your article will be able to upload a new file/image (with the same filename) to overwrite this document/image. The document/image will also be deleted when your article is deleted. Share Storage: The document/image will be stored within the shared folder. Other editors may link to this document/image within other articles. If editors upload a new file/image (with the same filename) your file will be overwritten. This document/image will remain in SOCS when your article is deleted. When should I use Article Storage or Shared Storage? You have two files for Student Handbooks. Each file is named the same (StudentHandbook.pdf) but contain different content. One handbook will be used at the Middle School and High School. The other file will be used only at the Elementary School. You want 3 articles under the respective school sections. You may use Shared Storage for the Student Handbook used at the Middle School and High School. If there are changes to the handbook in the future, you would only need to upload the new file once. You may also use Article Storage to prevent another editor overwriting your file/image. Changes to the file will then need to be uploaded to each article. You may use Article Storage for the handbook at the Elementary School. Select OK to create the link.

4 Note: If the file upload fails, the hyperlink WILL NOT appear, and the dialog box will inform you of the problem and possible reasons for the failure. Files 15MG or less can be uploaded using the Insert Local File feature. If your file is larger than 15MG, you will need to FTP the file to the SOCS.servers. Local Image Use the Insert, Local Image icon to insert a picture or image into your article. Position the cursor where you want the image to appear and select Local Image. Browse to find your file. You may add an Alt image text and set the Width and Height for your image. Note: It is best to always resize your images before inserting them into your article, as the image resizing may distort your original image. There are two options for saving your uploaded image: Article Storage: The document/image will be stored with your article. Only editors of your article will be able to upload a new file/image (with the same filename) to overwrite this document/image. The document/image will also be deleted when your article is deleted. Share Storage: The document/image will be stored within the shared folder. Other editors may link to this document/image within other articles. If editors upload a new file/image (with the same filename) your file will be overwritten. This document/image will remain in SOCS when your article is deleted.

5 Staff Page Link and Staff Page Template If you have access to Staff Pages, please refer to the Training Guides section on SOCS Toolbar and print out the Staff Pages and Blog Training Guide. Image 2 and Image 3 To place the second and third images or galleries, place your cursor where you want each one to appear. To lock the image in place, select Insert, Image 2 or/and Image 3 from the toolbar. Note: SOCS will automatically place your first image or gallery at the beginning of the article. You must complete this step or the images will not appear. Articles and My Articles Use the Articles or My Articles option on the tool bar to automatically link to another SOCS article (expired and active). The Articles tab will display the most recent articles regardless of who wrote them. The My Articles tab will display only articles that you (the person logged in) wrote. It will also display the most recent articles. If the article you link to is a live article (its publish end date is in the future or set to never expire), the article will be accessible both in your article and the section where it is located. To have the linked article available only through the link in your main article, the publish end date for the linked article must be in the past (referred to as an expired article). Position your cursor in your document where you want the SOCS article link to appear. Select either Articles or My Articles and select the article to which you want to link. The link will appear in your document.

6 Slideshows To insert an existing slideshow into your article, place your cursor where you want the slideshow to appear. Choose Slideshow from the tool bar and select the desired slideshow. Videos To insert an existing video into your article, place your cursor where you want the Video to appear. Choose Videos from the tool bar and select the desired video. Source - Edit HTML Use Source to see the HTML source for the article and add HTML code. After launching Source, enter in your HTML code. When you want to return to the original article editor view select the Source button again. Paste from Word Note: use the following keyboard shortcuts for other copy and paste Windows Mac Cut: Ctrl + X Command + X Copy: Ctrl + C Command + C Paste: Ctrl + V Command + V The Paste from Word option will paste copied content into the editor with no additional style information. This means style information such as text color will be removed, while standard HTML formatting such as bold or italic will be preserved. Undo and Redo Use the Undo and Redo icon to undo keystrokes or replace keystrokes deleted by mistake. Select the Undo arrow to replace previous keystrokes. It will

7 automatically undo information last entered. The Redo arrow will do the same thing only in reverse it will automatically redo, information last changed/deleted. Type Find, Replace, Select All and Spell Check As You Use Find and Replace to search a document for a specific word or phrase. Select the icon and enter the word or phrase you want to find. You can also enter replacement information and specify if you want to replace incident by incident or if you want to replace all incidents. Use Select All to delete the content in your article. Select the SCAYT (Spell Check As You Type) icon to check your spelling as you type. If an error is encountered, the word will be underlined in red. Use the Check Spelling option to review your whole article. This option provides suggestions for replacing the word. Highlight the correctly spelled word and select Change to replace the incorrect word. There are options for checking Grammar and a Thesaurus. SCAYT has options for Languages, adding words to the dictionaries and ignoring words with numbers, mixed case, all-caps and domain names. Bold, Italic, Underline, Strike-through The bold, italics, underline and strike-through styles can be applied to the whole document, a paragraph, or a text fragment of arbitrary length even a single letter Subscript and Superscript Subscript and Superscript formatting is often used in mathematical expressions or footnote references. Subscript is a character that is slightly smaller than the text that surrounds it and is set below the baseline. Superscript is a character that is slightly smaller than the text that surrounds it and is set above the baseline.

8 Remove formatting Use Remove Formatting when selecting the text you wish to apply this style to by holding the mouse down and highlighting a word, sentence or paragraph. The style information will be removed from the specified text. Ordered and Unordered lists Bulleted lists are useful when you want to group a number of items that do not need to appear in any particular order. Numbered lists are useful when you want to group a number of items that need to appear in a particular order. Increasing and Decreasing Indentation The block-level element containing the cursor will be indented with one tab length. The indentation of a block-level element containing the cursor will decrease by one tab length. Blockquote and Div Use Blockquote to align the text within your article. Highlight an area of text and select the Blockquote icon from the toolbar. Block quote is used for longer quotations that are distinguished from the main text by left and right indentation. It is recommended to use this type of formatting when the quoted text consists of several lines or at least 100 words. The Create Div Container dialog window that will open lets you set configuration options that define the stylesheet ID and classes. The Advanced tab lets you configure additional div element options such as assign it an ID, a language code, a text direction, a tooltip, or CSS style properties. Align Left, Center, Right and Justify Text alignment determines the placement of text relative to the page (or the editing area).

9 Insert/edit link (Hyperlink), Unlink (unlink Hyperlink), and Insert/edit anchor Use the Link (Hyperlink) icon to create a link to an existing file, Web page (URL), address or places in document. To link to a URL, Highlight the text you wish to create a hyperlink. Select the Link icon Select the Link Type of URL and enter the address of the Web site in the URL. You may choose to have the link open in the various frames. This is done from the Target tab.

10 To create a link to an address, Highlight the text you wish to create a hyperlink. Select the Link icon Select the Link Type of . Enter the address. The Message Subject and Body are optional fields. To Unlink (unlink Hyperlink), highlight the link within your article and select the icon. Use the Anchor icon to link between two sections of text in the same article. To create an anchor, you first need to set the anchor location. To do this, use the anchor button on the toolbar. For example, if you want a link between two sections about Art, highlight the word Art in the bottom link, and then choose the anchor icon on the toolbar. Enter the Anchor name: (probably Art ).

11 Next, go back to the top link about Art, and use the Link (Hyperlink) icon to create the link. Select the Link Type of Link to anchor in the text. A list of all the anchors created in the article will be listed in the Anchor Name. Highlight the one you want (in this case Art ). The two Art sections will now be linked. Image Image Info The Image icon allows you to set the image URL and configure the way the image will appear in the document. URL The web address of the image. NOTE: Use the Browse Server icon to select an image from the SOCS Image Library Alternative Text a short description of the image that tells users with assistive devices (like screen readers) what the image is about. Width the width of the image in pixels. By default this is the size of the original image. Height the height of the image in pixels. By default this is the size of the original image. Border the size of the solid border around the image in pixels. HSpace the horizontal spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.

12 VSpace the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels. Align the alignment of the image in the document. Available options are Right and Left. Preview a preliminary view of the selected image formatted according to the options chosen on the left. Link The Link tab lets you assign a link to an image inserted into the document, effectively converting the image into a clickable link. The link can point to any kind of object available in the Internet, like a simple URL address, a PDF document, or an online video. This might prove especially useful if, for example, you want to add a thumbnail that would lead the reader of your document to a full-size copy of the image or add a company logo and point to its website. Advanced The Advanced tab lets you configure additional image options such as assign it an ID, a class, a longer description, a tooltip, or CSS style properties. Table Select the Table icon to insert or modify a table within your article. The Table Properties screen is where you can specify the number of rows and columns for your table.

13 Rows and Columns: Enter the number of rows and columns required. Headers: Select if you have a header in the first row, column or both. Border: Adjust the size (thickness) of the border lines in your table. Alignment: Select how you want your table placed in the article. Width: When the width is set at 100% the table will fill the entire width of the area. Change the width percentage if you want a narrower table. Height: The overall height of the table. Cell spacing: Cell spacing affects the spacing between each individual cell. Cell padding: Cell padding affects the size of your cell and the amount of white space surrounding your text. Caption: If you would like to have a title placed above the table to put a caption/heading. Summary: the summary of the table contents that is available for assistive devices like screen readers. Advanced Tab The Advanced tab lets you configure additional image options such as assign it an ID, a class, a language direction, or CSS style properties. Background Image, position and repeat will help you format your image within your table.

14 Background Attachment and Color will help you choose the color of the cell background.

15 Cell Insert cell before, Insert cell after, and Delete cells Right click within the table to modify the rows within the table. Your cursor must be inside the table in order for this feature to work. The row will appear before/after or delete the row containing the cursor. Merge Cells, Merge Right and Merge Down Highlight the cells you wish to merge. Right click and select Cell, Merge Cells, Merge Right or Merge Down. Split Cell Horizontally and Split Cell Vertically To split merged cells, place your cursor inside the cell. Right click and select Cell, Split Cell Horizontally or Split Cell Vertically Cell Properties Width: Percent: When the width is set at 100% the table will fill the entire width of the area. Change the width percentage if you want a narrower table. Using percentages will enable mobile devices the best view of your table. Pixcels: When the width is set at pixels, the table may not fit the article width and may not be viewable within mobile devices. Height: The overall height of the table. Word Wrap: Allows your text to fit within the cell. Horizontal Alignment: Select how you want your text placed in the cell. Vertical Alignment: Select the placement of the text within the cell. Cell Type: Data is the default. Header is available if you have titles for your columns Rows Span: Allows you to merge cells. Columns Span: Allows you to merge columns. Background Color and Border Color: Choose a background color and/or border color for the entire table if desired. Row Insert row before, Insert row after, and Delete rows Right click within the table to modify the rows within the table. Your cursor must be inside the table in order for this feature to work. The row will appear before/after or delete the row containing the cursor.

16 Column Insert column before, Insert column after, and Delete columns Right click within the table to modify columns. Your cursor must be inside the table in order for this feature to work. The column will appear before/after or delete the column containing the cursor. Insert Horizontal Line Select Insert Horizontal Line to insert a horizontal line in your document. These lines can be used to separate text sections. You can type above or below the horizontal line. Insert Special Character Use the Insert Special Character link to insert a symbol into an article. With the cursor marking the place for the symbol to appear, select the symbol icon to see a table showing the various symbols available IFrame Inline frames, or iframe elements, allow you to insert a frame containing another document in the middle of your document. General It allows you to set the iframe URL and configure the way it will appear in the document. Advanced The Advanced tab lets you configure additional inline frame options such as assign it an ID, a class, or CSS style properties. The Styles drop-down list contains a number of pre-defined block and inline styles that you can use. To make the choice easier, the style names are displayed in a style that they represent, giving you a preview of what the text will look like. Paragraph formats are pre-defined block-level combinations of various formatting options that make it easier to keep the presentation of the text uniform.

17 Font is the typeface that will be applied to the document text. Size determines how big or small a font used in the document text will be. Select text color and Highlight Color Use Highlight Color to highlight a selection of text. Select the down arrow to display a list of default colors. Select any color from this list to then apply this color to selected text or to begin writing text in this color. Use Select text color to change the font color. Select the down arrow to display a list of default colors. Select any color from this list to then apply this color to selected text or to begin writing text in this color. Maximize (fullscreen mode) Use Maximize to view the article content in the full size of your browser providing you a larger working area to easily add/edit your article content. After launching the Maximize, select the button again to Minimize to the original article editor view. Show Blocks Show Blocks will display a grid of dotted frames around the block-level elements of the document along with their HTML tag, like p for paragraph or h1 for level 1 heading, as shown in the figure below. Forms Before creating a form, please contact SOCS Support with the recipient address(es) being used by the form as there is a file on the server that needs to be updated before the form can be sent. For a nominal fee, the information collected in the form can be stored to an accessible database. Create the form and contact SOCS Support for an estimated fee. Helpful Hints: Think about the items that will be collected on the form as they will all need to have a name associated with them. The field name is used in the returned

18 If you want to be able to track returned s easily, make the a required field If you want to align the fields in a specific way or add background colors, first insert the form into the SOCS article, and then insert a table into the form. You can then organize the input fields in the table cells, and add background colors if you wish. To insert a form 1. Select the Form icon and complete the Form Properties. Name: the name of the form Action: For all forms, enter /formmail/formmail.php Id : the unique identifier for a form element in the document Encoding: select multipart/form-data Target: select Same Window (_self) Method: select POST Adding the form After the form has been inserted, begin adding the form elements. Place your cursor inside the form outline where you would like the element placed. Form fields Following is a list of the fields available and a brief explanation of each. For each field you enter, you will right click inside the field, select Field Properties from the drop-down box, and fill out the appropriate information. Hidden Field Hidden: Hidden fields define data about the form. The person filling out the form does not see this information. The most frequently used hidden field names are: Recipients the address(es) of the person the form data will be sent to (separate multiple addresses by a comma and no spaces) Subject the subject line of the being sent

19 Required the fields that are required on the form (separate multiple fields by a comma and no spaces) Good_URL after the form is submitted, the user will see a custom thank you page. Select the Hidden Field icon. Enter the Name of the hidden field. Recipients: The hidden field is the addresses that receive the completed form information. Enter the name as recipients. The value is the address(es) the form will be sent to. Subject: To specify what you want to appear in the subject line of the return , create a hidden field and enter the name as subject. Enter the subject line i.e. Help Desk Request as the value. If you do not add a subject field the subject line in the return will read WWW Form Submission. Required: To specify which fields in the form are required, enter required as the Name and the field name(s) as the Value (name, address, , etc.). The names you add in the Value field must match the specified field names exactly.

20 Note: If you want to be able to track returned s easily, make a required field. good_url: To redirect to a custom Thank You page, create the article in SOCS and use the hidden field to redirect to that article. To do this, the Name must be good_url and the Value will be the SOCS article id (/vnews/display.v/art/2006/05/09/379b30813). If you do not create a custom thank you page the user will still see a generic page thanking them for using the form. Checkbox Field used to gather a list of multiple options. Multiple checkboxes may be combined in a logical group, although their selection is independent of one another, which means that more than one item of the group can be selected at a time. Examples: Select all that apply Which sessions will you attend? Choose the Checkbox icon.

21 Name the name used to identify each field. Enter the same name for each checkbox field in this category. Value the value of each checkbox name (i.e. Yes, No, Maybe). Selected used to pre-select one of the checkbox fields Radio Button Radio buttons are usually used in groups and they differ from the checkbox, in that only one item can be selected at a time. Examples: Questions that have a yes or no answer Questions where multiple options are listed but you want the person to select only one of the options Choose the Radio Button icon. Name the name used to identify each field. Enter the same name for each radio field in this category. Value the value of each radio name (i.e. Yes, No, Maybe). Selected used to pre-select one of the radio fields

22 Text Field A single row box used to gather information. Text fields differ from the textarea, in that they are single-line fields and thus are meant for shorter entries. A text field element comes in two variants. The first one lets you enter the text and see it as you type. The second one is used for entering passwords and obscures the typed characters with an asterisk (*), a bullet ( ), or another symbol used by the browser. Examples are: address Password Name Address Choose the Text Field icon. Name the name is used to identify each field. Each field in a form must have a unique Name. Use a name that represents the data being collected name, address, phone, etc. Value not used for Text fields. Character Width indicates how many characters wide the displayed text box will be Maximum Characters - the limit of characters that may be entered into the text field Tip: Always use (all lower case) for the Name when gathering the address. This adds the address to the from area of the return . If you do not use as the name the from address will be blank or Bounce@lists.fes.org on the you receive.

23 Textarea TextArea: a larger area to gather information. Examples: Comments Dietary restrictions Choose Textarea Field icon. Name the name used to identify each field. Columns the number of columns for the text area. This is equivalent to how wide the text field will be. Rows the number of rows to be displayed on the screen. The number of rows does not limit the amount of text that can be entered, only how tall the text area is (scroll bars will appear when necessary). Value enter data to display in the TextArea or leave blank. Selection Selection Field: drop-down field of multiple options. Examples of select fields are: What is your favorite color? How satisfied were you with your visit? Choose the Selection Field icon.

24 Name the name used to identify each field. Value can be left blank. Size determines how many options are shown in the menu at one time. Size 1 turns the menu into a drop-down list. Size 3 would display a box with three options. Text -- the label of the selection field option. Value -- the value of the selection field option submitted to the server. Add adds an option to the selection field. Modify modifies a selected option. Up -- moves an option one row up the selection field. Down moves an option one row down the selection field. Set as selected value sets an option as selected by default Delete deletes a selected option. Allow Multiple Selections used to mark more than one option. Button

25 Button: Submit & Reset Fields: The Submit button needs to be added to the form for the information to be sent. The Reset button clears the form and is optional. Name the name used to identify each field Text (Value) the text displayed on the button (value attribute). Type the button type. Possible options are Button (standard button with arbitrary text; type="button" attribute), Submit (a button that submits the form data to the server; type="submit" attribute), and Reset (a button resetting the form fields to their default values; type="reset" attribute. Image Button An image button allows you to import in your own image as a button. It is a clickable image that functions just like a standard button but has a customized appearance. Remember: The form will not work until you contact SOCS Support and give them the recipient address(es) being used by the form. There is a file on the server that needs to be updated before the form can be sent. Example Form Try this sample to create a form to gather name, address, username, password, classes for child, grade of child, teacher of child, and comments. Create an expired Thank You article on your site. Search for the article from your home page and copy the url (the website address information following your main address - /vnews/display.v ) Create a new article to gather grade book password information for parents/students In the article editor, select Form, Insert Form Add four hidden fields for recipients, subject, required, and good_url

26 Add text fields for name, , and username. Add the labels for the text boxes before inserting the Text field Add a password field. Add the label for the password field before inserting the password field Add checkbox fields for classes of reading, math, science, and spelling. Add the label for the checkbox fields before inserting the fields Add radio fields for grade of first, second, third, and fourth. Add the label for the radio fields before inserting the fields Add a select field for teacher of Mrs. Pinkman, Mrs. Thompson, Mrs. Gilmour, and Mrs. Pavelka. Add the label for the select field before inserting the field Add a TextArea field for comments. Add the label for the TextArea field before inserting the field Your sample form will appear like this on your site: