TwinEditor (version 2.3) 

July/ 10/2009
Disclaimer Notification 
The user must assume the entire risk of using TwinEditor. Sudo Software will in no way be responsible, in financial or any other terms, for damages (either consequential or incidental) resulting from the use or misuse of TwinEditor or from following directions in this document. No warrantee as to fitness to a particular purpose is given or implied. Because of the wide variety of hardware and software combinations available today, it is up to the user to ensure that TwinEditor functions well in his or her environment.
System Requirement 
Windows XP SP2 or later, WindowsVista, Windows7 RC. (In Windows Vista and Windows 7 RC environment, Scroll bar on the WYSIWYG clickmap editor window may not respond.
Feature 
TwinEditor has two windows; the upper design window and the lower source code window. Design Window (the upper window) enables WYSIWYG editing of HTML page. The page can be editted in the same way as using word processor.  Source Window (the lower window) provides editting and tuning up the source code of HTML directly. One of the most remarkable feature of TwinEditor is the synchronization between two windows. The cursor movement in both windows correspond to each other. If you move the cursor in one window, the cursor in the other window goes to the corresponding position.
Quick Tutorial 
  • Install , Uninstall
    • Double clicking the downloaded file of TwinEditor (dl_pack_te.exe) icon makes a set of uncompressed setup files. Then, install TwinEditor by executing 'Setup.exe'.
    • Activate the Control Panel, doubleclick Add/Remove Programs, click the TwinEditor entry in the list of programs, and click Remove. Do not directly execute the UninstallTwinEditor.exe in Program Files/TwinEditor folder because doing so results in incomplete removal of TwinEditor. In case of executing the UninstallTwinEditor.exe directly by mistake, complete uninstall is still available by performing the procedure mentioned top of this section.  In the uninstalling process, you may be notified that the uninstaller can not find the target(s) to remove. Neglect this notification to complete uninstalling TwinEditor.
  • Quick Getting Started Guide
    • IMPORTANT!! To reset the customization to defaultTo reset the settings, activate TwinEditor with shift key continuously pressed.
    • Brief Usage Guide of ToolbarAfter TwinEditor is activated, a text '<Add items here>' is seen in the upper Design Window. Starting at this situation, how to change style using toolbars is briefly described:

      1. Select word 'here' using cursor or mouse.
      2. Push  button in a tool bar. The word 'here' looks enlarged a little.  But in the lower Source Window that indicates source code of HTML corresponding to the upper Design Window, the source code has got no change yet.
      3. To reflect the change to the lower Souce Window (to synchronize the windows), push   button. See that a new tag '<span style="font-size:14pt">'appears around the word 'here'.
      4. Then edit the source code in Source Window as follows: Change the word 'Add' to 'Modify'.
      5. Push  button in a tool bar to synchronize Design Window and Source Window, then Design Window reflects the change: The word 'Add' in Design Window has become 'Modify'.
    • Sychronization of CursorBy clicking characters in different portion, check the cursors in Design Window and in Source Window move simultaneously. The cursors are always at the corresponding location in both windows. If the synchronization is not observed, push   button or  button to restore the synchronization. In the situation of loss of synchronization, most of functions of TwinEditor does not work.
    • Synchronization of Contents Between Windows  See the synchronization of contents in Design Window and Source Window by procedure as follows:
      1. Write some words in Design Window using keyboard and see if the cursors synchronize correctly: In some portions, locations of cursors may deviate from the correct locations. In addition, source code text is not updated spontaneously.
      2. Push  button and see the contents of both windows get consistent with each other. Also cursors become to move synchronized.
    • Partial Update  Using partial update makes the updating process speedy. But in some situations, partial update may not work. In such a case, push  or  button, that restores the synchronization between the windows and re-activates the partial update function. 
    • Usage of Partial Update
      1. Edit somewhere in Design Window.
      2. Then select the area in Design Window so that the selection entirely covers the editted area; the selection should contain extra area around editted area. Or sometimes it works well just to put cursor where you editted. Both of the procedures may sometimes provide the same effect. The latter procedure seems to be more convenient. However, the latter method might result in no effect or unexpected effect. If you fail, push 'undo' button and try the former method. Or you might prefer  button.
      3. Push  button if you edit in Design Window, or  button if you edit in Source Window. 
      4. Check if the windows have been updated correctly. If you make the source HTML code grammatically incorrect in Source Window, update may cause corruption of the contents in both windows. In such a case, pushing  button can restore the contents. After the restoration, update the whole page using or  button. Partial update is not allowed within head tag. Also, the text directly belongs to body tag is not allowed to be partially updated.
    • Insert Images'Insert Image' toolbar button enables collection of images from a folder or from Design Window. Collected images are shown in the button's assistant window. Inserting an image is easy: Just clicking one of images in the assistant window inserts the code of the images into Source Window. 'Del' button in the assistant window removes images from the assistant window, but original image file will never be removed from personal computer!
    • Insertion of Movie, BGM, Flash...'Insert BGM' Toolbar button activate a dialog box to select options. Movies, BGMs, Flash and Director movies are able to be selected. Pushing OK button creates HTML code automatically and inserts it to the current position.
    • Insertion of Anchor (Hyper Link)Drag and drop 'Origin' button of the assistant window for 'Insert Anchor' toolbar button, on the proper location to insert <A href=...> element. In the same way, drag and drop 'Anchor Point' (destination) button on the proper location to insert <A name=#...> element. Then, pushing 'Auto Insert' button makes hyperlink between 'Origin' and 'Anchor Point': Unique name is added to the anchor element. If the destination of the hyperlink is outside of the page, the destination can be assigned by doubleclicking the 'Anchor Point' button to open the file dialog to select the destination HTML file. Another way to establishing hyperlink is: First, put the cursor within the elment for the 'origin' of the anchor, then push 'Origin' button to assign the origin element. Second, in the same way, assign the destination, then, push 'Auto Insert' button.
    • Edit TableLike a spread sheet software, enables easy modifications of cell styles, rows, and columns. The modifications include cut, copy, paste, insert or remove rows and columns. Font size, font name, background color, and border style can be also easily specified with an input assistant window. Visual Introduction of TwinEditor shows how to select cells and drag and drop cells.
    • 2-D Alignment 'Align Object by 2-D Editor' toolbar button enables two dimensional alignment of objects. Pushing the button activates 2-D edit window. 2-D edit window has many buttons and sliders.  These buttons and sliders provide you to edit many kinds of properties of a selected object, which include position, width, and height of an object. By 'Update' button, the property settings are reflected to the target object in Design Window, and in Source Window simultaneously. An example of practical usage of 2-D edit is described as follows. 
      1. Click an object to edit in 2-D editting method in Design Window.
      2. Push 'Align Object By 2-D Edit' toolbar button. Then, 2-D Edit window appears.
      3. Push 'position' button to change position property 'static' to 'absolute'. Even after this procedure, position property may not change to 'absolute': It may change to 'relative', instead. If such a case, trying again surely results in 'absolute'. 
      4. Position property of 'absolute' or 'relative' enables dragging the object to move somewhere else. However, situation is different sometime: The object does not always become draggable ( due to the system limitation ). In this case, slider is useful to move object to different location.
      5. Push 'Update' button to reflect the change to Design and Source Window.
      Visual example of 2-D editting of object is shown here.
    • Search Word 'Search' toolbar button activates 'Search Window' which affords search of any word(s) or symbol(s) in Source Window. The top area of Search Window is familiar with a user who has an experience to use word processor. Also replacement of word(s) with other word(s) or markup of the found one with any color is possible. 'Search in Design Window' below in the Search Window allows DOM based search in Design Window. Search elements are possible by tag name and property and style. The filtering condition in the search can be combined. The search result will appear in the list at the bottom of the window. Doubleclicking an item listed as a search result cause jumping to the location of the item clicked.
    • Clear Red Dotted Markup Marks up the location of cursor. It is sometimes redundant and disturb you to check the style of the border of an object. In such a case, you can turn off this facility by clicking the 'Hide Red Dotted Markup' toolbar button. It will temporalily disappear.
    • Notice About Undo Function : After using the undo function, you may find the synchronization of cursor between Design and Source Window lost. In this condition, some of the functions of TwinEditor are not available. The synchronization is regained by pushing  or  buttons. If you are using 'Edit Table' facility, you should use the undo function of 'Edit Table' window button, because the undo function of toolbar on the main window is unstable in manipulating a table.
    • Settings of TwinEditor  Provides modification of the status in regard to the execution of script on downloading, ActiveX, and displaying images. The folders for documents or backup files can be modified. Other settings include the time schedule of periodical backup and the maximum folder size of the backup folder. Restarting TwinEditor is necessary to make the changed settings valid.
    • About 'Doctype' Insertion'Insert Doctype' facility enables insertion of the document type declaration tag to the top of text in Source View: In the main menu, selecting [edit] menu and [Insert Doctype] in the drop down menu activates 'Insert Doctype' dialog window, which afford the text to insert in the list items below. The selected text will be appear in the edit control at the top of the window. Just push 'Insert' button or edit the text before insertion. In the reverse direction, the editted text can also be added to the list (by pushing 'Add' button) or can take over the original list item ( by pushing 'Update' button). The list items are stored to the sysytem registry up to 20. If you insert XHTML declaration to Source Window, pushing   or  buttons become to generate XHTML code in spite of HTML code.
    • Validation of LinkFrom the mainmenu, select [edit] and [Check Link] in the dropdown menu, activating the 'Link Check' window. Pushing 'Update' button begins to check the anchors, images and the other elements that have 'href' or 'src' properties if the URLs of the property values are valid. The result of checking validation will be listed in the list control of the window. Doubleclicking the item of the list lets you jump to its location. Pushing 'suspend' button pause the validation process when the process takes a long time. The process can be resumed by pushing 'Resume' button.
    • Create TemplatesTwinEditor has a function to create templates from Source Window to reuse the structure of HTML, because often we write similar HTML structure repeatedly in a page. Creating template enables to reuse the HTML which resembles the previous part of the page. To create a template,  open 'Pickup / Insert Template' through the mainmenu -> [Edit] -> [Pickup For Template]. This window has two edit control windows; 'upper' and 'lower' window.  Pushing 'Pickup' button copies the element after removing its content text, to the 'upper' window. The text in the 'upper' window can be inserted in Source Window by 'Insert' button. Or it can be stored to the 'lower' window. The 'lower' window can store multiple blocks of text delimited by '----- line. Direct insertion of the text from the 'lower' window to Source Window is impossible. Instead, the text in the 'lower' window can be copied to the 'upper' window by 'ToUpper' button. The part of text that contain cursor between the delimiters will be copied. Then, the text can be copied to Source Window by pushing 'Insert' button. 
    • Using NamespaceTo use namespace, you must declare the namespace within HTML tag.  For example: <HTML XMLNS:MSHelp = "http://msdn.microsoft.com/msHelp" xmlns:MyNameSpace = "http://www010.upp.so-net.ne.jp/twin-editor" xmlns:bk = "urn:loc.gov:books">, where three namespaces  MSHelp, MyNameSpace, and bk are declared. 
    • Editting CSS  TwinEditor affords a convenient environment for editting CSS. Not only internal CSS written in the style element of the page, but also CSS in external file can be editted seamlessly together. CSS rules are gathered and displayed in the list. By doubleclicking a list item, you can edit the selector text, style rule, and external filename using input assistants.  To access this function, push  button to open 'Edit CSS' window. After the window is open, push  'Recollect CSS Data' to ensure the CSS data are updated. Then, push  'Highlight Correspondentent CSS' button to filter the rules (showing 'currently off'). The filtering is performed according to the cursor position: If the cursor is within an element which has class property of 'class1', for example, like <DIV class="class1"> ...</DIV>, the rules which contain selector text of '.class1' is highlighted. The CSS rules defined are interpreted based on 'CSS-2' specification. But the interpretation is somewhat comprehensive because pseudo-class is ignored and rules applied to the parent element are assumed to always applied to the children. Therefore, the filtering is not strict: The highlighted rules possibly influence the element which contains cursor, but the influence is not warranted. The further guide to use 'Edit CSS' window is here.
    • Paste Style  So to speak, a custom-made paint which provides changing simultaneously the color and font style of a part of text. Also the other styles can be combined. To use this function, select a part of text in Design Window. Then, push 'Paste Style' toolbar button to open 'Making Style Definition' window. In this window you can select styles from the list and pickup a group of styles to paste by pushing 'Pickup' button. Then the style you selected is applied to the selected area in Design Window. After the procedure, you are recommended to synchronize the windows by pushing  button.  
    • Clear Style So to speak, a ' style eraser' to erase a specific style of selected text. First, select a part of text you like to erase the style. Then, open 'Clear Style' window through 'Clear Style' toolbar button. The window lists up the used styles in the selected area. So, you just select the style(s) you want to erase and push 'OK'. After this procedure, you are recommended to push  button to synchronize the windows. 
    • Paste Class Attribute Enables 'paste' a class attribute to selected area. First, select the area you want to paste. Second, open 'Paste Class' window through toolbar button. This window has a list of classes to paste which are gathered from the page.  Third, select some classes and push 'OK'. This will paste the classes to the selected area. After the procedure, you are recommended to push  button to synchronize the windows. 
    • Clear Class  Quite resembles 'Clear Style' function provides a function to 'erase' the class attribute in selected area. Of course, the classes to erase are selectable. Please see the 'Clear Style' section.
    • Insert / Edit Clickable MapOpens 'Clickable Map' window and 'Edit Clickable Map' window. These are paired windows to edit a clickable map. 'Clickable Map' window provides the selection function of the image to attach a clickable map to. Also it provides the selection function of the area to edit, the shape of an area, and the anchor point to be linked. Editting the already existing clickable map is possible by selecting the image just before pushing  button, to which the clickable map is related. In the creation process of a clickable map: 
      • Select an image to attach the clickable map.
      • Set or select the name of anchor point and select the shape of the area.
      • Using the other window named 'Clickable Map', edit the area in WYSIWYG way. In this procedure, dragging the vertexes or sides of the area, with or without shift-key down is useful. When you drag a vertex or side with shift key down, all the vertexes are simultaneously moved. Otherwise, only one vertex can be moved at once. If you drag a side of the polygon, a new vertex is made. In addition to the WYSIWYG editting, direct editting of the array of the integer values which represents the shape of the area is available below the 'Edit Clickable Map' window.
      • Pushing 'Add' button make the area added to the map.
      • The last thing to do is push 'OK' button.
      Following the procedure, you can get a source code of the clickable map inserted in Source Window.
    • Customizing ToolbarsThrough the main menu ->[Tools]->[Customize Toolbars], the dialog appears to customize toolbars. While the dialog is active, drag and drop toolbar buttons anywhere you like and rearrange them. In addition, drag and drop from the list to a toolbar to insert a button.
    • Compatibility With XHTMLTwinEditor is generally compatible with XHTML. If you insert the 'Doctype' declaration for XHTML at the top of document, the synchronization function by  and  automatically become to generate XHTML code in Source Window. On the other hand, the wizard facility and some other functions are not compatible with XHTML.  However, the other functions, not compatible with XHTML, can still provide XHTML code by pushing  or  buttons. 
    • Support for Universal LanguageTwinEditor can handle all kinds of character sets installed to Windows. To install a character set to Windows, please refer to Windows' manual.
  • Appendix To Usage Guide
    • About 'Safe Overwrite' Backup FunctionWhenever files are going to be overwritten by TwinEditor, the file to be overwritten is copied to the folder for backup. If you have mistakenly overwritten a file, get the older one in the folder for backup. To access the folder for backup, proceed through the main menu -> [File] -> [View Backup Folders] -> [Backup Folder for Overwrite].
  • Download
  • How To Contact
    Masaharu Sudo,   Osaka Japan