Link to the plugin page: https://zeroqode.com/plugin/ace-code-editor-plugin-for-bubble-1676558668986x819185325960833500
Demo to preview the plugin:
Introduction
This is a high-performance code editor plugin for the web.
You can use this element to write code in a specific language with useful syntax highlighting. The plugin has the ability to change the language, theme, font and reading mode using actions. Also, the written code can be downloaded.
How to setup
- Configure the Plugin:
- Open the element's settings panel.
- Adjust the following settings to fit your application requirements:
- Language: Set the programming language for syntax highlighting (e.g., JavaScript, Python, HTML).
- Theme: Choose the editor's theme, such as "monokai" (dark) or "github" (light).
- Read-Only Mode: Enable or disable the user's ability to edit the content.
- Font Size: Adjust the font size to improve readability for your users.
After adding the Code Editor element to your page:
- Adjust Settings:
- Adjust the Code Editor’s layout, size, and other appearance-related properties to match your app’s design.
- Add workflows to leverage dynamic features, such as changing themes, resetting content, or downloading files.
Plugin Element Properties
Code Editor
Fields:
Title | Description | Type |
Language | Available options: C/C++, C#, CSS, Django, Gitignore, Golang, HTML, Java, JavaScript, JSON, Kotlin, LESS, Markdown, Perl, PHP, Python, R, Ruby, SCSS, SQL, TypeScript, XML | Dropdown |
Theme | Available options: Ambiance, Chrome, Clouds, Cobalt, Dracula, Eclipse, GitHub, Monokai, One Dark, SQLServer, Terminal, Textmate, Twilight, Tomorrow night, Tomorrow night blue, XCode | Dropdown |
Default Value | The default code content to show in the editor when it first loads. | Text (optional) |
Font size | The size of the font in pixels, adjusting how large or small the text appears in the editor. | Number |
Read Only | Determines whether the editor is in read-only mode, preventing changes to the content. | Checkbox (yes/no) |
Element Actions
- Reset value - Resets the value in the editor to its initial state or a default value.
- Set font size - Sets the font size in the editor.
Title | Description | Type |
Font size | The font size to be applied. | Number |
- Set language - Sets the programming language for the editor to the specified language.
Title | Description | Type |
Language | Use one of this: C/C++, C#, CSS, Django, Gitignore, Golang, HTML, Java, JavaScript, JSON, Kotlin, LESS, Markdown, Perl, PHP, Python, R, Ruby, SCSS, SQL, TypeScript, XML Available options: C/C++, CSS, JavaScript, HTML | Text |
- Set Read Only mode - Enables or disables the read-only mode in the editor.
Title | Description | Type |
Read Only | Defines whether the editor is in read-only mode. | Checkbox (yes/no) |
- Set theme - Changes the visual theme of the editor.
Title | Description | Type |
Theme | Use one of this: Ambiance, Chrome, Clouds, Cobalt, Dracula, Eclipse, GitHub, Monokai, One Dark, SQLServer, Terminal, Textmate, Twilight, Tomorrow night, Tomorrow night blue, XCode | Text |
- Set value - Sets a specific value to the editor's content.
Title | Description | Type |
Value | The value to be applied to the editor. | Text |
- Download file - Allows downloading a file from the editor's content.
Title | Description | Type |
File name | The name of the file to be downloaded. | Text |
Exposed states
Title | Description | Type |
Value | The current content of the code editor. | Text |
Read Only mode | Indicates whether the editor is in read-only mode. | Checkbox (yes/no) |
Cursor row | The current row where the cursor is located in the editor. | Number |
Cursor column | The current column where the cursor is located in the editor. | Number |
File extension | The file extension associated with the current file. | Text |
Available languages | A list of available programming languages for the editor. | Text |
Available themes | A list of available themes for the editor. | Text |
