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

توی این نوشته قراره در مورد Draft.js ، فریمورک ساخت Text Editor برای react صحبت کنیم .

این فریمورک این امکان رو داره که با توجه به نیازتون هر نوع ادیتور متنی رو به پروژتون اضافه کنید ، چه ادیتور های حرفه ای و پیچیده و چه ادیتور ساده برای ویرایش چند خط ، هیچ تفاوتی نمی کنه .

Draft.js در کنفراس react.js در فوریه 2016 معرفی شد .

Draft.js از طریق npm در اختیارتون قرار میگیره ، npmهمون پکیج مدیریتی هست که در ویدئو های آموزشی ماژول ها وفتی node.js رو نصب می کنیم به همراه اون نصب می شد ، که بستگی به نصب react و react Dom داره . با توجه به دستور و دستور های زیر شروع به نصب این فریمورک میکنیم :

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

# or alternately

yarn add draft-js react react-dom

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

# or alternately

yarn add draft-js react react-dom

Draft.js از یک سری ویژکی های جدید جاوااسکریپت استفاده می کنه که برای IE11 در دسترس نیست ، سعی کنید یک shim یا polyfill روهم نصب کنید .

npm install --save draft-js react react-dom babel-polyfill# oryarn add draft-js react react-dom es6-shim

1	npm install --save draft-js react react-dom babel-polyfill# oryarn add draft-js react react-dom es6-shim

اگه خواستید بیشتر در موردش بدونید به این لینک یه نگاهی بندازین .

خب استفاده و کاربرد Draft.js به صورت زیر هستش.

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} />
    );
  }
}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/google-hummingbird/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/Untitled-1-300x162.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">الگوریتم مرغ مگس خوار</div></div></div><div class="ctaButton"></div></div></a></div>
ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

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 (

);

}

ReactDOM.render(

<MyEditor />,

document.getElementById('container')

);

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

<meta charset="utf-8" />

1	<meta charset="utf-8" />

من توی وب گردی هام با Draft.js آشنا شدم اگه شماهم علاقه مند بودید ، به لینک هایی که در ادامه میزارم یه نگاهی بندازید .

لینک

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

8 پلاگین کاربردی فیگما

تفاوت زبان های برنامه نویسی و اسکریپت نویسی

آغاز فصلی نو در reactapp | روایتی جدید در کنار شما

تفاوت طراح رابط کاربری و برنامه نویس فرانت اند

ویژگی ها و قابلیت های جدید react 18

تحلیل SWOT چیست ؟ و چگونه به رشد کسب و کار ما کمک میکند ؟

دیدگاهتان را بنویسید لغو پاسخ