TUNGTUNG SUPER EDITOR
Install
Install tungtung-super-editor
yarn add tungtung-super-editor# or with npm # npm install --save tungtung-super-editor
2. Add style to ...
For Example rekit | create-react-app : update file public/index.html next.js : update file pages/_document.js
<!-- Import Editor-Style --><!-- Import Editor-Font --><!-- Import Editor-CodemirrorStyle --><!-- Import Editor-KaTeXStyle -->
The third step is add LatexPopover and ToolBarPopover to Root App
For Example rekit | create-react-app : update file src/index.js next.js : update file pages/_document.js
... <LatexPopover id='slate_latexPopover' className='fadeIn animated' /><ToolBarPopover id='slate_toolbarPopover' className='faster' />
Usage
1 . Require tungtung-super-editor after installation
2 . Include tungtung-super-editor component
... { return <Editor onChange=thishandleChange value=thispropsquestioncontent placeholder='Enter content ...' ... // For more, let's view Props Section /> }...
Props
value
Type | Required | Default Value | Description |
---|---|---|---|
Object | No | Initialize the initial value for the editor. |
const initValue = document: nodes: object: 'block' type: 'paragraph' nodes: object: 'text' leaves: text: '' ... { return <Editor value=initValue /> }
placeholder
Type | Required | Default Value | Description |
---|---|---|---|
String | No | Super Editor! |
... { return <Editor placeholder='Enter content ...' /> }...
onChange
Type | Required | Default Value | Description |
---|---|---|---|
Function | No |
Example
... this { return <Editor onChange=handleChange /> } ...
readOnly
Type | Required | Default Value | Description |
---|---|---|---|
Boolean | No | false | if true, user can only view content. If false, user can edit the content. |
... { return <Editor readOnly /> // User can only view content }...