Table of Contents
- 1. Introduction
- 2. Notational Conventions
- 3. System Requirements
- 4. Installation
- 5. Concepts
- 6. Opening and Creating new Documents
- 7. Saving Documents
- 8. Uploading Documents/Assets
- 9. Editing Documents
- 10. Authentication
- 11. Sidebars
- 12. Preferences
- A. Using Yulup with WebDAV
Yulup is a Neutron-enabled editing client, based on the Mozilla platform. It is available as an extension (also called add-on) for Mozilla Firefox.
With Yulup, you can edit the following document types:
-
XML. You can edit plain XML documents in source mode.
-
XML with associated XSLT. You can edit XML with associated XSLT documents in source as well as WYSIWYG mode. To display your XML document in the WYSIWYG mode, it is first transformed using the associated XSLT document. Any changes you make to your document in the WYSIWYG view are then propagated back to your XML source.
-
XHTML. You can edit XHTML documents in source as well as WYSIWYG mode.
-
HTML. You can edit HTML documents in source as well as WYSIWYG mode.
Yulup allows for seamless interaction with Neutron-enabled Content Management Systems, making editing a breeze. When visiting a certain document, you can directly check out the source from your CMS, edit it, and store it back without further interaction with the CMS.
The Yulup editor strives to bridge the gap between the Web and the desktop. Traditional editors were either stand-alone desktop applications, or in-browser tools. Stand-alone applications obviously lead to an impedance-mismatch between the user's browsing and publishing activity on the Web and the editing of documents. In-browser editors on the other hand can avoid this gap, but lack the features of a stand-alone application like access to the desktop, offline editing, import/export filters, etc. Furthermore, they often perform poorly or have scalability issues.
Yulup tries to bring together the Web and the desktop, offering the full capabilities of a conventional desktop application, but avoiding the gap between the browsing and publishing workflow by being integrated seamlessly into the browser. This enables the user to stay in the same application, no matter if she is browsing, reading, editing or publishing.
-
Keyboard Shortcuts. Keyboard shortcut combinations may contain a component called Accel. This is a platform specific key used to start certain shortcut combinations.
On Mac OS X, the Accel component denotes the Cmd key. On all other platforms, this denotes the Ctrl key.
Yulup requires Mozilla Firefox with a minimum version of 2.0. The Yulup editor is a platform-independent application, and can therefore be run on every machine which also runs Firefox.
For a first-time install, please refer to the Install section. If you want to update a Yulup installation to the latest version, refer to section Update.
-
Open Firefox.
-
Go to http://www.yulup.org/.
-
Click the Download Yulup link.
-
In the requester which just popped up, click .
-
Restart Firefox.
You are done. You can verify that the installation was successful by opening Firefox's extension manager ( >> ). There, an entry for Yulup should appear.
-
Open Firefox's extension manager ( >> ).
-
Click on the button and wait until Firefox has finished searching for available updates. If an update for Yulup is available, a button labeled appears to the right of the Yulup entry.
-
Click the button and wait until Firefox has downloaded the update.
-
Restart Firefox.
You are done.
The Webbrowser View is your normal web browser.
The only difference you experience is the Yulup menu icon placed in the upper right corner of the window. This is the main entry point to Yulup, and allows you to open documents, edit, create, upload and delete documents, and access the preferences dialog.
Normally, most of these items are disabled though. But if you visit a web page which allows introspection e.g. via Neutron or the Atom Publishing Protocol, these items are enabled, and allow you to directly interact with the CMS/web server which contains the current document.
If you choose to edit an existing document or to create a new document, you are then transferred to the Editor View.
It is important to realise that a webpage, as you may see when browsing a CMS, is not actually what is stored on the server as the source, and not necessarily every portion in a webpage can be edited. For example, a typical webpage may consists of a navigational part, a main content part, and a news section. The navigational part may not be editable, because it is generated dynamically by the webserver, and not stored in any document source file. Furthermore, the main content and the news section themselves may not live inside the same document. In fact, your webserver may dynamically aggregate these two parts (called document fragments) from two different source files, and then add the navigational part.
But there is more to that. After having constructed such a document, it may not be displayable by a webbrowser, because its format lacks the representational aspects of a webpage, i.e. the formatting. These formatting instructions may come from another different document, and the webserver first has to process the content, applying this representational information.
This makes it clear that it is not straight forward to edit a webpage as you can see it rendered by your webbrowser. Although this is perfectly possible, it may not have the effect you would like to see, namely the changes you made in that webpage to be incorporated back into the various source documents which make up this webpage.
What you would like to do is therefore having a way of making the changes you want directly in the various document fragments a webpage is made up from, but nevertheless having the document rendered like it would be by a webbrowser if you would not be editing it.
You can open and create documents starting from two different points: either from your normal webbrowser view or from within the editor itself.
When viewing a webpage in your browser which resides on a Neutron-enabled CMS, you are offered the possibility to open that document's source directly from the CMS. This means that the latest revision of the document underlying your currently displayed webpage is fetched from the CMS, and, depending on the opening mode, is either checked out from the CMS (meaning that you acquire a lock on that document), or simply opened (meaning no lock is created on the server side).
-
Open and Edit. If the server offers you the option of opening the document without locking, then a menu item labelled is enabled in the Yulup Browser Menu.
-
Checkout and Edit. If the server offers you the option of opening the document with locking, then a menu item labelled is enabled in the Yulup Browser Menu. By checking out a document from the CMS like this, you are acquiring a lock on this document. This means that only you can currently edit this document, and no one else can edit this document in the meantime.
Note that the implementation of the locking mechanism is up to the web server. The web server may either hold the lock indefinitely, until you checkin the document again, or it may decide to drop the lock after a certain amount of time.
You can also open a document as-is, using the menu item. This simply reloads the document you are currently viewing into the editor. This enables you to edit arbitrary web pages. Of course, you cannot store such a document back to the web server, but you can still save it to your local filesystem.
Once a document was modified in the editor, there are several possibilities to store the document.
-
Save to file. Saves the modifications to the local file system.
This menu item is only available if the document contains changes and the document was either loaded from the local file system, or was previously saved to the local file system.
-
Save temporary copy (Accel+Shift+T) [this feature will be activated in a future release]. Saves a temporary copy to your local workspace.
This menu item is only available if the document contains changes.
-
Save back to CMS (Accel+Shift+S). Saves the modifications back to the CMS but does not release the lock held on this document.
This menu item is only visible if the document contains changes and the server supports storing without lock-release.
-
Check back in to CMS and exit (Accel+Shift+C). Saves the modifications back to the CMS, releases the lock held on this document and exits the editor. After exiting, the modified document is reloaded from the document source and rendered in the editor tab so you can immediately check how your document looks like.
This menu item is only visible if the document contains changes and the server supports storing with lock-release.
-
Save to file system as... Saves the document to the local file system. You are asked to supply a path to the place where you want the document to be stored.
-
Save to CMS as... Saves the document to the CMS. You are asked to supply a path to the place where you want the document to be stored.
There are two fundamentally different editing modes in Yulup: the Source and WYSIWYG mode. In the Source mode you can edit documents on the source level, i.e. you can directly modify the document markup. In the WYSIWYG mode view, you modify the graphical representation of a document. With other words: whatever you do, the document looks exactly like it is served by your web server and later rendered by the browser.
Despite these two different modes, they share a common toolbar.
This toolbar provides you the ability to save, upload, open or create new documents, undo/redo operations, cut, copy and paste from and to the system clipboard, as well as modify the document currently edited by e.g. inserting new elements.
Editing in the source mode allows you to edit the source of the document, e.g. the XML tags, directly. The source mode can be used if the abstraction level of the XHTML mode or the XML mode is too high, or you are an expert user and want to work with the source itself.
The guided tag inserter helps to insert elements at the current cursor position. It can create two tag types, namely empty (tags only consisting of an opening tag, ending with a "/") and non-empty tags. The guided tag inserter is invoked by pressing C-i.
If a block of text is currently selected, then the guided tag inserter will surround this block with the newly created tag, but only if a non-empty tag is generated. Otherwise, the current selection is overwritten.
The guided tag inserter first asks for the tag name.
If you hit return without entering any text into the tag name field, the guided tag inserter aborts without inserting any text into the editor. Otherwise, if you have indeed entered a tag name, it goes into a loop and asks for attribute names and their values.
If you hit return without entering any text into the attribute name field, the guided tag inserter proceeds to ask you if you want to create an empty (e.g. <section/>) or a non-empty tag (e.g. <section></section>).
If you hit return without entering any text into the attribute value field, the guided tag inserter asks you for the next attribute name.
You can leave the guided tag inserter at any time by clicking "Abort". No text is inserted into the editor in this case.
The WYSIWYG mode enables you to work with the document as it would look like if you were viewing the final result. This means that the document looks the same as if you would be looking at the document with your webbrowser or other viewer.
The XHTML mode allows you to work with an XHTML document. Most of the usual elements of XHTML are available from the toolbar.
The context menu allows you to perform certain operations on the current selection. You can open the context menu by context-clicking at the current cursor position.
Several operations are available:
-
Undo. Undo the last operation.
-
Redo. Redo the last operation.
-
Cut. Cut the current selection and put it on the clipboard.
-
Copy. Copy the current selection to the clipboard.
-
Paste. Paste the current content in the clipboard to the current selection.
-
Delete. Delete the current selection.
-
Select All. Select the whole document.
-
Select Contents. Select the text content of the currently selected element.
-
Find. Open the Find dialog to search for text in the document.
-
Replace. Open the Find & Replace dialog to search and replace text in the document.
-
Mark as. Apply an inline element to the current selection. If no inline operations are defined, then this menu is not available.
-
Insert. Insert an element. If no insert operations are defined, then this menu is not available.
-
Edit Attributes. Lets you edit the attributes of the selected element.
The path toolbar shows you the path from the document root to the current selection. Furthermore, by clicking on one of the nodes in the path, you are presented with a menu from which you can do further operations on that node.
Several operations are available:
-
Delete Element. Delete the selected element and all its content.
-
Select Contents. Select all the text content of the selected element.
-
Move Up. Move the selected element upwards in the document (if the selected element has a left sibling node).
-
Move Down. Move the selected element downwards in the document (if the selected element has a right sibling node).
-
Edit Attributes. Lets you edit the attributes of the selected element.
The XML mode allows you to work with an XML document which is processed using an XSLT stylesheet to produce a formatted visual representation of the document. In this mode, you can at the same time change the original XML document whilst editing the transformed output. In other words, you are modifying the underlying XML document but are looking at the final result as if viewed in your webbrowser.
The XPath toolbar shows you the path from the document root to the current selection. This means that whatever you insert at the current position is going to end up at the shown path in the XML source document.
Furthermore, the XPath toolbar lets you choose between namespace-aware and namespace-unaware mode. If you select the namespace-aware mode, this means that whatever you insert at the current position is actually inserted at the namespaced path in the source document. If you choose the namespace-unaware mode, the back-propagation does not take namespaces into account. You might require this mode for certain documents which are otherwise not editable in namespace-aware mode.
Note that the Standard Key Bindings are always active. See Section 12.2.1, “Key Bindings” for how to select different key bindings.
The C key means Ctrl and is valid for all platforms. Note that there are additional platform-dependent key bindings (for those, please refer to the user manual of your Operating System).
Inserting
-
C-i (Source mode only). Open the guided tag/element inserter (see Section 9.1.1, “Guided Tag Inserter”).
The following key bindings are activated by default.
Moving and Selecting
-
C-a. Move to beginning of line.
-
C-A. Select to beginning of line.
-
C-b. Move to previous character.
-
C-B. Select previous character.
-
C-e. Move to end of line.
-
C-E. Select to end of line.
-
C-f. Move to next character.
-
C-F. Select next character.
-
C-n. Move to next line.
-
C-N. Select to next line.
-
C-p. Move to previous line.
-
C-P. Select to previous line.
Deleting
-
C-d. Delete (delete next character).
-
C-h. Backspace (delete previous character)
-
C-k. Delete to end of line.
-
C-u. Delete complete current line.
-
C-w. Delete previous word.
-
C-W. Delete next word.
Undo/Redo
-
C-_. Undo last action.
The Find dialog can be opened using either the corresponding button on the editor toolbar, or by pressing Accel+Shift+F.
-
Search for. Enter the phrase you want to search for.
-
Match case. Select if you want the search to be case-sensitive.
-
Match entire word only. Select if the search term should only be matched if the occurrence is an individual word.
-
Search backwards. Select if the search should be performed backwards with regard to the current cursor position.
-
Wrap around. Select if the search should wrap around the end (or the beginning, if Search backwards is selected) of the document.
-
Find. Perform the search. If the search term was not found, Phrase not found is displayed at the bottom of the dialog.
-
Cancel. Close the dialog.
The Find & Replace dialog can be opened using either the corresponding button on the editor toolbar, or by pressing Accel+Shift+R.
-
Search for. Enter the phrase you want to search for.
-
Replace with. Enter the phrase with which you want to replace the search term. If left empty, occurrences of the search term are removed.
-
Match case. Select if you want the search to be case-sensitive.
-
Match entire word only. Select if the search term should only be matched if the occurrence is an individual word.
-
Search backwards. Select if the search should be performed backwards with regard to the current cursor position.
-
Wrap around. Select if the search should wrap around the end (or the beginning, if Search backwards is selected) of the document.
-
Replace All. Replace all occurrences of the search term in the document. At the end of the process, the number of replaced occurrences is displayed at the bottom of the dialog.
-
Replace and Find. Replace the currently selected text in the document (if the selection matches the search term), and find the next occurrence. If the currently selected text in the document does not match the currently entered search term, then this function is disabled.
-
Find. Perform the search. If the search term was not found, Phrase not found is displayed at the bottom of the dialog.
-
Cancel. Close the dialog.
There are multiple ways to close the editor.
-
Exit Button (Accel+Shift+E). When leaving the editor via the Exit button on the editor toolbar, you are first asked if you really want to quit the editor, should the document contain unsaved changes. After you asserted to indeed leave the editor, or if the document did not contain any unsaved modifications, the editor tab is replaced by a new tab which contains the reloaded original document.
-
Check back in to CMS and exit (Accel+Shift+C). After the document is checked back in to the CMS, the editor tab is replaced by a new tab which contains the reloaded original document.
-
Tab close (Accel+W). When closing the editor tab (via the tab close button, the menu, the context menu, or the key combination), you are first asked if you really want to quit the editor, should the document contain unsaved changes. After you asserted to indeed leave the editor, or if the document did not contain any unsaved modifications, the editor tab is closed.
The CMS serving the documents to edit may decide to protect individual documents. In order to access such documents, you might have to authenticate yourself to the system by entering a set of credentials.
If the server handles authentication through Yulup, you are presented with a dialog consisting of several fields, as defined by the CMS. There are two kind of fields: normal text fields, and password fields.
Authentication in Yulup is realms based, i.e. you can be logged in to several different realms simultaneously.
Text fields use autocompletion, i.e. any term you have once entered into such a field is presented later on in a pop-up menu. The autocomplete pop-up menu opens once you start typing in the text field, and the currently entered string is a prefix matching one of the entries in the autocompletion history. In order to select such an offered string, you can navigate this pop-up menu using the cursor keys.
If you want to delete one of the offered strings from the autocompletion history, select the entry in the pop-up menu using the cursor keys, and, once selected, press Shift+Delete.
Sidebars are UI elements which are usually opened on the left hand side of the web browser. There are several standard sidebars delivered with Firefox, and Yulup adds two new ones, an Blog Entries Management sidebar and a Page Management sidebar.
Sidebars can generally be accessed either via the >> menu, or via a keyboard shortcut specific to each sidebar.
The Blog Entries Management sidebar can be accessed either via the >> >> menu item, via the menu item in the Yulup menu, or via the Accel+Shift+B keyboard shortcut.
Once the Blog Entries Management sidebar is open, you can close it by unchecking it in one of the above mentioned menus, by hitting the Accel+Shift+B keyboard shortcut again, or by clicking the button in the upper right corner of the sidebar.
Note that the Blog Entries Management sidebar cannot be opened if the currently shown document does not contain a link to an APP Service Document.
You can select a specific workspace by opening the top-most menu-popup.
You can select a specific collection inside the selected workspace by opening the second top-most menu-popup.
The Feed Information view shows information about the selected feed, e.g. author(s), copyright, etc.
The Feed Entries view shows the titles of the individual feed entries of the selected feed.
A feed entry can be selected by clicking on the feed entry with the left mouse button.
Multiple consecutive feed entries can be selected by selecting the first feed entry, then pressing Shift, and finally selecting the last entry. You can also create a selection of non-consecutive entries by pressing Meta and selecting each entry you want to add to the selection one by one.
The feed entry context menu can be opened by pressing the right mouse button on a feed entry.
By opening the context menu of a specific feed item, you can then select the menu item to open the editor.
If you select multiple feed entries before opening the feed entry context menu and selecting , then multiple editor tabs are opened, one for each entry.
The Page Management sidebar can be accessed either via the >> >> menu item, via the menu item in the Yulup menu, or via the Accel+Shift+P keyboard shortcut.
Once the Page Management sidebar is open, you can close it by unchecking it in one of the above mentioned menus, by hitting the Accel+Shift+P keyboard shortcut again, or by clicking the button in the upper right corner of the sidebar.
The remote hierarchy can be reached by selecting "Sitetree" in the menu list at the top of the sidebar.
The remote hierarchy can be navigated by clicking on the arrow icons left to collections; this will open or close the collection, depending on its current state.
To access the elements of the current page, select "Page" in the menu list at the top of the sidebar.
By clicking on one of the elements, its revision history is shown in the lower tree list, if available. By context-clicking on one of the revision entries, several actions can be performed.
At the top of the context menu, all available transitions for this revision are listed, if available. Below, you can request detailed information for this revision by selecting . Also, you can open this revision in a new tab by selecting .
An old revision can be opened by either double-clicking on the revision you want to open, or by opening its context menu and selecting .
Detailed information for a specific revision can be displayed by opening the revision's context menu and selecting .
All workflow transitions are listed on the top of a revision's context menu. If no transitions are available, then none will be listed. By selecting one of the transitions, this transition will be performed for the selected revision. A dialog will inform you about the success state of the transition.
You can open the preferences dialog by either choosing in the Yulup menu, or by opening the extension manager, selecting the Yulup entry, and then clicking on the button.
The preferences dialog is divided into two sections: General, and Editor.
In the General section, you can edit settings related to the overall usage of Yulup.
-
Workspace Location. Select a directory on your local file system for the Yulup workspace. The workspace is used to store local temporary copies of the document you are editing to enable offline processing.
-
Always Save Local Copy. Check this option if you would like Yulup to automatically store a version of the documents you are editing in your local workspace. If this option is not set, you have to tell Yulup explicitly to save a document in your workspace.
Enter the URI of the CMS you use most. This URI is evaluated e.g. when using the Page Management, or when you try to upload a new document to your CMS, but no CMS URI can be found via Neutron.
-
Open Blog Entries Management Sidebar Automatically. Check this option if you would like Yulup to automatically open the Blog Entries Management sidebar every time a page containing a link to an APP Service Document is accessed.
Select the default character set for documents handled by Yulup. The selected character set is used when opening a document and no character set information is available (e.g. when opening a file from the local file system), but not when loading a document via HTTP(S) (if no character set information is available in that situation, the character set used is UTF-8, as defined in the HTTP/1.1 specification). The default character set is also used when writing files to the disk.
The default character set is UTF-8.
In the Editor section, you can edit settings related to the Yulup editor.
-
Select Key Binding. Select the key binding you want to use in the editor.
-
Spaces instead of Tabs. Select if you want the TAB to produce real tabs or spaces.
-
Number of Spaces. Specify the amount of space characters a TAB should produce. If you have set the editor to use spaces instead of tabs, then the editor will insert the specified amount of space characters when the TAB key is used.
-
Wrap Source. Select if you want the source mode editor to wrap the text to the window width. Note that if a non-wrappable line (i.e. a line consisting of consecutive characters without interleaved whitespace) is present, you might still have to scroll horizontally.
A. Using Yulup with WebDAV
You can use Yulup together with a WebDAV-enabled backend for browsing and storing documents. In order to use WebDAV, simply point your default CMS (see Default CMS) to your WebDAV server.
Then, you can use the Page Management to browse the WebDAV repository, and you can use the various upload functionalities to store documents on your WebDAV server.