1.0.39 • Published 2 years ago
c-react-editor v1.0.39
Warning!
The library still under development.
Intro
A block-styled editor for reactJs, friendly for mobile.
Getting started
import cEditor, { h1, h2, p, list } from 'c-react-editor'
const Editor = cEditor({
blocks: [
h1,
h2,
p,
list
]
})
const page = () => {
const [data, setData] = useState()
return (
<Editor data={data} setData={setData} />
)
}
Custom block
import cEditor, { h1, h2, p, list, ToolBar } from 'c-react-editor'
const h3Component = ({ controller, focusing, i, data }) => {
const onFocus = focusing === i
const change = e => {
controller.change(data, i, {
type: data[i].type,
data: e.target.value,
})
}
if (!onFocus) {
return (<div className='view'>{data[i].data || '(Empty)'}</div>)
}
return (
<div>
<textarea autoFocus value={data[i].data || ''} onChange={change} onKeyDown={keydown} />
<Toolbar controller={controller} focusing={focusing} i={i} data={data} />
</div>
)
}
const customBlock = {
type: 'h3',
component: h3Component,
exchange: data => {
if (data && typeof data !== 'string') {
if (Array.isArray(data)) {
data = data.join(',')
} else {
return { type: 'INSERT' }
}
}
return { type: 'EDIT', data }
},
icon: (<span>Sub title</span>)
}
const Editor = cEditor({
blocks: [
h1,
h2,
customBlock,
p,
list
]
})
....
1.0.19
2 years ago
1.0.39
2 years ago
1.0.38
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.33
2 years ago
1.0.32
2 years ago
1.0.31
2 years ago
1.0.30
2 years ago
1.0.37
2 years ago
1.0.36
2 years ago
1.0.35
2 years ago
1.0.34
2 years ago
1.0.2
3 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.1
3 years ago
1.0.0
3 years ago