Quick Editor Admin

Setup

  1. Add the stack to any page you want the text and images to be editable on.
  2. In the stack’s settings menu, create a username and password for login.
  3. Preview the site in a browser or upload your site and in the browser address bar add ?admin to the end of the address. Press enter/return to load the the login screen for that specific page. Once logged in you will be able to edit any text or images found on that page. *This excludes any content that is not already available on page load. Stacks or plugins that append content after load will not be editable.

Restricting the editor to specific regions or stacks

You can specify what content is editable by adding the included Quick Editor Admin Wrapper stack to your page. In the wrapper stack’s settings “Wrapper type” is set to “Editable content” by default. Any text or images placed inside this stack will be editable. If the wrapper stack is placed on the page with this wrapper type enabled, all content not found inside this (or any other wrapper stack set to “Editable content”) will not be editable.

If you would rather specify which areas are not editable you may switch the “Wrapper type” to “Noneditable content”. The wrapper stack also include two more types. “Admin only content” will set anything placed inside the stack to only be visible in the admin or editor. “Admin hidden content” will hide the content when in the admin or editor and will show the content to page visitors only.

Editor toolbar breakdown

The toolbar can be moved around by clicking and dragging the handle found at the top (three dots).

List of options from left to right, top to bottom:

Bold  Adds a <strong> tag to the selected text.

Italicize Adds an <em> tag to the selected text.

Link Adds a link to the selected text.

Align text left, center, right Aligns the text of the selected element

Heading 1-3 Changes the tag of the selected element into the corresponding <h> tag

Heading 4 Changes the tag of the selected element into a <h4> tag

Paragraph Changes the tag of the selected element into a <p> tag

Loose text Changes the tag of the selected element into a <span> tag

List Changes the tag of the selected element into a <ul> tag. Pressing enter/return will add new <li> items.

Ordered list Changes the tag of the selected element into a <ol> tag. Pressing enter/return will add new <li> items.

Table Opens a table dialog that allows you to create a table to insert below the selected element.

Indent Lowers the level of the selected list’s <li> items.

Unindent Increases the level of the selected list’s <li> items.

Line break Adds a line break to the end of the selected element. Any text added after will still be apart of the same element. If you wish to create a new element, hit enter/return to create a new element.

Insert image Opens a dialog to upload and insert a new image.

Insert video link Opens a dialog to embed a video by URL.

Preformatted Changes the tag of the selected element into a <pre> tag.

Undo

Redo

Delete

Advanced: Editing element attributes/properties

At the bottom of the editor you will se a purple tag that represents whatever element you have selected.

Clicking on this tag will open a popup menu with some additional advanced settings. In this menu you can click the gear icon to add or edit the element’s attributes/properties in name value pairs. You can add classes, an id, alt tag, or any other element attribute. Press enter/return after adding a value to add another attribute.

Advanced: Editing the element’s HTML

At the bottom of the editor, click on the purple tag for the selected element to open a popup menu with some additional advanced settings. Click the “</>” icon to see the html in an editable format.