WYSIWYG エディタ「Quill」の紹介と、ペースト時の書式設定をカスタマイズする方法
こんにちは。株式会社 Sally エンジニアの @piesukeです。 私たちは、マーダーミステリーを楽しむためのアプリ「ウズ」と、マーダーミステリーを制作してウズ上で遊べることが出来るアプリ「ウズスタジオ」、マーダーミステリーを検索できるサイト「マダミス.jp」を開発・運営しています。 私が最近やって良かったマーダーミステリーは「死神はトリックをかたらない」です。 今回は、弊社で採用しているテキストエディタ「Quill」の紹介と、ペースト時の書式設定カスタマイズ方法を解説します。 背景 弊社ではマーダーミステリーのアプリを運営していますが、一般的にゲームのようなグラフィカルな画面ではなく、文章が主役のアプリであり、装飾の重要性が高いです。また、作家の方々が文章を書く際に、装飾を簡単に行えるようにすることが重要でした。 元々文章の装飾・表示には マークダウン を使用していましたが、以下の点
Announcing Quill 2.0 - Knock Down Silos by Slab
Announcing Quill 2.0Running weekly updates of every small improvement and bugfix to Slab that miss the headlines. We are thrilled to announce the release of Quill 2.0 — a significant milestone in moving forward web editing experiences for millions of users. Since the initial 1.0 release, Quill has seen numerous success stories from fast-growing startups, well-known brands, and established Fortune
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
WYSIWYGエディタに入門する
最近、QuillというWYSIWYGエディタのライブラリを触ったので忘れないうちに記事にしています。 Markdownに関する記事は比較的多いですが、WYSIWYGエディタはあまり見かけなかったです... この記事では、以下のことについて解説していきます。 WYSIWYGエディタとMarkdownの違い よく使われているWYSIWYGエディタ WYSIWYGエディタの勘所 おまけ: pluginを作る WYSIWYGエディタとは WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。What You See Is What You Get（見たままが得られる）の頭文字をとったものであり、「is」を外したWYSWYG（ウィズウィグ）と呼ばれることもある。 冒頭でも紹介
Quill - Your powerful, rich text editor
Built for DevelopersGranular access to the editor's content, changes and events through a simple API. Works consistently and deterministically with JSON as both input and output. Cross PlatformSupports all modern browsers on desktops, tablets and phones. Experience the same consistent behavior and produced HTML across platforms. Fits Like a GloveUsed in small projects and giant Fortune 500s alike.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Enhance Your React App’s Text Editing with Quill.js: Step-by-Step Implementation
Build a WYSIWYG text editor using Quill - LogRocket Blog
https://quilljs.com/playground/react
GitHub - zenoamaro/react-quill: A Quill component for React.
GitHub - quill-mention/quill-mention: 💬 @mentions for the Quill rich text editor
Rich Text Editor | Components | Vaadin Docs