TMdEditor is a javascript markdown editor designed to be used in webpages to render textarea for easy editing. The project started with the source code of SimpleMDE. A few improvements have been made so that I would like to share the source codes under a new name.
- Support CommonMark and Github-flavored Markdown(GFM).
- Fast real-time preview with markdown-it.
- Scroll sync between editor and preview with external loaded images.
- Styled with Bootstrap 4.
- Support TeX mathematic equations (using Katex library).
- Configurable toolbar and status bar.
- Callback support for image upload function.
- Editor text resize for accessibility.
- Additional packages for CodeMirror and Markdown-it can be loaded for feature extension.
- CodeMirror
- Markdown-it
- Markdown-it-source-map
- Markdown-it-footnote
- Markdown-it-highlightjs
- Markdown-it-texmath
- Markdown-it-container
- Markdown-it-multimd-table
- Markdown-it-attrs
- Markdown-it-mark
- katex
- Bootstrap 4
- Material Design for Bootstrap 4
- Font Awesome
- CodeMirror github theme from code-mirror-themes
new TMdEditor(document.getElementById("markdownTextEditor"), {}, "");
- toolbarLayout: Array of strings representing the layout of toolbar buttons.
The strings within the array should corresponds to the keys in
toolbarButtons
dictionary or|
to insert a separator. The default layout is
options.toolbarLayout = [
"fullscreen", "|", "undo", "redo", "|",
"bold", "italic", "strikethrough", "code", "quote", "unorderedList", "orderedList", "|",
"headingSmaller", "headingBigger", "cleanBlock", "link", "image", "table", "horizontalRule", "|",
"fontsizeBigger", "fontsizeSmaller", "|",
"preview", "sideBySide", "previewScrollLock", "|", "guide"
];
-
toolbarButtons: Array of toolbar buttons indexed by the name. Each button is described as an object with following keys:
- name: name of the toolbar button.
- action: name of the action when button is clicked.
- className: class name when the button is rendered. e.g.
fa fa-bold
for toggling selected text bold. - title: string to be rendered in tool-tip.
- toggle: if
true
, the button is rendered as a toggle button.
The default array of toolbar buttons can be found in class
TMdToolbar
in file_toolbar.js
. -
toolbarEnable: If
true
, the toolbar is rendered at the top of the editor area. Default totrue
. -
statusbarEnable: If
true
, the status bar is rendered at the bottom of the editor. Default totrue
. -
editorFunctions: Additional editor functions to be added. This option is an object indexed by the name of the editor function and the function itself as values. The function should take the TMdEditor object as parameter.