React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
テックタッチのフロントエンドチームです。 今回はテックタッチの機能の表現の幅を広げるために WYSIWYG 機能を実装しました。 本記事では、Draft.js を用いて WYSIWYG 機能をどのように実装したか、どういう難しさがあったかなどを紹介します。 WYSIWYG とは Draft.js とは テックタッチについて WYSIWYG を使って実現したこと 表現力の向上 テックタッチ独自の UI の実現やテックタッチの機能との連携 実際に Draft.js を導入してみて WYSIWYG データの永続化対応 カスタムエレメント対応 画像の対応 サンプルコード ShadowDOM 問題への対応 今後の課題 テスト IME 対応 まとめ WYSIWYG とは WYSIWYG とは、簡単にいうと、 Markdown などの独自記法を用いて、、編集画面とは別画面で文書表現（UI）の設定をするの
口コミ投稿のハイライト機能をDraft.jsから自前実装に置き換えました - LIVESENSE ENGINEER BLOG
転職会議事業部エンジニアの佐藤です。 転職会議の口コミ投稿にはガイドラインがあり、ガイドラインに違反する内容が含まれた口コミを投稿しようとすると、該当する内容がハイライト表示されます。 例えばこのような内容で投稿しようとすると、 ガイドラインに違反する文字列がハイライトされます。 このような内容が含まれた口コミは削除する運用のため、そもそも投稿不可にする仕様となっています。 そのため、なぜ口コミが投稿できないのかユーザーに視覚的に知らせる文字列のハイライトは必ず提供したい機能となっています。 このハイライト機能はこれまでDraft.jsを使って実現していましたが、自前実装に置き換えました。 本記事では、置き換えをした経緯と自前での実装の詳細をご紹介します。 Draft.jsの利用をやめた経緯 ユーザーから口コミ投稿ができないという問い合わせを受けていた Draft.jsがアーカイブになった
幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変換する変換器を与
Reactで構築するアプリケーションにEditor機能を追加したいという時に利用できるライブラリの一つにDraft.jsがあります。Draft.jsはReactのためのRich Text Editor Framweworkでプラグインも公開されているので機能追加も簡単に行うことができます。実際のサービスに利用されていることからもReactでEditor機能を組み込みたいと考えている時に知っておいて損はないライブラリの一つです。本文書ではDraft.jsを使いこなす上で必要となる文字の書式設定、リンクの設定、画像の追加などシンプルなコードを利用して動作確認を行なっていきます。 Reactで利用できるRichText EditorにはSlate, lexicalやTiptapなどがあります。 本文書ではReactのバージョンは18.3.1、draft-jsのバージョンは0.11.7を利用して動
Update overall project status in README by thegreatercurve · Pull Request #3136 · facebookarchive/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
draft-js で文字色を変更する
draft-jsは、JavaScirptでリッチテキストエディタの実装をする非常にカスタマイズ性の高いフレームワークである。しかしながら、日本語の情報が少ないため、ちょっとした事でも調べるのに時間がかかることがある。 今回は、私自身もつまずいた、draft-jsで文字色を変更する方法を紹介します。 スポンサーリンク customStyleMap（カスタムスタイルマップ） 太字、斜体、下線などの文字装飾は、draft-jsで既定のインラインスタイル名が定義されているため、BOLD、ITALIC、UNDERLINEのような名称を指定すれば、スタイルが適用できる。 const newEditorState = RichUtils.toggleInlineStyle(editorState, 'BOLD') setEditorState(newEditorState) ただ、今回やりたい文字色の変
react-dom.development.js?ac89:67 Warning: Prop `data-offset-key` did not match. Server: "dhdnd-0-0" Client: "5pfru-0-0"
Draft.js ブロック単位で削除する
選択範囲として取得できる情報は Start/End と Anchor/Focus の２種類がある。ユーザーが文末から文頭にかけて後方選択をした場合、Start/Endの場合は文頭が選択開始位置になるが、Anchor/Focusの場合は文末が選択開始位置になる。つまりStart/Endは結果としての選択範囲を見るが、Anchor/Focusはユーザー操作（ドラッグ開始地点がどこか）から見ている。なので、ユーザーが文頭から文末にかけて前方選択をした場合は、どちらも同じ情報になる。
Draft.jsでのWYSIWYGエディタ作成
はじめに Draft.jsはFacebook謹製のリッチテキストエディタを作るためのフレームワークです。 詳しい説明はこの記事が丁寧に書いて下さっているので割愛します。 https://qiita.com/YudaiTsukamoto/items/264f333e90a1edb818a3#はじめに 今回の記事は太字や下線などの文字装飾、文字サイズの変更、画像、リンクの挿入、文字揃えの機能を導入する方法のまとめになります。 デモ 全体 装飾などがない雛形としては以下のコードになります。 EditorState.createEmpty()で空白のeditorStateを作成し、それをuseStateで管理しています。 import * as React from 'react'; import './style.css'; import { Editor, EditorState, } fro
概要 Reactの復習ついでに、Draft.jsを使っていたら躓いたのでメモ。 Draft.js自体はReactで作られたリッチエディタフレームワークです。(https://github.com/facebook/draft-js) やりたいこと エディタで編集した内容をファイルに保存すること ファイルに保存したデータからエディタの状態を復元すること Editor自体の実装は以下のようにしておきます。 Electronを使って実装をしていたので、fsでファイルの保存・読み込みを行います。 import React, {Component} from 'react'; import {Editor, EditorState, RichUtils} from 'draft-js'; const editorStyle = { height: "300px", width: "300px", b
『React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集 - to-R Media』へのコメント
ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
Draft.jsのデータ構造 - Qiita
export type RawDraftContentBlock = { key: ?string; type: DraftBlockType; text: string; depth: ?number; inlineStyleRanges: ?Array<InlineStyleRange>; entityRanges: ?Array<EntityRange>; data?: Object; }; key blockのidentifier type Blockの種類 デフォルトで用意されているtype unstyled paragraph header-one, header-two, header-three, header-four, header-five, header-six unordered-list-item ordered-list-item blockquote cod
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Draft.jsを使ったWYSIWYGの実現 - Techtouch Developers Blog
Draft.js と Slate.js と CodeMirror の感想
ReactリッチテキストエディタDraft.jsを基礎から理解する | アールエフェクト
Next.js で Draft.js を使うときに起きる data-offset-key のミスマッチエラー
Draft.jsのデータ保存について - Qiita