Reactベースで動作するWYSIWYGエディタ
始めに Next(React)、TypeScript、Material UI環境で扱えるWYSIWYGエディタを調査し、実際に使用し、どのエディタが一番適しているかを調査しましたので、その結果をご紹介します。 WYSIWYGエディタとは 「WYSIWYGエディタって何？」と思われる方向けにWYSIWYGエディタって何かを簡単にご説明させていただきます。 What You See Is What You Get（見たままが得られる）の頭文字をとったものでWYSIWYGと呼ばれます。 最近では、コンテンツマネジメントシステム(CMS)などでよく使われているエディタです。 実際のコンテンツそのものを編集しながら確認することができ、そのままをウェブページなどで表示する事が出来ます。 （実際は環境（ブラウザ等）に依存するので必ずしも全く同じ結果が得られるわけではないみたいですが。。。） 使用する側か
guiland
概要と参加方法 / 自動勉強会 / 映画館ウェブサイトのようなインタラクティブ座席マップ / .tex / aualrxse / Snapping / sakihet / 複雑GUI会オフライン 2023夏 / k3ntar0 / 時間を扱うGUIについて考えている2023夏 / 自動勉強会 vol.4 canvas の状態管理 / Slate.js / hand-dot / jokester /
At Fiberplane, we recently encountered an interesting challenge: We were outgrowing the library we were using for our rich text editor. We used to use Slate.js — a fine...
幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変換する変換器を与
Google Docs will now use canvas based rendering | Hacker News
Speaking as one of the original three authors of Google Docs (Writely), but zero involvement in this project (I left Google in 2010): I'm seeing a lot of comments asking how JavaScript-on-Canvas could possibly outperform the highly optimized native code built into the browser engines. It's been a long time since I've really been involved in browser coding, but having written both Writely and, fart
Today, Rich Text Editors are used in many applications, including simple blogs to complex content management systems. However, choosing one isn’t easy since there are many out there with different capabilities. So, in this article, I will evaluate 5 Rich Text Editor for React with feature comparisons to help you choose the best one for your requirement. Preview of Draft.jsDraft.js is an open-sourc
Collaborative editing: real-time collaboration with Slate.js
From January 2023, TinyMCE no longer offers Real-Time Collaboration (RTC) for new customers. For Existing customers, we'll be in contact to discuss options. Please reach out to your Account Manager if you are a customer using RTC, and you have any questions about the plugin. This is the second in a series of blog posts documenting the TinyMCE RTC journey and decisions along the way. The first post
記事一覧
記事一覧2024年04月30日分割キーボードを机に固定2024年02月29日自作PC20242024年02月13日銅のゴミ受け2024年02月01日2023年分の確定申告2024年01月26日YouTube Studioを特定のアカウント専用にアプリ化する2024年01月13日ReFaのシャワーヘッド FINE BUBBLE PURE2024年01月11日Zuviのコードレスドライヤー2024年01月10日SMTを無効化したらAC6がまともに動くようになった2024年01月09日長尾製作所のマウスディスプレイ台2024年01月09日ライトモード廃止2023年12月29日vscode-ruby-light開発日記 - Prismパーサー導入編2023年12月24日ドメインをRoute53からCloudflareに移管2023年12月23日vscode-ruby-light開発日記 - 初期版
はじめに フロントエンドエンジニアとして初のプロダクトでリッチなテキストエディタ開発をすることになり、Slate.js というライブラリに出会いました。 開発でキャッチアップしたことや、Slate.js に触れたみた感触などをお話しします。 Slate.js とは 公式 GitHub https://github.com/ianstormtaylor/slate 公式ドキュメント https://docs.slatejs.org Slate は React と Immutable の上に構築されたフレームワークであり、React を用いて WYSIWYG エディタや Markdown エディタなど、リッチテキストエディタを開発できます。 ※Slate.js は現在ベータ版なので破壊的変更が行われる可能性があるとのことです。 Slateのいいところ 公式のexamplesが豊富 histor
はじめに この記事ではOPEN8で利用しているライブラリの1つである、Slate.js(以下Slate)についての紹介をします。 ZennにおいてSlateの記事があまり見受けられなかったので、こんなライブラリもあるんだといった感じで知っていただければ嬉しいです！！ Slate.js is 何？ Slate.jsはリッチテキストエディタ、WYSIWYG（ウィジウィグ）エディタを表現するためのライブラリです。 リッチテキストエディタでの編集は、テキストへの装飾が入力段階で見えるようになっているのが特徴の１つですね。 エンジニアをはじめとしてITに関わることが多い人がターゲットのサービスだとMarkdownが多そうですが、広いユーザーに使っていただく想定の場合における候補にあがるエディタの1つだと思います。 余談ですが、WYSIWYGは What You See Is What You Get
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creating a rich text editor using Rust and React - Blog
Draft.js と Slate.js と CodeMirror の感想
Top 5 Rich Text Editors for React in 2021
【Slate.js】リッチテキストエディタをつくる - Qiita
Reactでリッチテキストエディターを実装！Slate.jsの紹介！！