TinyMDE

You can include TinyMDE directly in your website by using the hosted files from Unpkg. This requires both the JavaScript and the CSS files.

<script src="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"></script>
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.css"
/>

To self-host, download the latest release or build the project, then copy the tiny-mde.min.js and tiny-mde.min.css files from the dist directory to your local web directory. Include them in your HTML as follows:

<script src="tiny-mde.min.js"></script>
<link rel="stylesheet" type="text/css" href="tiny-mde.min.css" />

For bundled JavaScript applications using tools like Webpack or Rollup, install the tiny-markdown-editor package via npm.

Note on Styling: When using the NPM route, you must manually include the CSS. You can find the base CSS file at node_modules/tiny-markdown-editor/dist/tiny-mde.css.

npm install --save tiny-markdown-editor

To provide a toolbar for your editor, instantiate TinyMDE.CommandBar and pass the editor instance to the editor option. The element option specifies the container for the toolbar.

var tinyMDE1 = new TinyMDE.Editor({element: 'tinymde1'});
var commandBar1 = new TinyMDE.CommandBar({element: 'tinymde_commandbar1', editor: tinyMDE1});

To create a standalone editor, instantiate TinyMDE.Editor and provide an element option containing the ID of a container element. If you do not need a toolbar, you can simply initialize the editor without a command bar.

// Editor without a command bar
var tinyMDE2 = new TinyMDE.Editor({element: 'tinymde2'});

To build TinyMDE manually, clone the repository, install dependencies, and run the build script. This process generates the dist and lib directories containing the production assets and library files.

git clone git@github.com:jefago/tiny-markdown-editor.git
cd tiny-markdown-editor
npm install
# You may need to run npm install --force
npm run build

Because TinyMDE.Editor and TinyMDE.CommandBar register listeners on the document, you must call .destroy() when an editor is removed from the DOM (e.g., when a component unmounts in React or Vue) to prevent memory leaks.

Note: Editor and CommandBar are destroyed independently. You must call destroy on both if you are using a command bar.

// On component unmount
commandBar.destroy();
editor.destroy();

Create a new Editor instance by passing an EditorProps object to the constructor. You can specify the target element, a linked textarea, initial content, or a custom placeholder. If no element or editor is provided, the editor will be appended to the <body>.

import { Editor } from './TinyMDE';

const editor = new Editor({
  element: '#editor-container', // ID of the container
  textarea: '#my-textarea',    // ID of the linked textarea
  content: '# Hello World!',   // Initial markdown content
  placeholder: 'Type something...'
});

TinyMDE can act as a drop-in replacement for a <textarea>. When initialized with the textarea option, the editor mirrors the content of the textarea.

Important Details:

• The editor does not replace the textarea; instead, the textarea is hidden and its content is mirrored in the editor.
• If you change the textarea content programmatically, the editor may get out of sync.
• The editor is inserted into the DOM as a sibling of the textarea. To ensure proper sizing, apply styles to the parent container of the textarea.

<div class="txtcontainer">
  <textarea id="txt">This is some **Markdown** formatted text</textarea>
</div>
<script type="text/javascript">
  var tinyMDE = new TinyMDE.Editor({ textarea: "txt" });
</script>

To add a toolbar to your editor, create a separate container element for the toolbar and instantiate TinyMDE.CommandBar. The CommandBar requires an element (the toolbar container ID) and an editor instance.

<div id="toolbar"></div>
<div id="editor"></div>
<script type="text/javascript">
  var tinyMDE = new TinyMDE.Editor({ element: "editor" });
  var commandBar = new TinyMDE.CommandBar({
    element: "toolbar",
    editor: tinyMDE,
  });
</script>

To initialize a basic editor inside an HTML element (such as a div), instantiate TinyMDE.Editor and pass the element option containing the element's ID.

<div id="editor"></div>
<script type="text/javascript">
  var tinyMDE = new TinyMDE.Editor({ element: "editor" });
</script>