1.0.1 • Published 5 years ago
tungtung-super-editor v1.0.1
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 -->
<link
rel='stylesheet'
href='https://tungtung-space.sgp1.cdn.digitaloceanspaces.com/static/community/css/style.min.css'
/>
<!-- Import Editor-Font -->
<link
rel='stylesheet'
href='https://tungtung-space.sgp1.cdn.digitaloceanspaces.com/static/community/css/fonts.css'
/>
<!-- Import Editor-CodemirrorStyle -->
<link
key='codemirror'
rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/codemirror.min.css'
/>
<!-- Import Editor-KaTeXStyle -->
<link
rel='stylesheet'
href='https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css'
integrity='sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j'
crossOrigin='anonymous'
/>
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
import {
LatexPopover,
ToolBarPopover
} from 'tungtung-super-editor/dist/style'
...
<LatexPopover id='slate_latexPopover' className='fadeIn animated' />
<ToolBarPopover id='slate_toolbarPopover' className='faster' />
Usage
1 . Require tungtung-super-editor after installation
import Editor from 'tungtung-test-module'
2 . Include tungtung-super-editor component
...
render () {
return (
<Editor
onChange={this.handleChange}
value={this.props.question.content}
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: ''
}
]
}
]
}
]
}
}
...
render () {
return (
<Editor value={initValue} />
)
}
placeholder
Type | Required | Default Value | Description |
---|---|---|---|
String | No | Super Editor! |
...
render () {
return (
<Editor placeholder='Enter content ...' />
)
}
...
onChange
Type | Required | Default Value | Description |
---|---|---|---|
Function | No |
Example
...
handleChange = value => this.setState({ questionContent: value })
render () {
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. |
...
render () {
return (
<Editor readOnly /> // User can only view content
)
}
...