zhique-editor
zhique-editor : The open source online code editor (component), based on react & react-markdown & codemirror.
Features
- Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown)
- Real-time Preview, Code fold, Code syntax highlighting...
- Synchronized scrolling
- powerful toolbar for markdown editor
- image viewer
Installing
- npm
npm install @zhique-design/zhique-editor
- yarn
yarn add @zhique-design/zhique-editor
MarkdownEditor
- Basic usage
import React from 'react';
import ReactDom from 'react-dom';
import ZhiQueEditor from '@zhique-design/zhique-editor';
ReactDom.render(<ZhiQueEditor />, document.getElementById('app'));
- props
prop | description | type | default |
---|---|---|---|
classPrefix |
component class prefix | string | zhique-markdown |
type |
component type(markdown-editor or markdown) | string | markdown-editor |
width |
component width | string or number | 90% |
height |
component height | string or number | 500 |
watch |
Real-time Preview | bool | true |
fullScreen |
fullScreen mode | bool | false |
dateFormat |
date format | string | YYYY年MM月DD日 dddd |
value |
component value | string | '' |
options |
the options of codeMirror | object | - |
onImageSelect |
the image has been selected to upload | function(e, field) | - |
onChange |
the component value has been changed | function(value) | - |
- options
{
mode: 'gfm',
theme: 'default',
lineWrapping: true,
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true,
autofocus: true,
autoCloseBrackets: true,
matchTags: true,
autoCloseTags: true,
styleActiveLine: true,
styleSelectedText: true
}
click codemirror configuration for more info.