فریمورک ساخت Text Editor برای react


توی این نوشته قراره در مورد Draft.js ، فریمورک ساخت Text Editor برای react صحبت کنیم .
این فریمورک این امکان رو داره که با توجه به نیازتون هر نوع ادیتور متنی رو به پروژتون اضافه کنید ، چه ادیتور های حرفه ای و پیچیده و چه ادیتور ساده برای ویرایش چند خط ، هیچ تفاوتی نمی کنه .
Draft.js در کنفراس react.js در فوریه 2016 معرفی شد .
Draft.js از طریق npm در اختیارتون قرار میگیره ، npmهمون پکیج مدیریتی هست که در ویدئو های آموزشی ماژول ها وفتی node.js رو نصب می کنیم به همراه اون نصب می شد ، که بستگی به نصب react و react Dom داره . با توجه به دستور و دستور های زیر شروع به نصب این فریمورک میکنیم :
1 2 3 4 5 |
npm install --save draft-js react react-dom # or alternately yarn add draft-js react react-dom |
Draft.js از یک سری ویژکی های جدید جاوااسکریپت استفاده می کنه که برای IE11 در دسترس نیست ، سعی کنید یک shim یا polyfill روهم نصب کنید .
1 |
npm install --save draft-js react react-dom babel-polyfill# oryarn add draft-js react react-dom es6-shim |
اگه خواستید بیشتر در موردش بدونید به این لینک یه نگاهی بندازین .
خب استفاده و کاربرد Draft.js به صورت زیر هستش.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React from 'react'; import ReactDOM from 'react-dom'; import {Editor, EditorState} from 'draft-js'; class MyEditor extends React.Component { constructor(props) { super(props); this.state = {editorState: EditorState.createEmpty()}; this.onChange = (editorState) => this.setState({editorState}); } render() { return ( <Editor editorState={this.state.editorState} onChange={this.onChange} /> ); } } ReactDOM.render( <MyEditor />, document.getElementById('container') ); |
Draft.js از یونیکد پشتیبانی میکنه ، پس باید متا تگ پایین رو در تگ head فایل HTML خودتون قرار بدین ، بعد قرار دادن همه چی به درستی نمایش داده میشه .
1 |
<meta charset="utf-8" /> |
من توی وب گردی هام با Draft.js آشنا شدم اگه شماهم علاقه مند بودید ، به لینک هایی که در ادامه میزارم یه نگاهی بندازید .
دیدگاهتان را بنویسید