Draft.js: فریمورکی اپن‌سورس برای ساخت ادیتور با استفاده از ری اکت

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

راهنمای دانلود Draft.js
Draft.js از طریق NPM (پکیج مَنجر پیش‌فرض نودجی‌اس) در اختیار دولوپرها قرار می‌گیرد که پس از نصب آن، از طریق دستور زیر می‌توانید فریمورک 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 از یونیکد پشتیبانی می‌کند، باید متاتگ زیر را نیز در بخش هِد فایل وب‌پیج خود قرار دهید:

<meta charset="utf-8" />

که در این صورت تمامی حروف و علائم، من‌جمله حروف فارسی، به درستی درست نمایش داده خواهند شد.

در پایان این نکته را هم یادآور شویم که طراحی این ادیتور به گونه‌ای است که با تغییر زبان کیبورد از انگلیسی به فارسی، جهت نوشتار متن در داخل ادیتور به صورت خودکار «از راست به چپ» خواهد شد.