لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
Draft.js: فریم ورک ساخت Text Editor برای React

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" />