リッチエディタの​ 書式付き貼り付け

fukuoka.ts #2の資料です。

Transcript

1. リッチエディタの 書式付き貼り付け By irico
2. 発表者: irico のフロントエンドエンジニア 最近はリッチエディタの刷新をやっています 最近乗馬始めました
3. https://codepen.io/iricocco3/pen/RNbVYzx コピペ 書式付き貼り付けとは
4. どうやって実現しているのか？
5. https://zenn.dev/cybozu_frontend/articles/d2782f5ad615f0
6. https://evercoder.github.io/clipboard-inspector/
8. Contenteditable
9. <div contenteditable >... コピペ ?
10. 【ペースト結果】 <b>太字</b> <s>取り消し</s> <span style="color: red;">赤字</span> <i>イタリック</i> →いい感じに必要なスタイルのみを抽出している
11. 一般的なリッチエディターライブラリの 仕組み <strike /> <s/> このDOMはこのDOMに変換する、という対応付けで変換する。 <span style="font-weight: 800"/> <strong />
12. ※実際のコードを説明のために簡略化しています proseMirrorの実装コード https://github.com/ProseMirror/prosemirror-model/blob/master/src/from_dom.ts#L592 一般的なリッチエディターライブラリの 仕組み
13. pasteのイベントを監視する必要がある
14. pasteのイベントを監視
15. Excelを貼り付けてみる
16. https://codepen.io/iricocco3/pen/MYgogGy?editors=1010 Excelを貼り付けてみる
17. リッチエディタの 書式付き貼り付け THE END
18. リッチエディタの 書式付き貼り付け THE END…?
19. ここから裏ルート編 …ｺﾜｸﾅｲﾖ
20. Excelを貼り付けてみる
21. Excelを貼り付けてみる
22. Excelを貼り付けてみる リッチエディターの外に影響を与えてしまう！！！
23. https://codepen.io/iricocco3/pen/MYgogGy?editors=1010 Excelを貼り付けてみる
24. Contenteditableのデフォルトはいい感じにinline化される Excelを貼り付けてみる
25. Contenteditableの挙動のように、 スタイルの計算結果をinline化してみる
26. https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle Contenteditableの挙動のように、 スタイルの計算結果をinline化してみる
27. iframeにクリップボードのHTMLを追加 ↓ iframe.contentWindow経由でgetComputedStyleを使う ↓ 各DOMのstyleを計算し、inline化する Contenteditableの挙動のように、 スタイルの計算結果をinline化してみる https://codepen.io/iricocco3/pen/MYgmOWo
28. https://codepen.io/iricocco3/pen/MYgmOWo 思ってたのと違う！！ Contenteditableの挙動のように、 スタイルの計算結果をinline化してみる
29. 思ってたのと違う！！ getComputedStyleによってBodyに -webkit-text-fill-color: rgb(0, 0, 0)がつく 事が原因 Contenteditableの挙動のように、 スタイルの計算結果をinline化してみる https://codepen.io/iricocco3/pen/MYgmOWo
30. Contenteditableの挙動のように、スタイルの 計算結果をinline化してみる →子のcolor < 親の-webkit-text-fill-colorの優先度
31. https://codepen.io/iricocco3/pen/MYgmOWo 全てinline化するとテキスト量が増えすぎる。 RTEは何かしらで永続化するケースが多いは ず… クライアントのperfも微妙… Contenteditableの挙動のように、 スタイルの計算結果をinline化してみる
32. ・・・
33. 結論 ・Contenteditableの標準動作は割と高級な仕組み ・カスタマイズするとpasteイベントを使う必要があり、 高級な仕組みを利用できない。 ある程度のstyle落ちは許容する必要が出てくる ・Contenteditable相当の仕組みを再実装すれば できるかもしれないが…？
34. Safariさんはとっても優秀！ おまけ
35. ご清聴ありがとうございました！