[フレーム]

サクサク読めて、
アプリ限定の機能も多数!

はてなブックマーク
テクノロジー
【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識

テクノロジーカテゴリーの変更を依頼記事元:zenn.dev/meijin

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

264users がブックマークコメント 26

ゲスト

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識

264 users zenn.dev/meijin

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント26件

注目コメント
新着コメント

nekoline

nekoline "海外製のちょっとアーリーなSaaSいじっていると、日本語の確定が変なことってよくあるじゃないですか。あれは大抵Contenteditable属性をTrueにしたDOMに対して、onCompositionEndをちゃんと実装せずに、onChangeとかonBlurとかだけ取

2024年08月13日リンク

その他

tamanecoplus

tamanecoplus エンジニア「マークアップで編集しろ!」vs非エンジニア「ウィジウィグで編集させろ!」のせめぎあい

2024年08月13日リンク

その他

ka-ka_xyz

ka-ka_xyz そいやTeamsのコメント入力欄が中華フォントになってるの、多分この辺のリッチテキストエディタコンポーネントを使ってるからでは(追記: teamsで使ってるのckeditorっぽい。

2024年08月13日リンク

その他

tohokuaiki

tohokuaiki この分野は避けて通りたい派。クライアントから言われたら「いやー、FacebookですらiPhoneのSafariからマトモに入力できないですから」とか言ってしのいでかわしたい。そして Confluenceのエディタは神

react

2024年08月13日リンク

その他

forestk

forestk "ブラウザ差異(FirefoxやSafariが特に)" という一文が気になった。それ以外って実質Chromeなので

2024年08月13日リンク

その他

ryokdy

ryokdy contenteditableでリッチエディタやーとなるんだけど、undo/redoやcopy/paste、仮想DOMと入力された実DOMとの同期など全部自力で作らないといけないので、contenteditableはもはやキャレットを取るくらいにしか使えない

2024年08月13日リンク

その他

takahashim

takahashim QuillとTiptapを触ったけど深入りは避けたい世界でした...Tiptapがよく出来てることは分かったけどちゃんと使いこなすには一定の知識と実装力が問われそうでした

2024年08月13日リンク

その他

bisque3311

bisque3311 めっちゃわかる"私がtiptapでこの問題に直面したときは、とにかく既存Extensionのコードを読みつつ公式Doc読みつつ実コード読みつつ高速で学習ループを回して、トライアンドエラーの数で押し通しました。"

2024年08月13日リンク

その他

gfx

gfx "リッチテキストエディタは普段使うライブラリより、群を抜いてコードリーディングや問題解決が難しい分、ライブラリ選定の際には、OSSとしての運営能力の高さをレビューした方が良いと思います"

2024年08月13日リンク

その他

yarumato

yarumato "HTML上で<input>でもないものを編集可能として扱うのはまあまあ罪深いことで、IMEで変換を確定した瞬間に変な挙動になることも"

2024年08月13日リンク

その他

kiririmode

kiririmode リッチテキストエディタ

react
html

2024年08月16日リンク

その他

t_f_m

t_f_m "DOMなりJSONなりを同時編集して、コンフリクトしないorしても軽症で済ませながら絶えずマージしていくアルゴリズムのほうがヤバい、という話"

2024年08月13日リンク

その他

renowan

renowan そう考えるとnotionってすごい

2024年08月13日リンク

その他

gfx

2024年08月13日リンク

その他

nizi56454

nizi56454 わかりやすい

2024年08月13日リンク

その他

tohokuaiki

react

2024年08月13日リンク

その他

for-my-internet-demo

for-my-internet-demo notion先生ですら頻繁にキャレットバグって大変だ

2024年08月13日リンク

その他

aktkro

aktkro remirror(proseMirror)派だけどwysiwygはどれを使っても辛い世界なんだよなぁ

2024年08月13日リンク

その他

ryokdy

2024年08月13日リンク

その他

igrep

igrep https://engineering.linecorp.com/ja/blog/uit-ridding-of-contenteditable とか参考になるべくcontenteditable使わずに済ませたいね

react
html

2024年08月13日リンク

その他

bisque3311

2024年08月13日リンク

その他

poliphilus

poliphilus contenteditable 属性なんぞ知らなんだ...まあ使うことはないな。つくづく Web は HTML でよかったのかどうか考える。ここまでビジュアル重視になるなんて思わないもんなぁ。

2024年08月13日リンク

その他

stealthinu

stealthinu リッチテキストエディタときどき必要になるけどその時ごとにまったく過去の知見が役に立たなくなってる

2024年08月13日リンク

その他

takahashim

2024年08月13日リンク

その他

ka-ka_xyz

2024年08月13日リンク

その他

UME

UME 結局、秀丸やサクラでいいですみたいになる話?

2024年08月13日リンク

その他

hachi

hachi Trixかすりもしない

2024年08月13日リンク

その他

mr_mayama

mr_mayama マイグレーション含めて「あなたの頭の中にあるエディターを再現する」というのはとてつもなく難しい作業だし、こういうトリッキーな実装は、動作は開発側で決めさせてほしいよなあ。XはDraft.jsだった。

2024年08月13日リンク

その他

forestk

forestk "ブラウザ差異(FirefoxやSafariが特に)" という一文が気になった。それ以外って実質Chromeなので

2024年08月13日リンク

その他

sigwyg

sigwyg やったことないけど、Gutenbergじゃダメなん?

2024年08月13日リンク

その他

sbrtnpg

sbrtnpg 読み物としても非常に面白かったです。

2024年08月13日リンク

その他

Eiichiro

Eiichiro ここまでくると良い有償ライブラリ提供してくれるところあるかもな。エクセル式入力はHandsontableが解決してくれたし、これも。

2024年08月13日リンク

その他

tamanecoplus

tamanecoplus エンジニア「マークアップで編集しろ!」vs非エンジニア「ウィジウィグで編集させろ!」のせめぎあい

2024年08月13日リンク

その他

nekoline

2024年08月13日リンク

その他

yarumato

yarumato "HTML上で<input>でもないものを編集可能として扱うのはまあまあ罪深いことで、IMEで変換を確定した瞬間に変な挙動になることも"

2024年08月13日リンク

その他

kvx

kvx plate触ったけどまぁつらい

2024年08月13日リンク

その他

ゲスト

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

[<a href="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fzenn.dev%2Fmeijin%2Farticles%2Frich-text-editor-basis-knowledge">フレーム</a>]

プレビュー

[フレーム]

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック!

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました!

さんが1番目にブックマークした記事「【React】リッチテ...」が注目されています。

気持ちをシェアしよう

ツイートする

【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識

概要 4年ほどProductionで使っていたリッチテキストエディタ(Quill on Nuxt.js v2)をTiptap on Next.j... 概要 4年ほどProductionで使っていたリッチテキストエディタ(Quill on Nuxt.js v2)をTiptap on Next.jsに移行しました。既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。対象読者の例リッチテキストエディタに興味があるリッチテキストエディタの開発

ブックマークしたユーザー

kochi152025年01月29日 kochi15
techtech05212024年09月21日 techtech0521
knj29182024年09月01日 knj2918
sotq172024年08月16日 sotq17
kiririmode2024年08月16日 kiririmode
Yotama2024年08月15日 Yotama
deejayroka2024年08月15日 deejayroka
tomiyanx2024年08月15日 tomiyanx
tadatakuho2024年08月14日 tadatakuho
hiroomi2024年08月14日 hiroomi
s1hit772024年08月14日 s1hit77
kyaido2024年08月14日 kyaido
dev0000_12024年08月14日 dev0000_1
klim08242024年08月14日 klim0824
aravow2024年08月14日 aravow
silossowski2024年08月14日 silossowski
masayuki-as2024年08月14日 masayuki-as
funayoi2024年08月14日 funayoi

気に入った記事をブックマーク

エントリーの編集

タイトルガイドライン

ブックマークしました

おすすめタグタグについて

よく使うタグすべて表示

【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識

おすすめタグタグについて

よく使うタグすべて表示

はてなブックマークで関心をシェアしよう

記事へのコメント26件

リンクを埋め込む

プレビュー

関連記事

usersに達しました!

【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識

ブックマークしたユーザー

ブックマークしたすべてのユーザー

同時期にブックマークされた記事

公式Twitter

はてなのサービス

よく使うタグ

よく使うタグ

はてなブックマークで
関心をシェアしよう