@artibox/core
v0.1.11
Published
A responsive rich article editor and viewer built with React
Downloads
37
Readme
React-Artibox
React Rich Text Editor in Structured Data, easy render for RWD layout.
** IMPORTANT ** This repo is in development, please careful use in your production product.
Get Started
Initialize modules
// @flow
// index.jsx
import React from 'react';
import {
createConfigProvider,
Base64ImageHandler,
} from 'react-artibox';
import AricleEditor from './ArticleEditor.jsx';
const ArtiboxProvider = createConfigProvider({
imageHandler: new Base64ImageHandler(),
});
function App() {
return (
<ArtiboxProvider>
<ArticleEditor />
</ArtiboxProvider>
);
}
export default App;
Implement Editor on your site
// ArticleEditor.jsx
import React, { Component } from 'react';
import Editor from 'react-artibox/editor';
const styles = {
color: '#4a4a4a',
fontSize: 24,
};
class ArticleEditor extends Component {
submit(data) {
// Upload to API Server
// data structure
//{
// title: 'I am title',
// blocks: [{
// type: 'ARTIBOX/TEXT',
// content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
// }, {
// type: 'ARTIBOX/IMAGE',
// link: '90ab0747709b3cc10f37dfd6b92b1adaf4ea0b36.jpg'
// }],
//}
}
render() {
return (
<h1 style={styles.title}>Article Editor</h1>
<Editor onSubmit={data => this.submit(data)} />
);
}
}
export default ArticleEditor;
Display on Viewer
// ArticleViewer.jsx
import React, { Component } from 'react';
import Viewer from 'react-artibox/viewer';
class ArticleViewer extends Component {
state = {
data: null,
}
componentDidMount() {
fetch('https://DATA_HOST/articles/2')
.then(res => res.json())
.then((data) => {
this.setState({
data,
});
});
}
render() {
return <Viewer data={this.state.data} />;
}
}