Requirements Summary
To refine further the scope of this project, an epub editor should include the following abilities:
- Select an existing epub book for viewing or amendment.
- Open a selected epub book and view its contents - including its metadata.
- Navigate around a book using its NCX table of contents.
- Edit a section and save its contents.
- Add a new section to the book.
- Remove a section from the book.
- Change the reading order of the content documents.
- View the book's metadata.
- Edit and save the book's metadata.
- Save the book to its .epub file.
- Create a new epub book.
- Adding multiple instances of metadata items, such as title, identifier, language, creator, etc.
- Implementing Save As to an .epub with a different name.
Figure 1. shows a screenshot of the online editor. A menu gives access to different views of the application. It has options called:
- Books - showing a list of epub books in the user's 'library'.
- Book Information - displaying the metadata for the selected book.
- Book Content - displaying the table of contents for the selected book.
- Media - listing the non-text media items (e.g. images) that are part of the selected book.
- Styles - listing the CSS files that are associated with the selected book.
Figure 1. Viewing a list of books
Select an existing epub book for viewing or amendment
Figure 1. shows the application positioned on the 'Books' view. The screen below the menu comprises a ListBox and a button showing the text 'New epub'.
The ListBox displays the .epub files that are in the user's library, where 'library' is defined as a folder on the web server that hosts the application. In this example, I've added an item to the <appSettings> in the web.config file of the application which provides the path to the library folder. This is shown in Figure 2.
Figure 2. epub library configuration
When the user selects a book, by clicking on it in the list, the application reads the .epub file using the ZipFile entity of the DotNetZip library. Using the ExtractAll method of that class the contents of the .epub are written to the file system. All subsequent operations, like changing a document or adding a document, are carried out on files rather than on the in-memory zipped data. However, the .epub file is kept upto date after each saved change.
In a multi-user application a more sophisticated approach would be required to keep each user's library separate from all others and under the protection of an access control mechanism. There are similarities with blogging sites and Content Management Systems.
The 'New epub' button, unsurprisingly, is where the user will start creating a new epub publication from scratch.
Viewing and changing metadata
Figure 3. is a screenshot after the user selects a book and then clicks on the 'Book Information' tab.
Figure 3. epub metadata
The application displays the metadata items that are found in the <metadata> section of the book's package document. The display is created using an ASP.Net Repeater control which is bound to the <metadata> node, so it displays all of the items found there and only the items found there. Further, it displays them in the order in which they appear, so the two <date> elements for instance are not together.
Edit and save a book's metadata
The information is displayed in TextBox controls, so it can be changed. The 'Save' button is used to update the metadata in the package document. We'll see later how the application saves the package data in the .epub file.
Some enhancements are needed to this model for a more flexible editor. For instance:
- The ability to mark an entire .epub as read-only is desirable. If you don't own the intellectual property to a work, it's not appropriate to change it.
- Some metadata items can occur more than once. Examples are: title, identifier, language, creator, contributor. It would be useful to be able to add and remove such items in the metadata.
Figure 4. shows a screenshot similar to one in an earlier post and is the result of clicking on the 'Book Content' tab while a book is selected.
Figure 4. Navigating a book's contents
This screen uses a TreeView control to show a hierarchical table of contents. The TreeView is bound to a version of the navMap extracted from the book's NCX information. To the right of the table of contents is the area used to view and edit the text. This is a TextBox control associated with the tiny MCE Javascript, converting it into an editor control.
Edit and save content and add a new section
Beneath the reading/writing area in Figure 4. you can see the following controls:
- A button marked 'Save'. This is used to save the current contents of the edit area to the underlying content document in the file system.
- A button marked 'Add' accompanied by two TextBoxes labelled 'Name' and 'Title'. The user enters the name for the content document in the Name box and the content heading in the Title box and clicks the Add button.
Figure 5. Navigating a book's contents
An empty content document called 'chapter01.xml' is created and the text 'Chapter 1' is inserted into the document heading. The application adds chapter01 to the package, meaning the content document is added to the <manifest>, the <spine>, and the <navMap> in the NCX document. The application navigates to the new document ready for the user to start typing. In this case, the user has typed some text into the editing area and pressed 'Save'.
Creating a new epub publication
It was shown above that there is a 'New epub' button on the 'Books' tab. Figure 6. shows the result of clicking that button.
Figure 6. Creating a new epub
The user is presented with a set of TextBoxes inviting input of basic metadata for the new book. The first three items - title, identifier, and language - are mandatory. The only item already set to a value is the identifier. In case you don't have your own ISBN number or other number that is globally unique, the application generates a GUID (Globally Unique IDentifier). You can use this or overwrite it with your own number.
Figure 7. shows the screen after each metadata item has been given a value and just before the 'Create' button is clicked.
Figure 7. metadata for the new epub
Figure 8. shows the results of clicking the 'Create' button. A new epub is created and the application shows the 'Book Contents' view. The user has entered and saved some text. Notice this is an almost empty publication, having only one content document.
Figure 8. The new epub waiting to be written
Figure 9. shows the 'Books' view after a new book is created. The list of books is updated to show the new title. Clicking on the new book opens it for viewing and editing just like any other book in the library.
Figure 9. New epub showing in the 'Books' list
Summary
This article has given a view of how an online wysiwyg epub editor might look. Details of the code can be found, shortly, in the reference section for the code project.
Undoubtedly, this is rough and ready. Many refinements would be required to make using this application a useful and pleasant experience. Among these are:
- A much richer configuration of the tiny MCE editor to provide better formatting of the text.
- Autosaving contents at short intervals.
Article Navigation
Developing an epub editor << Previous Next >>
Exploring epub standarda: Introduction
