Skip to content

Commit

Permalink
updated: README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
prathamVaidya committed Apr 7, 2024
1 parent faa65bf commit ee52c83
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
# Supercode TinyMCE Plugin

**SuperCode** is an enhanced source code editor plugin designed specifically for TinyMCE, the popular web-based WYSIWYG editor. This plugin provides users with a seamless experience for editing and displaying source code within the TinyMCE editor environment. (No ugly popup modal)
**Supercode** is an enhanced source code editor plugin designed specifically for TinyMCE, the popular web-based WYSIWYG editor. This plugin provides users with a seamless experience for editing and displaying source code within the TinyMCE editor environment. (No ugly popup modal)

![chrome-capture-2024-4-7 (1)](https://github.com/prathamVaidya/supercode-tinymce-plugin/assets/61202986/eb519154-ac86-423a-8d63-450f174c7e4b)

## Features

Supercode internally uses Ace Editor to provide the following features:

- **Syntax Highlighting:** SuperCode offers syntax highlighting for a wide range of programming languages, making code easier to read and understand.
- **Syntax Highlighting:** Supercode offers syntax highlighting for a wide range of programming languages, making code easier to read and understand.
- **Code Formatting:** Users can format their code effortlessly with built-in formatting options, ensuring consistency and cleanliness.
- **Line Numbers:** SuperCode automatically adds line numbers to the code editor, aiding in navigation and reference.
- **Line Numbers:** Supercode automatically adds line numbers to the code editor, aiding in navigation and reference.
- **Customizable Themes:** Users can choose from a variety of themes to customize the appearance of the ace code editor to suit their preferences.
- **Integration with TinyMCE:** SuperCode seamlessly integrates with TinyMCE, allowing users to insert and edit code directly within their content. The official and premium code plugins utilize a modal box, which can create a disruptive user experience for individuals who aim to seamlessly switch between both modes.
- **Markdown Editing:** SuperCode allows a parser and renderer to be passed as a configuration which can be used to convert TinyMCE into markdown editor or any editor.
- **Integration with TinyMCE:** Supercode seamlessly integrates with TinyMCE, allowing users to insert and edit code directly within their content. The official and premium code plugins utilize a modal box, which can create a disruptive user experience for individuals who aim to seamlessly switch between both modes.
- **Markdown Editing:** Supercode allows a parser and renderer to be passed as a configuration which can be used to convert TinyMCE into markdown editor or any editor.

## Installation

To install the SuperCode plugin, follow these steps:
To install the Supercode plugin, follow these steps:

1. Download the SuperCode plugin files (Plugin files in the `supercode` directory).
2. Upload the plugin files to your TinyMCE plugin directory.
3. Include the SuperCode plugin in your TinyMCE configuration.
1. Download the Supercode plugin files (Plugin files in the `supercode` directory).
2. Upload the plugin files (`supercode` folder) to your TinyMCE plugin directory. (In `tinymce/plugins`)
3. Include the Supercode plugin in your TinyMCE configuration.
4. Add the supercode in the toolbar.
5. Customize the plugin settings as needed.

## Usage

To use the SuperCode plugin in TinyMCE, simply:
To use the Supercode plugin in TinyMCE, simply:

1. Click on the SuperCode Toggle button in the TinyMCE toolbar or use Ctrl+Space to enter code mode.
2. The SuperCode source code editor will appear, allowing you to enter or edit code.
3. Make changes to your code as needed, utilizing the features provided by SuperCode.
1. Click on the Supercode Toggle button in the TinyMCE toolbar or use Ctrl+Space to enter code mode.
2. The Supercode source code editor will appear, allowing you to enter or edit code.
3. Make changes to your code as needed, utilizing the features provided by Supercode.
4. Click again on the Supercode Toggle button or press escape or use Ctrl+Space shortcut to switch back to visual editing.


## Using as a Markdown Editor

SuperCode allows a parser method and renderer method to be passed as a configuration, this gives the ability to convert the languages when switching between visual and code mode. A good use case can be converting TinyMCE into a Markdown editor.
Supercode allows a parser method and renderer method to be passed as a configuration, this gives the ability to convert the languages when switching between visual and code mode. A good use case can be converting TinyMCE into a Markdown editor.

![chrome-capture-2024-4-7 (2)](https://github.com/prathamVaidya/supercode-tinymce-plugin/assets/61202986/00fb07c3-3ef9-485f-984c-5ce03b4a72e3)

## Configuration

Supercode is highly configurable. You can configure the SuperCode plugin by modifying the TinyMCE configuration options. There are many options but none of them are required. Here's an example configuration:
Supercode is highly configurable. You can configure the Supercode plugin by modifying the TinyMCE configuration options. There are many options but none of them are required. Here's an example configuration:

```javascript
tinymce.init({
Expand Down Expand Up @@ -75,7 +75,7 @@ Here are all the configurations
| fontSize | The font size of the ace code editor. | Number |
| wrap | Determines whether code lines should wrap or not. | Boolean |
| autocomplete | Specifies whether autocomplete functionality is enabled. | Boolean |
| iconName | The name of the icon used for the SuperCode plugin in the toolbar. [View Supported Icon List](https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/) | String |
| iconName | The name of the icon used for the Supercode plugin in the toolbar. [View Supported Icon List](https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/) | String |
| parser | The method used for converting HTML content back into the target language. | Function |
| renderer | The method used for rendering the source language into HTML. | Function |
| language | The default language for syntax highlighting. [Supported Languages](https://cloud9-sdk.readme.io/docs/language-mode) | String |
Expand Down Expand Up @@ -136,15 +136,15 @@ All the ace themes are supported. You can try out the themes [here](https://ace.

## Compatibility

SuperCode is compatible with the latest versions of TinyMCE and supports modern web browsers, ensuring a smooth editing experience for all users. I have only tested it on v7 till now. Create an issue if it has or has not worked for your version.
Supercode is compatible with the latest versions of TinyMCE and supports modern web browsers, ensuring a smooth editing experience for all users. I have only tested it on v7 till now. Create an issue if it has or has not worked for your version.

## Contributing

If you'd like to contribute to the development of SuperCode, please feel free to fork this repository and submit a pull request. We welcome any contributions or feedback to help improve the plugin.
If you'd like to contribute to the development of Supercode, please feel free to fork this repository and submit a pull request. We welcome any contributions or feedback to help improve the plugin.

## Support

For any questions, issues, or support requests related to SuperCode, please [contact us](mailto:hi@prathamvaidya.in). I'll be happy to help!
For any questions, issues, or support requests related to Supercode, please [contact us](mailto:hi@prathamvaidya.in). I'll be happy to help!

---
**SuperCode** - Enhanced Source Code Editor for TinyMCE
**Supercode** - Enhanced Source Code Editor for TinyMCE

0 comments on commit ee52c83

Please sign in to comment.