Online Editor Explanation

Online Editor explanation

This wiki page explains how to use our Online Editor.
The Online Editor should be used for each issue and pull request!

How to login

The login is quite easy, just press the login button on the top right and login via GitHub.

Base functionality and page structure

Our online editor was designed to create easy examples/demos for the bootstrap-table.
The page is structured as follows:

• On the Top we have 5 Buttons
  • Run: The run button shows the current version of your example.
  • Save: The save button saves your example. After you pressed save, the url will be changed e.g. https://live.bootstrap-table.com/code/<username>/<ID>
  • Libraries: This button will open a configuration page. On this page you can configure the enviroment of the example:
    • Bootstrap Table source: This option defines which source of the version (CDN or from GitHub as source) should be used. If you choose From GitHub src you can set a branch which will be used for the example. For Issues you normally always use From Released CDN.
    • Release CDN version: Here you can choose the version of the bootstrap-table to create a example for older bootstrap-table versions.
    • Theme: Here you can choose between our supported themes e.g. to show a issue with a certain theme.
    • Extensions: If you explains use a extension, you can select it here easily. This means you dont have to include it yourself on the example!
  • Load Examples: This option opens a page, here you can load existing examples (Its a "mirror" of our examples page).
  • Links: The last button just hold some links e.g. to our website, github page etc.
• On the left side you can write your examples. Including html, css and javascript (css and javascript needs a <style></style> and/or <script></script> tag!
• On the right side you can see your running example (after presssing on the run button).

Workflow for Issues

Each issue should contain a example (created on the Online Editor) of the problem.

1. Open the online editor
2. Go to the Libraries page and configure the enviroment of the example

• Version
• Theme
• Extensions

3. Write down your example (or copy it from you local project)
4. Check if you can reporduce your issue on the example
5. Save the example (press on the save button) and copy the url.
6. Open an issue with the url to the example.

(Maybe you also can use our Load Examples button to load a existing example, instead of point 2 and 3)

Workflow for Pull requests

The workflow for PR's is quite similar to the workflow for Issues.
The only difference is that you have to choose your branch (The editor will use your code to create the example). For that you have to open the Libraries page, select From GitHub src on the Bootstrap Table source option and write your branch name in the GitHub src branch input.
The syntax for the branch name is <username>:<branch>. You also can copy that string from the pull request page.