口コミ投稿のハイライト機能をDraft.jsから自前実装に置き換えました - LIVESENSE ENGINEER BLOG
転職会議事業部エンジニアの佐藤です。 転職会議の口コミ投稿にはガイドラインがあり、ガイドラインに違反する内容が含まれた口コミを投稿しようとすると、該当する内容がハイライト表示されます。 例えばこのような内容で投稿しようとすると、 ガイドラインに違反する文字列がハイライトされます。 このような内容が含まれた口コミは削除する運用のため、そもそも投稿不可にする仕様となっています。 そのため、なぜ口コミが投稿できないのかユーザーに視覚的に知らせる文字列のハイライトは必ず提供したい機能となっています。 このハイライト機能はこれまでDraft.jsを使って実現していましたが、自前実装に置き換えました。 本記事では、置き換えをした経緯と自前での実装の詳細をご紹介します。 Draft.jsの利用をやめた経緯 ユーザーから口コミ投稿ができないという問い合わせを受けていた Draft.jsがアーカイブになった
テックタッチのフロントエンドチームです。 今回はテックタッチの機能の表現の幅を広げるために WYSIWYG 機能を実装しました。 本記事では、Draft.js を用いて WYSIWYG 機能をどのように実装したか、どういう難しさがあったかなどを紹介します。 WYSIWYG とは Draft.js とは テックタッチについて WYSIWYG を使って実現したこと 表現力の向上 テックタッチ独自の UI の実現やテックタッチの機能との連携 実際に Draft.js を導入してみて WYSIWYG データの永続化対応 カスタムエレメント対応 画像の対応 サンプルコード ShadowDOM 問題への対応 今後の課題 テスト IME 対応 まとめ WYSIWYG とは WYSIWYG とは、簡単にいうと、 Markdown などの独自記法を用いて、、編集画面とは別画面で文書表現（UI）の設定をするの
幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変換する変換器を与
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Draft.jsを使ったWYSIWYGの実現 - Techtouch Developers Blog
React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
Draft.js と Slate.js と CodeMirror の感想