2017-02-05 9 views
1

Как сохранить данные из проекта-js в Метеор?Как сохранить черновик-js editorState data to Meteor?

Я пытаюсь ...

  • сохранить данные из проекта-Js в БД
  • Использование React + Meteor

Вот Draft.js. Вот Meteor starter kit. Есть также this article, что кажется актуальным.

Но я не могу применить биты информации к проекту.

Учитывая мои ~/импорт/коллекции/bins.js быть

import { Mongo } from 'meteor/mongo'; 

Meteor.methods({ 
    'bins.insert': function() { 
    return Bins.insert({ 
     createdAt: new Date(), 
     content: '', 
     sharedWith: [], 
     ownerId: this.userId 
    }); 
    }, 

    'bins.remove': function(bin) { 
    return Bins.remove(bin); 
    }, 

    'bins.update': function(bin, content) { 
    return Bins.update(bin._id, { $set: { content } }); 
    } 
}); 

export const Bins = new Mongo.Collection('bins'); 

И с учетом руководящих принципов, найденных в A Beginner’s Guide to Draft JS быть

import React from ‘react’; 
import {Editor, EditorState, RichUtils} from ‘draft-js’; 
export default class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {editorState: EditorState.createEmpty()}; 
    this.onChange = (editorState) => this.setState({editorState}); 
    } 
    _onBoldClick() { 
    this.onChange(RichUtils.toggleInlineStyle(
     this.state.editorState, 
     ‘BOLD’ 
    )); 
    } 
    render() { 
    return (
     <div id=”content”> 
     <h1>Draft.js Editor</h1> 
     <button onClick={this._onBoldClick.bind(this)}>Bold</button> 
     <div className=”editor”> 
      <Editor 
      editorState={this.state.editorState} 
      onChange={this.onChange} 
      /> 
     </div> 
     </div> 
    ); 
    } 
} 
+1

Кстати, я писал в блоге о том, как сохраняются проект данных расслоение плотной, надеюсь, что это помогает - https://reactrocket.com/post/draft-js-persisting-content/ – nimrod

+0

@ nimrod Спасибо, отличный пост. – Sbe88

ответ

2

Вы можете конвертировать editorState сырьевым JS для того, чтобы хранить его в БД:

import { 
    convertToRaw, 
} from 'draft-js'; 

export default class App extends React.Component { 
    // ... 
    saveToDb() { 
    const contentState = this.state.editorState.getCurrentContent(); 

    const rawContent = JSON.stringify(convertToRaw(contentState)); 

    Meteor.call(/* save rawContent to db */); 
    } 
    // ... 
} 

Затем конвертироватьназад editorState:

import { 
    convertFromRaw, 
    EditorState, 
} from 'draft-js'; 

const rawContent = /* get this value from db */; 

const contentState = convertFromRaw(JSON.parse(rawContent)); 

const editorState = EditorState.createWithContent(blocks); 
+0

Большое спасибо @Khang – Sbe88

 Смежные вопросы

  • Нет связанных вопросов^_^