Build A Custom Html Editor

Introduction We are looking to build a custom HTML editor. The editor will be browser based and will use a schema to enforce a certain structure. Main technologies involved are JS, XML, and XLS transformations. For a simple example let's consider an HTML page with: - a language; - a title; - a list of photo areas which can be emphasized, each area containing: an image and a list of tags; - a comment (html). See [login to view URL] in the attachment for an example. The page will be editable according to a schema (we have a structure in mind but we're open to suggestions). The schema for our example could allow the user to perform actions like: - choose a page language (en or fr) - change the text in the title; - add/edit/move/delete of photo area items; - change the image in each photo area; - add/edit/move/delete tags for every photo area item; - set each photo area to be emphasized or not; - edit the comment. The schema will not allow the user to change anything else (like image borders, text color or any other aspects of the page). ## Deliverables We imagined a schema structure using XML. You can see the schema for our example in [login to view URL] in the attachment. All attributes will be explained below. If you follow the tags you can easily recognize the list of photo areas and the list of tags for example. Note this is not an XSD (XML schama file) but if that would help we can find a way to replace it with an XSD. This schema will be used by the system to allow the user to perform actions and change properties. These include adding new items to a list, changing some text or a link etc. All the actions the user performs combined with the schema will result in some ouput data in XML format. We have an idea of how that would look but are open to better ideas or suggestions. Please check attached data.xml. You will notice the structure is similar to the schema, with the observation that ids from schema become tag names in the output data. Attributes will be explained below. To generate the HTML from this data in XML form you are provided with an XSL file (XSLT). Use a simple XSL transformation over the XML data and you will get the HTML output. We do not have the XSL file for our example but that should basically take the [login to view URL] and the XSL file and produce what you can see in final.html. We will discuss with you the exact format for every file used. Initially you start with a schema, a data file (you don’t start with the data from scratch), and an XSL file. Given these you can render an initial HTML. Then you will provide the user with actions that will result in a new output data. Once this data changes you will apply the XSL again to obtain a new HTML that will replace the old one and so on. The way you provide the user with tools is first to tell the XSL we’re in edit mode (using a parameter for example). As you can see in the [login to view URL] most tags have an attribute called refid. This will tell the XSL to create a tag inside the output HTML with the id equal to the value of the corresponding refid. After the XSL is applied you will locate the elements with these ids and insert html and JS to allow users to perform actions (add new item to a list, change a text or a link etc). We will have different schemas and XSLT files and should be able to add more in time. However we know exactly what elements the schemas can have so that you know exactly what to implement. Also we will provide the exact behaviour for every possible tag in the schema. Schema structure This section may seem very hard to understand, but we will offer more details to help you understand so don’t worry. The schema contains two types of elements: - linear elements: o text (textbox) o html (using fckeditor) o checkbox o choice (dropdown list) o link (url + caption) o image (url + alt) o please note: url = text + browse button - nonlinear elements: o group (groups multiple elements) o oneof (acts as a switch, allowing only one child to exist at one time) o listof (repeater) Linear elements are used for titles, links, images, etc. For our example we use a choice for the language, text for the title and for tags, image for images, and html for the comment. Listof is used for the list of tags and for the list of photo areas. Listof can have only one child element so we’re using the group element to group multiple items. Schema attributes The schema uses attributes that define how the actions are displayed to the user. For example an image can have an edit icon appear in the corner when you hover over it. A list can have an add icon to add new items, list items can have edit or move icons and so on. These can appear in different ways defined by the showas attribute. Note the showas attribute in the provided schema.xml. Here are the possible values: - nothing (the element will not show options) - static, using refid (the XSL will generate an empty element with id = value of corresponding refid; the options will then show as icons inside this element) - child, using refid (the XSL will generate an element with id = value of corresponding refid; options will show as icons inside this element when the user hovers over it) - wrapper, using refid (the XSL will generate an element with id = value of corresponding refid; a wrapper element will be then created to wrap the element and options will show as icons inside this wrapper when the user hovers over it) - property (the options will fall to the parent element which must be a group or a oneof element) If the showas attribute is not property or nothing, these icons (move, edit, delete, add etc) can be rendered in different ways. To define the display mode we use the display attribute with possible values: - layer, the icons are positioned absolute on top of the document and will not change the flow of the document - inline, the icons are positioned inline, affecting the document flow - block, the icons are positioned inside a block element, affecting the document flow Most elements in the schema have a caption for the user (name attribute), and some elements are optional (optional=??true??). Optional elements and other elements that are not visible on screen can be modified using the attribute ifmissingshowas with values: - nothing, do not show - property, transform it in a property (similar to showas=property) - static, similar to showas=static For lists we have the attributes allowempty (list can have 0 items), allowmove (items can be rearranged), and movearrowdirection which can be either horizontal or vertical(controls the way the move icon looks). Other default actions: - listof automatically has an add new action - child elements of listof have: o add new after o remove if it’s not the only item or if the listof has attribute allowempty set to true o move ahead if not first o move backward if not last - oneof has replace action if not direct child of listof (for example if oneof offers you to choose between a link and an image, you can use replace to choose again) Attributes in practice To better explain these attributes let’s consider again our example. The actions are not visible in the provided HTML file so I will just explain them in words for now. The language in the schema (tag with id=??language??) is a property so it falls to rootgroup which is the whole HTML page basically. So when you hover over the page you will see a details icon. Clicking on that will give the user a popup to edit the value for the language. When hovering over the title an edit icon will appear on top of it which then opens a popup to change the title. If the title is empty then the title becomes a property of rootgroup (because of the ifmissingshowas attribute) and will appear below language in the popup. Photolist is showas nothing which means if it’s not empty you don’t get action icons (like add new for example). However if the list is empty then it becomes static meaning you get the add new icon which will stay visible. Photoarea is showas child which means the system will add icons for add new after, move, and remove accordingly. These icons will show when hovering over the photoarea (the rectangle with image and tag list). Image is a property which means the photoarea will show a details icon which takes you to a popup where you can edit the image url and image alt attribute. Taglist will show the add new icon only if empty. Tag will show inline edit and delete icons when hovering over them but no move icons. Comment will show a static edit icon which opens a popup to edit the content. It also has a parameter toolbox which selects the type of toolbox for the rich text editor (FCKeditor in our case). We will try to provide an interactive HTML mockup for you to understand the actions better. Please note that the term popup used above does not mean a browser popup. It is an HTML popup, more like the popup you get in FCKeditor when you want to edit a link or an image (page becomes grayed out and you get a form in the center). Also, our example does not include all possible elements. We will provide more complex examples. Rendering actions Given the output data ([login to view URL] is our example), the XSL transformation will generate HTML elements with certain IDs. In our [login to view URL] example please see the element <photolist refid="ed3">. This will tell the XSL to generate a tag (a div in this case) with the id=??ed3??. After the transformation ends, the system will look for the element with id=??ed3?? and build the required HTML for action icons, namely a div with position absolute (because of this line in the schema: <group id="photoarea" name="Photo Area" showas="child" display="layer">) and inside this div it will add icons for move right, add new after, edit, and remove. It will also add mouse events to the element with id=??ed3?? so that the new div will display on hover. All other action icons will be added in a similar manner. Communicating with the server The server will run mainly ASP.NET and will perform very basic operations. If you are not familiar with .NET we will have somebody develop the server side so don’t worry about it. The server will provide the following files: - schema file (XML) - data file (XML) this was previously saved or created manually - transformation (XSL) Also the server will accept data files so the user can save the output data after editing. For this we can use either a form submit or a web service, whichever is easier for you. We understand this is a complex project and many aspects are still not documented. We will do our best to answer all your questions and extend the documentation as we go.