Skip to content

Latest commit

 

History

History
180 lines (133 loc) · 3.89 KB

props.md

File metadata and controls

180 lines (133 loc) · 3.89 KB

Props

value={string}
The markdown text to render.

<Markmirror value="# Header 1" />

defaultValue={string}
The inital markdown text to render. Changing this prop set new value to codemirror instance. This is helpful for editing multiple text

<Markmirror defaultValue="# Header 1" />

name={string}
Name given to the textarea.

<Markmirror name="content" />

theme={string}
The styling theme. See the theme docs for more information.

<Markmirror theme="light" />

i18n={object}
Translations for the strings displayed by the editor. See the internationalization docs for more information.

<Markmirror i18n={{
  h1Title:     'Header 1',
  h2Title:     'Header 2',
  h3Title:     'Header 3',
  boldTitle:   'Bold',
  italicTitle: 'Italic',
  ...
}} />

readOnly={boolean}
Set to true to make the editor read only.

<Markmirror readOnly={true} />

showSearch={boolean}
True to add find/replace buttons.

<Markmirror showSearch={true} />

tabSize={number}
Number of spaces that make up a tab.

<Markmirror tabSize={2} />

indentWithTabs={boolean}
True to use tabs, false to use spaces.

<Markmirror indentWithTabs={false} />

lineNumbers={boolean}
True to display line numbers.

<Markmirror lineNumbers={true} />

lineWrapping={boolean}
True to wrap long lines.

<Markmirror lineWrapping={false} />

styleActiveLine={boolean}
True to highlight the active line. The CSS class CodeMirror-activeline-background gets added to the active line.

<Markmirror styleActiveLine={false} />

acceptedFileTypes={array}
List of mime types for files which may be dropped/uploaded.

<Markmirror acceptedFileTypes={['image/jpg', 'image/gif', 'image/png', 'video/mpg']} />

The specific type may be excluded.

<Markmirror acceptedFileTypes={['image', 'video', 'application/pdf']} />

codemirrorOptions={object}
Options passed to the internal CodeMirror instance. See the CodeMirror API docs for the available options.

<Markmirror codemirrorOptions={{
  lineSeparator:  "\r\n",
  scrollbarStyle: null
}} />

codemirrorEvents={object}
Event handlers passed to the internal CodeMirror instance. See the CodeMirror API docs for available events.

<Markmirror codemirrorEvents={{
  change: function(codemirror) {
    console.log(codemirror.getValue());
  },
  focus: function() {
    console.log('Focused!');
  }
}} />

onChange={function}
Called when a change is made.

<Markmirror onChange={(value) => { console.log(value); }} />

onCursor={function}
Called when there is cursor activity.

<Markmirror onCursor={(cursor) => { console.log(cursor.token.end); }} />

onFiles={function}
Handles files which are dropped onto the editor. See the uploading docs for more information.

<Markmirror onFiles={Markmirror.handlerUpload('http://yoursite.com/upload')} />

onPrompt={function}
Handles prompting the client to input a link or image URL. See the prompt docs for more information.

<Markmirror onPrompt={Markmirror.handlerPrompt} />

onPreview={function}
Handles generating a preview of the markdown code. See the preview docs for more information.

<Markmirror onPreview={value => (Marked(value))} />

renderButton={function}
Renders each toolbar button. See the button customizing docs for more information.

<Markmirror renderButton={this.renderButton} />

renderToolbar={function}
Renders the toolbar. See the toolbar customizing docs for more information.

<Markmirror renderToolbar={this.renderToolbar} />