zhique-editor v1.3.4

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

Installing

• npm

npm install zhique-editor codemirror@^5.65.9 github-markdown-css

• yarn

yarn add zhique-editor codemirror@^5.65.9 github-markdown-css

MarkdownEditor

1. Basic usage

   import React from 'react';
   import ReactDom from 'react-dom';
   import { MarkdownEditor } from 'zhique-editor';
   import 'codemirror/lib/codemirror';
   import 'codemirror/lib/codemirror.css';
   import 'codemirror/mode/gfm/gfm';
   import 'github-markdown-css/github-markdown.css';
   ReactDom.render(<MarkdownEditor />, document.getElementById('app'));

2. props

   prop	description	type	default
   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
   value	component value	string	''
   options	the options of codeMirror	object	-
   onChange	the component value has been changed	function(value)	-

3. 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.