Using the Editor

django-scribbler makes use of CodeMirror to create a powerful client-side editor. We’ve added a couple features to make it easier when working with Django templates.

Context Inspection

When using the editor, you can inspect the current context by starting a variable node with {{ and hitting tab. As noted in the quick start introduction, scribble content can be any valid Django template. The context provided when rendering the scribble includes anything added by the set of TEMPLATE_CONTEXT_PROCESSORS. This would include STATIC_URL, MEDIA_URL, LANGUAGE_CODE, the current user and others. Developers may choose to add context processors to include additional content for rendering scribbles.

_images/context-screenshot.png

Template Tag/Filter Completion

Similar to how the editor can tab-complete the context variables, you can tab complete template tags when {% has been opened. The built-in filters can be tab-completed when the pipe | character is detected inside of a variable node. Currently this will only complete the built-in tags and filter and will not include any additional tags or filters which might be added by loading additional libraries inside the scribble.

_images/filter-screenshot.png

Saving Drafts

While editing the scribble content, the editor will periodically save the current editor content as a draft. These drafts are saved on the client side using local storage (if supported by the browser) or a cookie. While that means you won’t be able to see or use these drafts in another browser, it does mean that you work will not be lost if there is a failure on the server while saving changes or making edits. When the editor is opened it will restore any draft that is found. There is the option to discard a working draft. This will load the current scribble content into the editor.

Full-Screen Mode

Sometimes scribbles are rather long and it is useful to have more screen area to see the text. While the editor is in focus you may press F11 to view the scribble in full-screen mode. To deactivate full-screen mode press either F11 or ESC.