iBoard Live Editor

iBoard Live Editor is a web-based file editor that allows administrators and developers to browse, open, edit, create, upload, and save files directly from the browser.

Use this feature when you need to modify iBoard skin files, HTML templates, CSS files, JavaScript files, JSON configuration files, plugin files, or other website files without opening the server file system directly.

Overview

The Live Editor provides a file tree on the left and a code editor on the right. Administrators can select a folder, open a file, edit its source code, and save the changes from the browser.

What This Feature Is Used For

The Live Editor is useful when you need to make quick file changes from the administrator panel. It is especially helpful for skin development, layout adjustment, template editing, and small script or CSS updates.

• Edit iBoard skin HTML files.
• Edit page layout or template files.
• Edit CSS files for design changes.
• Edit JavaScript files for behavior changes.
• Edit JSON configuration files such as skin.json or iboard.json.
• Create new folders or files.
• Upload files into a selected directory.
• Save changes directly from the browser.

File Tree

The File Tree shows the available folders and files under the configured root path. You can expand folders, select files, and open them in the editor.

In the example screen, the editor is opened under an iBoard skin path:

/iBoard/Skin/iBoard/iBoardNews/iboard/list

This means the administrator is currently editing the list-related files of the iBoardNews skin.

Common File Types

Opening and Editing a File

1. Open Admin > Pages > Modify Files.
2. Use the file tree to browse to the target folder.
3. Click the file you want to edit.
4. The file opens in the editor tab area.
5. Edit the source code carefully.
6. Click Save to write the changes to the file.
7. Refresh or preview the related page, board, or skin to confirm the result.

Editing Multiple Files

The editor supports multiple open file tabs. This is useful when one change requires editing related files together.

For example, when editing an iBoard list skin, you may need to open:

• list.html
• list_row.html
• list_notice.html
• pagination.html
• related CSS files

When multiple tabs are open, make sure you are saving the correct active file.

Creating a New File

1. Select the folder where the new file should be created.
2. Click File.
3. Enter the file name with the correct extension.
4. Open the new file in the editor.
5. Add the required content.
6. Click Save.

Creating a New Folder

1. Select the parent folder.
2. Click Folder.
3. Enter the new folder name.
4. Confirm that the folder appears in the file tree.

Uploading Files

1. Select the folder where files should be uploaded.
2. Click Upload.
3. Select files from your computer.
4. Upload the files.
5. Refresh the file tree if the uploaded files do not appear immediately.

Editing iBoard Skin Files

The Live Editor is often used to edit iBoard skin files. Skin files are usually divided into small template files.

iBoard Placeholders

Many iBoard template files use placeholders. These placeholders are replaced by the iBoard rendering engine when the page is displayed.

Example placeholders:
##{FIELD-TITLE}##
##{FIELD-WRITER}##
##{FIELD-DATE}##
##{FIELD-LOOKUP}##
##{FIELD-CATEGORY}##
##{PARTIALASYNC-LISTROWS}##
##{PARTIALASYNC-PAGINATION}##

Do not remove placeholders unless you understand their purpose. Removing required placeholders may break the board output.

Example: Editing a Board List Template

If you want to modify the main board list design, open list.html. This file usually controls the overall structure of the board list.

<section class="ibnews-hero">
    <div class="ibnews-hero-text">
        <h1>##{FIELD-BOARDNAME}##</h1>
        <p>Company updates, announcements, and resources.</p>
    </div>
</section>

<main class="ibnews-layout">
    <section class="ibnews-main">
        ##{PARTIALASYNC-LISTROWS}##
        ##{PARTIALASYNC-PAGINATION}##
    </section>
</main>

Save Behavior

The Save button writes the current editor content to the selected file. After saving, the related website page, board, or skin may need to be refreshed.

Saving a file can immediately affect the live website if the file is used by the active skin or page. Edit carefully and keep backups.

Recommended Workflow

1. Identify the exact page, skin, or component that needs modification.
2. Open Modify Files.
3. Navigate to the correct folder in the file tree.
4. Open the target file.
5. Copy the original content before editing.
6. Make a small change.
7. Click Save.
8. Refresh or preview the related page.
9. If the change works, continue editing.
10. If the change breaks the page, restore the previous content.

Common Use Cases

Important Notes

• This feature edits real server files from the browser.
• Changes may affect the live website immediately.
• Always back up important files before editing.
• Do not edit files if you are not sure what they control.
• Be careful with JSON files because invalid JSON can break configuration.
• Be careful with HTML placeholders because they may be required by the rendering engine.
• Use unique CSS class names to avoid conflicts.
• After editing, test the actual page or board that uses the file.

Troubleshooting

Best Practices

• Use the Live Editor mainly for controlled file changes, not random editing.
• Keep a copy of original code before saving.
• Edit one file at a time.
• Make small changes and test frequently.
• Do not remove iBoard placeholders unless you understand the rendering process.
• Validate JSON before saving JSON files.
• Use version backups for important skins and templates.
• Limit access to this feature to trusted administrators or developers.

iBoard Live Editor is a powerful browser-based file editor. It is convenient, but it should be used carefully because saved changes can directly affect the live website.