Support Center

Editor

The Saber Editor is the user interface that you can navigate to after logging into your administrator account and pressing the ESC key on any page within your Saber website. The Saber Editor contains all the tools you need to modify your website, edit multilingual page content, write HTML, CSS, & JavaScript, or manage website settings, user accounts, and security groups. There is a plethora of tools available within Saber's Editor that will help with building your website.

Code Editor

Saber uses Monaco Editor, the same editor used within Visual Studio Code. When you press the ESC key to navigate to the Saber Editor from any page within your website, you'll notice that Saber loads three files into the code editor (HTML, LESS, & JS file). These three files are associated with the web page you are viewing. If you make any changes to those three files and then save your changes (Ctrl+S), you can press the ESC key to preview your changes instantly. When you are finished examining the preview for your web page, simply press the ESC key again to view the Code Editor.

When editing an HTML file, You can write Mustache Code.
When editing an HTML file, you can open the HTML Components menu from the File Toolbar.

Tabs

You can switch between different tabs to display various types of content within the Saber Editor. All HTML, JS, LESS, & CSS file tabs will display the Code Editor. Other content, such as the Page Settings, Website Settings, User Accounts, & Security Groups sections are loaded into separate tabs as well.

This toolbar will display buttons related to the page or file you are currently editing.

	Components Menu	Add HTML components to your web pages by generating Mustache Code.
	Content Fields	View & edit multilingual content for your page or partial view. You can also view your page's content fields by pressing the F2 key.
	Page Settings	Display settings related to the current web page being edited. You can also view your page settings by pressing the F3 key.
	Page Resources	Upload and manage media files & downloads for the current web page being edited.You can also view page resources by pressing the F4 key.
	Preview	Display a preview of your web page with all saved changes applied. You can also view a preview by pressing the ESC key.

File Browser

The file browser allows you to manage all the files associated with your website, including HTML pages, partial views, images & other media, documents, fonts, any custom CSS or JavaScript libraries, zip files, and your website.less file. When you press the ESC key to navigate to the Saber Editor from any page within your website, you can press the F9 key to display a file browser on the left-hand side of the Editor. You can also open the file browser by navigating to View > File Browser from the top menu bar.

NOTE: You can navigate to any web page by exploring the pages folder within the File Browser then clicking on any HTML file in that folder or sub-folder.

Creating Files & Folders

You can create files or folders by navigating to File > New File or File > New Folder from the top menu bar. You can only create new folders within the wwwroot & partials folders, and you can only create new files within those two folders and their sub-folders as well. The wwwroot is a publicly accessible folder that is usually used to store images and media files, documents, and zip files for download by your website visitors. The partials folder is specifically used for creating and managing Partial Views, which are HTML files.

Multilingual Content

To enable multilingual content, you must first replace the text content within your web page's HTML code with mustache variables. Once you save your HTML page after adding mustache variables, navigate to View > Page Content from the top menu bar. From there, you can add supported languages such as Spanish (es), and you'll notice that there are text fields representing each mustache variable that you added to your HTML page. Once you fill out the text fields with your content and save by navigating to File > Save (or Ctrl+S), you can press the ESC key to view a preview of your web page to see that the mustache variables were replaced with the content you wrote.

You can also edit multilingual content for Partial Views by navigating to the partials folder within your File Browser, opening a partial view HTML file in the code editor, then selecting View > Page Content from the top menu bar. The only time Saber will render any multilingual page content for your partial views is when you select a partial view as your page header or footer within the Page Settings tab.

NOTE: If you place a mustache variable within an <img/> tag's src attribute, Saber will display an image browse button along with a text field within the Page Content tab (e.g. <img src="{{portfolio-image}}"/>). This will allow you to select an image from a Page Resources popup modal.

NOTE: You can also place a mustache variable within a style attribute inside a background-image CSS property and Saber will display an image browse button along with a text field within the Page Content tab (e.g. <div style="background-image:url({{header-image}});"/>). This will allow you to select an image from a Page Resources popup modal.

Partial Views

Partial views are HTML files that can be rendered inside of other HTML files by using a mustache partial tag within your HTML page or partial view. To generate a mustache partial, click on the Component Menu icon, then select the Partial View component. From there, you'll be able set the ID of your mustache partial and explore your partials folder to select an HTML file. After clicking the button labeled "Create Partial View", Saber will generate a mustache partial tag within the Code Editor wherever your cursor is at in your HTML code. The mustache partial may look similar to {{sidebar "partials/sidebar.html"}}. When you press the ESC key to preview your page, you'll notice the partial view is being rendered inside your page.

Resources

Saber comes with Page Resources and Website Resources, which are both file explorers that display files as thumbnail images in a grid layout. You can upload resources that can be used in the HTML, CSS, & JavaScript code within your website. For example, you could upload an image in your Page Resources tab and then use that image in HTML <img src="/content/pages/home/logo.png"/>.

The Page Resources tab is meant to be used to upload & manage files for specific web pages within your website, and the Website Resources tab is meant to be used to upload & manage files for site-wide content.

The Website Resources file explorer will load when you navigate to the wwwroot folder within the File Browser and the Page Resources tab will load when you navigate to View > Page Resources from the top menu bar.

Analytics

The Analytics tab can be found by navigating to Website > Analytics from the top menu bar. This feature is currently experimental and will display very basic daily visitor statistics

Shortcut Keys

Saber has various shortcut keys that make workflow much easier.

ESC	Toggle between the website preview and the Editor.
F1	Display the Action Bar when the Code Editor is active.
F2	Display the Page Content tab or Partial View Content tab.
F3	Display the Page Settings tab.
F4	Display the Page Resources tab.
F6	Display the Website Settings tab.
F7	Display the User Management tab.
F8	Display the Security Groups tab.
F9	Display the File Browser on the left-hand side of the Editor.
Ctrl+F	Display a Find & Replace Modal when the Code Editor is active.
Ctrl+S	Save the contents of the active tab (if applicable).
Alt+(0 - 9)	Display the contents of a tab based on the number you press. Alt+1 will display the 1st tab and Alt+0 will display the 10th tab.