Draft.js: فریم ورک ساخت Text Editor برای React

React Native: فریم ورکی متن باز از فیسبوک برای طراحی اپلیکیشن با کلیات فریم ورک React فیسبوک است که این فریم ورک این امکان را در اختیار توسعه دهندگان قرار می‌دهد تا از فریم ورک جاوا اسکریپت آن تحت عنوان React.js برای توسعه اپلیکیشن های موبایل استفاده کنند. حال این مقاله قصد داریم تا با فریم ورک Draft.js آشنا شویم که برای ساخت Text Editor های حرفه یی در فریم ورک React مورد استفاده قرار می گیرد. با سکان آکادمی همراه باشید.

توسعه دهندگان با استفاده از Draft.js خواهند توانست تا هر نوع ادیتور متنی به پروژه های خود بیفزایند؛ از ادیتورهای خیلی ساده برای ویرایش چند سطر گرفته تا ادیتورهای حرفه برای انتشار مقالات طولانی با ساختارهای پیچیده.

در Draft.js هر چیزی این قابلیت را دارا است تا شخصی سازی شود و توسعه‌دهنده این امکان را دارد تا روی تمامی بخش‌های این فریم ورک کنترل داشته باشد (در تصویر فوق، نمونه یی از یک ادیتور متن ساده که با این فریم ورک طراحی شده است را مشاهده می کنید.)

در حال حاضر، Draft.js از طریق npm در اختیار توسعه دهندگان قرار می گیرد -npm که مخفف واژگان Node Package Manager است، پکیج منجر پیش فرض برای Node.js است- که پس از نصب آن، از طریق دستور زیر می توانید فریم ورک Draft.js را دانلود نمایید:

npm install --save draft-js react react-dom

پس از نصب، کاربرد این فریم ورک به شکل زیر خواهد بود:

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() {
    const {editorState} = this.state;
    return ;
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

با توجه به این که Draft.js از یونیکد پشتیبانی می کند، می بایست متا تگ زیر را نیز در بخش head فایل اچ تی ام ال خود قرار دهید:

<meta charset="utf-8" />

0


بهزاد مرادی

از جمله علائقم می‌شه به نشر علم،‌ سرمایه‌گذاری روی نسل آینده، برنامه‌نویسی به خصوص زبان PHP و جامعهٔ اپن‌سورس و همچنین راه‌اندازی استارتاپ و کارآفرینی اشاره کرد و اعتقاد دارم که سکان آکادمی می‌تونه بستری باشه که از اون طریق به علائقم جامهٔ عمل بپوشونم!






از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)