π Moka.Editor.Md is a πͺ powerful Markdown editor designed for Blazor applications. It offers π¨ rich text editing capabilities and π seamless integration, providing a smooth and intuitive experience for users and developers alike.
- π Full Markdown editing capabilities.
- π Theming support with customizable styles.
- π Synchronous scrolling.
- πΎ Save HTML to Textarea functionality.
- π Preview mode.
- π Read-only mode.
- π Customizable toolbar.
- π Multilanguage support.
- π₯ Fullscreen editing mode.
Ensure you have the following installed:
- .NET 7.0+
- Node.js
- Yarn/Node package manager
- Install the necessary Node.js packages:
yarn
- Run the Gulp tasks to bundle and prepare your assets:
yarn build
- Build the library:
dotnet build
After installing the package and running Gulp tasks, simply reference the bundled files in your header tag in index HTML file. For CSS:
<link href="_content/Moka.Editor.Md/css/moka.bundle.min.css" rel="stylesheet" />
For JS:
<script src="_content/Moka.Editor.Md/js/moka.bundle.min.js" />
<EditorMdComponent Value="@markdownContent" ValueChanged="@OnContentChanged" />
@code {
private string markdownContent = "";
private void OnContentChanged(string newContent)
{
markdownContent = newContent;
}
}
- Value (string): The Markdown content to be displayed in the editor.
- ValueChanged (EventCallback): Event triggered when the content of the editor changes.
- Theme (string): Specifies the theme for the editor. Default is "default".
- OnChange: Triggered when the editor content changes.
<EditorMdComponent CustomStyle="height: 500px; border: 1px solid gray;" />
I use Gulp to automate the bundling and optimization of assets. Here's what each task does:
- scripts: Concatenates and minifies JavaScript files.
- styles: Concatenates and minifies CSS files and includes Font Awesome styles.
- fonts: Copies Font Awesome font files to the appropriate directory.
- copy-folder: Copies an entire folder with its content (if necessary).
- default: Runs all the above tasks in sequence. You can run a specific task with the following command:
yarn gulp <task-name>
For example, to only run the styles task:
yarn gulp styles
Contributions are welcome as this is an open-source project in such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
π«‘ Jacob William - [email protected]
- Upload to NuGet
- Add more tests
- Add more documentation
- Add more examples
- Add more features