@zhique-design/zhique-editor

0.4.0 • Public • Published

zhique-editor

Build Status

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

  1. Basic usage
import React from 'react';
import ReactDom from 'react-dom';
import ZhiQueEditor from '@zhique-design/zhique-editor';
ReactDom.render(<ZhiQueEditor />, document.getElementById('app'));
  1. 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) -
  1. 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.

Dependencies (8)

Dev Dependencies (18)

Package Sidebar

Install

npm i @zhique-design/zhique-editor

Weekly Downloads

0

Version

0.4.0

License

Apache-2.0

Unpacked Size

92.1 kB

Total Files

4

Last publish

Collaborators

  • twtyjvkg