Draft.js
Extensible and CustomizableWe provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media. Declarative Rich TextDraft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API. Immutable Editor StateThe Draft.js model is
Meguro.es #4 @wantedlyでのトーク内容です
Draft.js と Slate.js と CodeMirror の感想 - r7kamura - Medium
幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 Draft.js冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変
GitHub - facebookarchive/draft-js: A React framework for building text editors.
THIS PROJECT IS CURRENTLY IN MAINTENANCE MODE. It will not receive any feature updates, only critical security bug patches. On 31st December 2022 the repo will be fully archived. For users looking for an open source alternative, Meta have been working on migrating to a new framework, called Lexical. It's still experimental, and we're working on adding migration guides, but, we believe, it provides
目的と概要 Draft.jsはReact.js上でリッチテキストエディタを作るためのフレームワークです。日本であまり流行ってない気がするので、始めやすいように入門記事を書いてみることにしました。 最近ではReact.jsを採用しているサイトも増えてきて、Webフロントエンドは更にリッチ化の流れが激しくなっています。 今回はReact.jsでリッチなテキストエディタを簡単につくれるDraft.jsを利用して30分でテキストエディタを作っていきます。 この記事で作れるもの こんな感じのエディタ。すごいよくある感じのWYSIWYGエディタ。 手順 環境構築 React.js、Draft.jsの環境を作りましょう。 React.jsの環境を整えている方は bash npm install draft-js --save で大丈夫です。 環境構築が面倒な方にはテンプレート用意しておきました お納めく
Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。 Draft.jsの使い方 Draft.jsのデモです。文字を選択して色をつけられます。 背景色を変えることもできます。 改行すると、それに合わせてテキストエリアの大きさも変化します。 リンクを追加。 機能を追加すればWYSIWYGエディタとして使えます。 Twitter風に。@や#に対して色がつきます。 数式を埋め込む機能もあります。 編集はテキストエリアで行います。 Reactなので、変更はリアルタイムに反映されます。 Draf
Facebook謹製フレームワークDraft.js + React.jsでつくるリッチテキストエディタ | Wantedly Engineer Blog
Wantedlyでエンジニアをしている竹本です。主にこのブログを含むフィードを中心に開発をしています。 最近、フィードの記事編集画面のリニューアルを行ったので事例の簡単な紹介と、得られた知見を共有したいと思います。 先日のMeguro.es #4でDreaft.jsについて発表したスライドはこちらになります。あわせて参照して下さい。 リニューアル対象の記事編集画面のざっくり紹介Wantedlyのフィードの記事編集画面は以下の画像のような、いわゆるリッチテキストエディタです。 これは記事を書くユーザーのイメージと乖離した記事が公開されないように、ページ全体が「編集している見た目＝公開されるもの」になっています。 開発スタックは、弊社の高松が公開している「WantedlyにReact + Reduxを導入した話」で言及している通り、ES2015, Babel, React, Redux, Im
株式会社LITALICOでWebエンジニア（Rails）を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2017』1日目の記事です。 記念すべき1記事目は、Facebook謹製のリッチテキストエディタフレームワークのDraft.jsについて書こうと思います。 はじめに 弊社では、conobie, LITALICO(りたりこ)発達ナビ, U2Plusを始めとするメディアを中心としたWebサービスを複数運営しております。様々な歴史的な経緯で、記事編集画面をスクラッチで実装しているのですが、以下のような辛さを抱えています。 記事UIパーツの修正・追加をする事が結構しんどい 書いた見た目と表示される見た目が異なるので、いちいちプレビューを見ないといけない Undo/Redoなどの履歴管理が辛い コンテンツの順序を変更することが辛
5月ぐらいにdraft.jsを使って、Markdownエディタを作ってみた。普段技術ネタはBlogに書かないのだけど、まだあまり日本語情報も無いのでメモを公開してみる。 draft.jsはいまも活発に開発が進んでる状況なので、この数ヶ月で古くなってる部分があるかもしれません。 draft.jsとは何か facebookが作っているReact用のリッチテキストエディタ (WYSIWYG) のフレームワーク。 https://github.com/facebook/draft-js https://facebook.github.io/draft-js facebookのnote機能や、メッセンジャーのエディタに使われてるらしく、今年に入ってオープンソースになった。ってことでまだあまり情報が無いが、react本家のfacebookが作ってるのもあり、エコシステムができつつある (後述) 。 d
Facebookが開発している、WYSIWYGエディタのベースになるDraft.JSというソフトウェアがあります。Draft.JSを使うことで効率的に非開発者でも使いやすいエディタが開発できます。 今回はDraft.JSをベースとして、さらに拡張性を高めたMegadraftを紹介します。 Megadraftの使い方 デモです。リスト表示の例。 それぞれ編集、削除できます。 新しいリストの追加もできます。 画像や動画を埋め込んだりすることもできます。 Megadraftはユーザビリティ高く、プラグインによって拡張可能なライブラリとなっています。何でも作れると言うよりも、プラグインでテンプレートを作ることで、ユーザは特定のフォーマットに沿った入力を簡単にできるようになるというもののようです。 MegadraftはReact/JavaScript製のオープンソース・ソフトウェア（MIT Lice
テックタッチのフロントエンドチームです。 今回はテックタッチの機能の表現の幅を広げるために WYSIWYG 機能を実装しました。 本記事では、Draft.js を用いて WYSIWYG 機能をどのように実装したか、どういう難しさがあったかなどを紹介します。 WYSIWYG とは Draft.js とは テックタッチについて WYSIWYG を使って実現したこと 表現力の向上 テックタッチ独自の UI の実現やテックタッチの機能との連携 実際に Draft.js を導入してみて WYSIWYG データの永続化対応 カスタムエレメント対応 画像の対応 サンプルコード ShadowDOM 問題への対応 今後の課題 テスト IME 対応 まとめ WYSIWYG とは WYSIWYG とは、簡単にいうと、 Markdown などの独自記法を用いて、、編集画面とは別画面で文書表現（UI）の設定をするの
GitHub - nikgraf/awesome-draft-js: Awesome list of Draft.js resources
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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} /> ); }
Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles. Draft.js was introduced at React.js Conf in February 2016. Insta
Draft.jsはリッチテキストエディタ構築のためのフレームワークです。React.js向けに作られており、カスタマイズしやすくシンプルに作られているみたいです。この手のフレームワークはあまり見かけないので覚えておくといつか役に立つかも、と思ったので備忘録として。問題点もあるようなのでご利用の際はドキュメントをご確認下さい。ライセンスはBSD。 Draft.js
口コミ投稿のハイライト機能をDraft.jsから自前実装に置き換えました - LIVESENSE ENGINEER BLOG
転職会議事業部エンジニアの佐藤です。 転職会議の口コミ投稿にはガイドラインがあり、ガイドラインに違反する内容が含まれた口コミを投稿しようとすると、該当する内容がハイライト表示されます。 例えばこのような内容で投稿しようとすると、 ガイドラインに違反する文字列がハイライトされます。 このような内容が含まれた口コミは削除する運用のため、そもそも投稿不可にする仕様となっています。 そのため、なぜ口コミが投稿できないのかユーザーに視覚的に知らせる文字列のハイライトは必ず提供したい機能となっています。 このハイライト機能はこれまでDraft.jsを使って実現していましたが、自前実装に置き換えました。 本記事では、置き換えをした経緯と自前での実装の詳細をご紹介します。 Draft.jsの利用をやめた経緯 ユーザーから口コミ投稿ができないという問い合わせを受けていた Draft.jsがアーカイブになった
Facebook open sources rich text editor framework Draft.js
This week, 400 engineers from the React community came together for React.js Conf in San Francisco, a two-day conference dedicated to discussing React developer trends while addressing some common challenges to improve the experience for both the developer and the user. One of the event's highlights came from our very own product infrastructure team here at Facebook. We open-sourced Draft.js, a Re
Draft.js使っていますか？ こんにちは！ samayottaです。 Draft.jsは、WYSIWYG リッチエディタを作成するためのフレームワークです。 Facebook謹製で、Immutable.jsに基づく設計(関数型言語の思想に基づく設計)になっているのが特長です。有名どころでは、WantedlyのエディタページはDraft.jsによって書かれています。 Facebook謹製フレームワークDraft.js + React.jsでつくるリッチテキストエディタ もしあなたがReactを書いていて、エディタ コンポーネントを求めているなら、必ず候補にあがる選択肢の一つでしょう。 しかしながら、多くのjsライブラリでそうであるように、Draft.jsについて書かれた日本語資料は多くなく、また自由度の高さゆえに抽象的でとっつきにくいところがあります。 そこでこの記事では、Draft.j
GitHub - draft-js-plugins/draft-js-plugins: React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変換する変換器を与
GitHub - sstur/react-rte: Pure React rich text WYSIWYG editor based on draft-js.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
tl;dr strategy で 正規表現でヒットさせて、ヒットした部分を component で置き換える。正規表現と色の組み合わせは一般化できるので、そこまでやってみた。 最小コード @mizchi みたいにユーザー名に色を付ける import {CompositeDecorator} from "draft-js"; const USERNAME_REGEX = /\@[\w]+/g; export default new CompositeDecorator([ { strategy(contentBlock, callback) { const text = contentBlock.getText(); let matchArr, start; while ((matchArr = USERNAME_REGEX.exec(text)) !== null) { start = m
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
React.js, Draft.jsで作る リッチテキストエディタ開発入門
30分で出来るDraft.js+React.js リッチエディタ作成入門 - Qiita
Draft.js - テキストエディタ開発用のReactコンポーネント MOONGIFT
苦しんで覚えるDraft.js -リッチテキストエディタをシュッと作る- - Qiita
facebook製のReact用エディタフレームワーク draft.js を触ってみた - deglog
Megadraft - Draft.JSをベースにしたリッチテキストエディタ MOONGIFT
Draft.jsを使ったWYSIWYGの実現 - Techtouch Developers Blog
React製リッチテキストエディターDraft.jsを使ってみる - Qiita
Overview | Draft.js | Rich Text Editor Framework for React
React向けのリッチテキストエディタ用フレームワーク・「Draft.js」
Draft.js概説：クールなエディタをアプリに導入しよう - Qiita
Draft.jsによる 統制のとれたテキスト編集の世界 #jsfes
Draft.js と Slate.js と CodeMirror の感想
draft-jsでシンタックスハイライターを作る - Qiita