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

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

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



فرنوش فهیم