PHPackages kartik-v/krajee-markdown-editor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Parsing & Serialization](/categories/parsing) 4. / 5. kartik-v/krajee-markdown-editor ActiveLibrary[Parsing & Serialization](/categories/parsing) kartik-v/krajee-markdown-editor =============================== A Boostrap styled markdown editor that offers configurable toolbar, live preview, export, fullscreen mode, and more features. v1.0.0(4y ago)431.2k16[1 issues](https://github.com/kartik-v/krajee-markdown-editor/issues)BSD-3-ClauseJavaScript Since Sep 14Pushed 3y ago3 watchersCompare [ Source](https://github.com/kartik-v/krajee-markdown-editor)[ Packagist](https://packagist.org/packages/kartik-v/krajee-markdown-editor)[ Docs](https://github.com/kartik-v/krajee-markdown-editor)[ RSS](/packages/kartik-v-krajee-markdown-editor/feed)WikiDiscussions master Synced today READMEChangelog (1)DependenciesVersions (2)Used By (0) [ ![Krajee Logo](https://camo.githubusercontent.com/4addfbb3869c3fc7d79befea4f06d9cf3655a686fb503df0da1d725859cfdef9/687474703a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f6b72616a65652d6c6f676f2d622e706e67) ](http://plugins.krajee.com "Krajee Plugins") krajee-markdown-editor --- [![Donate](https://camo.githubusercontent.com/0336bc43d88554a3f2d6c74dddf312bc2c65c2eacca70d83ae40f5567098d00e/68747470733a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f646f6e6174652e706e67)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU "Donate via Paypal") [![kartikv](https://camo.githubusercontent.com/0cf29a542375e1a46e84d8bf5805a4e5c0a6ee98b6547ccdc0c55eed49d99c69/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f76322f64656661756c742d79656c6c6f772e706e67)](https://www.buymeacoffee.com/kartikv "Buy me a coffee") ============================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================= [](#------------------------krajee-markdown-editor------------------) [![Bower version](https://camo.githubusercontent.com/fb2eedc8ad91e6dbbb059373a30abc7f317407fb18fed88247f7438255afe178/68747470733a2f2f62616467652e667572792e696f2f626f2f6b72616a65652d6d61726b646f776e2d656469746f722e737667)](http://badge.fury.io/bo/krajee-markdown-editor)[![Latest Stable Version](https://camo.githubusercontent.com/c7657ccc5a2c17c94dc1b22d2636bd988cb15e9d7ff44a76c3fc057af76e6cc5/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f6b72616a65652d6d61726b646f776e2d656469746f722f762f737461626c65)](https://packagist.org/packages/kartik-v/krajee-markdown-editor)[![License](https://camo.githubusercontent.com/e1f2dd6d33d2a4fb047104a780cfddfd23ecdcaf98ea29e2d50dd10652f49cee/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f6b72616a65652d6d61726b646f776e2d656469746f722f6c6963656e7365)](https://packagist.org/packages/kartik-v/krajee-markdown-editor)[![Packagist Downloads](https://camo.githubusercontent.com/fb9e0e3ce07ef0b17c823ea9263f44a2ca900324a99313f0476fef419a12cb93/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f6b72616a65652d6d61726b646f776e2d656469746f722f646f776e6c6f616473)](https://packagist.org/packages/kartik-v/krajee-markdown-editor)[![Monthly Downloads](https://camo.githubusercontent.com/49cef51418e6f616c04cf180a4a82e54638b10920d3d001db17d300fb4b7e35f/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f6b72616a65652d6d61726b646f776e2d656469746f722f642f6d6f6e74686c79)](https://packagist.org/packages/kartik-v/krajee-markdown-editor) A Bootstrap 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](https://markdown-it.github.io/). 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. Features -------- [](#features) - Inbuilt support for advanced markdown syntax editing and formatting via the [markdown-it JS based parser](https://markdown-it.github.io/). The key features of the `markdown-it` parser are: - It follows the **[CommonMark spec](http://spec.commonmark.org/)** and adds syntax extensions & sugar (URL autolinking, typographer). - Configurable syntax! You can add new rules and even replace existing ones. - High speed. - [Safe](https://github.com/markdown-it/markdown-it/tree/master/docs/security.md) by default. - Community-written **[plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin)** and [other packages](https://www.npmjs.org/browse/keyword/markdown-it) on npm. - In addition to supporting all common markdown syntax formats, this also includes support for various `markdown-it` plugins like emojis, smart arrows, checkboxes, subscript, superscript, definition list, footnote, abbreviation, marked / inserted text etc. - Advanced additional support for emojis and emoticons to be inserted. The editor also supports using rendering emojis using [twitter emojis {twemoji}](https://github.com/twitter/twemoji). - The editor can be configured to use any markdown based parser OR even use a server based parsing via AJAX action. - Inbuilt live preview and conversion of the markdown text to HTML formatted text. The editor can be toggled and configured to be set in one of the three modes: - *Editor Mode:* Displays only the editor for editing the markdown text. - *Preview Mode:* Displays only the preview for viewing the HTML formatted text. - *Split Mode:* Shows both the editor and preview modes split side by side. - One can configure the editor to by default to open in one of the above modes. - Offers live preview and **synchronized scrolling** between editor and preview when typing text OR scrolling in the editor. This is especially useful in the Split Mode. - The editor also includes inbuilt support for FULL SCREEN mode toggling and editing. One can toggle the editor to FULL screen for any of the above modes. - One can also configure the editor to by default open in full screen mode if needed. - Highly extensible and easily configurable toolbar buttons and actions. Supports 4 different toolbar button locations (Header Left, Header Right, Footer Left, and Footer Right). - Inbuilt support for unlimited undo and redo of editing actions via an inbuilt UndoStack library. - Intelligently senses a FORM RESET (if the input is enveloped in a form) and resets the editor to original state on form reset including the undo / redo stack. - Toolbar buttons use [FontAwesome icons](http://fortawesome.github.io/Font-Awesome/) by default and require the FontAwesome CSS to be loaded. But one can configure the editor to use any icons or CSS styling. - Offers THEME support for easily styling the editor for one's own theme. - Advanced styling and configuration available via templates and setting various CSS and layout properties. - Inbuilt EXPORT feature to allow exporting the editor content as - TEXT - HTML - The editor allows inbuilt support for exported content to be directly downloaded via [Data URIs that is supported by most modern browsers](caniuse.com/datauri). - The export download can also be configured to use a server based URL action to download content. - Offers inbuilt localization and translation support and allows using multiple language markdown editors on the same page. Demo ---- [](#demo) View the [plugin documentation](http://plugins.krajee.com/markdown-editor) and [plugin demos](http://plugins.krajee.com/markdown-editor/demo) at Krajee JQuery plugins. Pre-requisites -------------- [](#pre-requisites) 1. [Bootstrap (5.x or 4.x or 3.x)](http://getbootstrap.com/) 2. [Font Awesome Icons 5.x Free](https://fontawesome.com/icons?d=gallery&m=free) or other icons via your own themes (repo includes FA4 theme for Font Awesome 4.x icons). 3. Latest [JQuery](http://jquery.com/) 4. Most modern browsers supporting HTML5, CSS3 & JQuery. 5. If using the default export feature (without ajax), the [browser must support data uri](http://caniuse.com/#feat=datauri). 6. If using the default parser feature (without ajax), the [markdown-it javascript parser](https://markdown-it.github.io/) is required. This library is available in the `plugins` directory of the repo. 7. If using the default code highlighting feature via markdown-it parser, the [highlight.js library](https://highlightjs.org/) is required. This library is available in the `plugins` directory of the repo. 8. Note most formatting buttons have been configured for the markdown-it parser. For rendering the **emojis**, your Markdown parser must support smileys generation. 9. For rendering emojis using [twitter emojis {twemoji}](https://github.com/twitter/twemoji), you need to load the twitter emojis CSS. Note that twitter [twemoji graphics](https://github.com/twitter/twemoji) are licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/). Installation ------------ [](#installation) ### Using Bower [](#using-bower) You can use the `bower` package manager to install. Run: ``` bower install krajee-markdown-editor ``` ### Using Composer [](#using-composer) You can use the `composer` package manager to install. Either run: ``` $ php composer.phar require kartik-v/krajee-markdown-editor "@dev" ``` or add: ``` "kartik-v/krajee-markdown-editor": "@dev" ``` to your composer.json file ### Manual Install [](#manual-install) You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/krajee-markdown-editor/zipball/master) or [TAR ball](https://github.com/kartik-v/krajee-markdown-editor/tarball/master) and extract the plugin assets (css and js folders) into your project. Usage ----- [](#usage) Step 1: Load the following assets in your header. Please read the accompanying comments to understand optional components. ```