@artibox/core

    0.1.11 • Public • Published

    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} />;
      }
    }

    Install

    npm i @artibox/core

    DownloadsWeekly Downloads

    15

    Version

    0.1.11

    License

    MIT

    Unpacked Size

    132 kB

    Total Files

    36

    Last publish

    Collaborators

    • jay0328
    • fantasywind