Developer Center

Editor.js

All functionality of the Saber Editor is located within the compiled /wwwroot/editor/js/editor.js file. Your Saber plugins can take advantage of Saber's Editor UI by utilizing various functions located within editor.js.


Changed

If you'd like Saber to display to the user that the tab belonging to your plugin has pending changes to save, use the following JavaScript function:

S.editor.changed(true);

The example above will display an asterisk (*) in your plugin's selected tab to signify that the contents of the tab has changed and should be saved. Also, the File > Save menu will be enabled. You should learn how to Save your plugin content when the user clicks the File > Save menu or presses Ctrl + S.


If your plugin affects the source code of the current web page that you are editing, you can update the following JavaScript properties to force Saber to automatically reload certain resources after the user presses the ESC key to preview their web page.

S.editor.files.html.changed = true Forces the current web page HTML to reload along with website.js & the web page's own JS file.
S.editor.files.less.changed = true Forces the current web page CSS file to reload.
S.editor.files.js.changed = true Forces website.js & the web page's own JS file to reload.
S.editor.files.content.changed = true Forces the Page Content tab to reload when focused.

Code Bar

S.editor.codebar

The code bar is located at the bottom of the Code Editor and displays which line number & column the cursor is currently located. There is also a status, which is usually set to Ready after the code editor loads. You can change the status of the code bar by using S.editor.codebar.status("My Message").


Components

S.editor.components

The user is able to add HTML components to their web pages by filling out a form instead of having to write Mustache Code directly on their HTML web pages. To display a component configuration form for your HtmlComponentModel, use the following JavaScript code:

S.editor.components.configure.show("my-component-key", "My Component");

When the user is finished configuring your component, mustache code will be generated where the user's cursor is located within the code editor.

By default, all vendor components that contain HtmlComponentModel.Parameters will be configurable by clicking the HTML Components button found in the file bar above the code editor.


Dropdown Menus

S.editor.dropmenu

The dropdown menu is a basic UI system that allows users to display a floating list of menu items after clicking a button that triggers the dropdown menu to display. The HTML & JavaScript below is an example of a drop down menu system controlled by a button element.

<div class="app-menu">
<button>App</button>
<div class="drop-menu hide"><ul class="menu"></ul></div>
</div>
S.editor.dropmenu.add('.app-menu > .drop-menu > .menu', 'app-settings', 'App Settings', '#icon-settings', false, S.editor.myapp.settings.show);
S.editor.dropmenu.add('.app-menu > .drop-menu > .menu', 'app-settings', 'Save Design', '#icon-save', false, S.editor.myapp.design.save);
S.editor.dropmenu.add('.app-menu > .drop-menu > .menu', 'app-settings', 'Delete Design', '#icon-close', true, S.editor.myapp.design.delete);
 
$('.app-menu > button').on('click', (e) => { S.editor.dropmenu.show(e, '.app-menu'); });

For more examples on creating menu systems in Saber, refer to Basics - Add Drop Down Menus.


Errors

S.editor.error

If you'd like to display an error message to the user for whatever reason, use the following HTML & JavaScript code:

<div class="messages"></div>
S.editor.error('.messages', 'An error has occurred. Please contact the webmaster for help.');

Explorer

S.editor.explorer

The explorer is a collection of UI systems that handles file & folder operations. From here, you can open the File Browser, navigate to a specific directory in the file browser, open a file (HTML, JS, CSS, or LESS) in a new tab, or display a popup modal used for navigating through the file system (wwwroot, partials) and selecting a file to work with.


S.editor.explorer.show();

To display the File Browser, simply execute the JavaScript above. You can also hide the file browser with the JavaScript below.

S.editor.explorer.hide();

If you want the File Browser to navigate to a specific directory, use the JavaScript function below.

S.editor.explorer.dir('wwwroot/images');

You can specify 'root' to navigate to the first directory level within the File Browser, which will display folders such as wwwroot, pages, and partials.


To open a file in a new tab, use the following JavaScript function:

S.editor.explorer.open('partials/lists/testimonial-card.html');

Saber will only open HTML, JS, CSS, & LESS files in the Code Editor.


To display a File Browser in a popup modal so the user can select a file for reference, use the following JavaScript function:

S.editor.explorer.select('Select A Partial View', '/partials', '.html', (file) => {
if(file && file != '') {
//do stuff with file
}
});

Fields

S.editor.fields

Content fields are generated from Mustache Code found within HTML files. If you'd like users to utilize their Partial Views within your plugin, you can display a popup modal that will let the user fill out a form used to populate the mustache variables, blocks, & components found within their partial view.

S.editor.fields.popup(partial, language, 'Update Fields', data, 'Save Changes', (e, fields) => {
//save fields via plugin service method
});

In the example above, the user is shown a popup modal with a Content Fields form titled "Update Fields" that renders a list of fields based on the provided partial file path (e.g. "partials/product.html") and language (e.g. "en"). Since the user is updating existing fields, the form is populated with values from the data object, which is an array of key/value pairs representing each field in the form. When the user clicks the button labeled "Save Changes", a callback function is executed allowing the plugin to save the fields values via an IVendorService method.


File

S.editor.file

Handles simple file operations. You can either create a new file or delete existing files. Saber limits the user to creating & deleting files within the wwwroot, partials, & emails folders along with any root folders created by the user or by any plugins.

All root folders accessible by the user (with the exception of the wwwroot folder) exists within the Contents folder located in Saber's application folder. The publicly accessible wwwroot folder exists within Saber's application folder.

S.editor.file.create.show();

Use the JavaScript function above to display a popup modal for creating new files.

S.editor.file.delete(path);

Use the JavaScript function above to delete a specific file. The user will be prompted with a confirmation popup before they are able to delete the file.


File Bar

S.editor.filebar

Is responsible for all content within the file bar located below the tabs within Saber's Editor UI. The file bar contains an icon & title representing the currently selected tab, and a toolbar area on the right-hand side of the file bar. The toolbar is used for action buttons, filters, & drop down menus related to the selected tab.

S.editor.filebar.update('My Plugin', 'icon-plugin', toolbar_html);

The example above will update the contents of the file bar. For more information about updating the file bar, go to The Basics - Update File Toolbar.


Folder

S.editor.folder

Handles simple folder operations. You can either create a new folders or delete existing folders. Saber limits the user to creating & deleting folders within the wwwroot, partials, & emails folders along with any root folders created by the user or by any plugins.

All root folders accessible by the user (with the exception of the wwwroot folder) exists within the Contents folder located in Saber's application folder. The publicly accessible wwwroot folder exists within Saber's application folder.

S.editor.folder.create.show();

Use the JavaScript function above to display a popup modal for creating new folders.

S.editor.folder.delete(path);

Use the JavaScript function above to delete a specific folder. The user will be prompted with a confirmation popup before they are able to delete the folder.


Hotkeys

S.editor.hotkey

Saber comes with a system for handling hotkeys. Your plugin is able to register hotkeys that can be accessed from anywhere within Saber's Editor. Some hotkeys are predefined and used by Saber, which can be found here.

As of this moment, vendor hotkeys are not implimented or tested. There will be more documentation once this feature is implimented.


Language

S.editor.lang

Saber supports multilingual content and therefore allows the user to create and manage languages. You can load a list of languages within a drop down list using the HTML & JavaScript below:

<select id="mylangs"></select>
S.editor.lang.load('#mylangs', 'en', (e) => {
//user changed language
}

If you'd like to give the user an opportunity to create a new language, use the following JavaScript code:

S.editor.lang.add.show(() => {
//update language drop down list
S.editor.lang.load('#mylangs', 'en', (e) => {
//user changed language
}
}

The example above will display a popup modal allowing the user to create a new language, and after the language is created, the callback function will be executed to update the language drop down list.