Krajee

Markdown Editor Demo

Thankful to Krajee! BUY A COFFEEor to get more out of us.

A Boostrap styled markdown editor that converts a native HTML textarea to an advanced markdown editor. The editor offers live preview, export, full screen mode, and more features. The editor includes inbuilt support for markdown parsing using markdown-it JS based parser. However, the editor can support any markdown parser via javascript library / method or even a server based parser via an ajax action. Other markdown parsers are configurable (both as a server call OR a local JS method/library). In addition, the plugin allows custom button actions and properties to be setup.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Click for Demo
Basic usage examples of the krajee-markdown-editor plugin.
Click for Demo
Advanced usage examples of the krajee-markdown-editor plugin.
Click for Demo

The krajee-markdown-editor plugin supports rendering of multiple language widgets on the same page. To do this, follow these simple steps:

  • Load all the respective locale JS files for the locale languages you need (e.g. js/locales/fr.js for French). These must be loaded after the markdown-editor.js.

  • Set the language property in the plugin to the language you need (e.g. 'fr').

Click for Demo

The krajee-markdown-editor plugin supports advanced theming and ability to have separate themes for multiple widgets on the same page. To do this, follow these simple steps:

  • Load respective theme JS file(s) that you need (e.g. themes/fa4/theme.js for Font Awesome 4.x theme). The theme file(s) must be loaded after the markdown-editor.js.

  • Set the theme property in the plugin to the theme you need and which you have setup in your theme configuration JS file above (e.g. 'fa4').

  • The plugin will automatically read the theme configuration for the theme name from $.fn.markdownEditorThemes['<theme-name>'] from the JS file (e.g. via $.fn.markdownEditorThemes['<theme-name>']).

  • The plugin will automatically also prepend the CSS selector theme-<theme-name> to the markdown editor container, so that you can override your styles. The CSS for such themes can be submitted by community in themes/THEME_NAME folder of the repo.

  • You can additionally load any theme specific CSS files if needed.

Note

Currently the plugin includes the Font Awesome 4.x and 5.x themes. More advanced themes may be added in future or can be contributed here by the community.

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

 
visitors to Krajee Jquery Plugins since 22-May-2017