Wysiwyg Editing With PySite

When you visit your site after you have logged in to PySite, you will find a new toolbar at the top of the page. You now can edit particular areas of the page right here:

Move the mouse over the page and yellow frames indicate which areas are edible, err… editable. The floating toolbar gives you the available formatting options.

Click SAVE at the top of the page, and presto — all changes are persisted.

How does this work? The editor is Aloha , a HTML5 based WYSIWYG [1] editor. In the source code we have marked editable areas as DIVs with class “editable” and some ID. When you click SAVE, PySite searches the source code for that ID and replaces the content of the found element with your new text [2]. The (uneditable) rest of the page and source code stays unaltered.

This is particularly important when the source code contains Jinja directives; you certainly do not want to replace them by their rendered HTML.

As en vogue as wysiwig editing webpages in the browser may be, it has certain limitations. For instance, you cannot assign a color to the text. Also you cannot edit the list of assigned CSS classes or other HTML attributes [3].

No problem for PySite! Just press the button “Source” on the top toolbar. It opens the source editor and automatically loads the source code of the page you are currently displaying. Type in any HTML and Jinja here, and when you press save in the source editor, the rendered page in the previous browser window automatically refreshes.

A curious side note: the developer tools in modern browsers allow you to edit the HTML and CSS source code and to directly see the changes in the browser window. If you do this in areas marked as editable for PySite and afterwards click SAVE, even these changes are persisted ;)