タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
GitHub - remirror/remirror: ProseMirror toolkit for React 🎉
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - appleple/smartblock: intuitive block based wysiwyg editor built with React and ProseMirror
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに Backlogは昨年（2021年）メンション機能を導入しました。本文中に他のユーザーの名前を書くと、相手に通知が送られるというものです。それにともないこのメンション機能が使える箇所で使うテキスト編集コンポーネント（以下、エディタ）を作り直しました。 編集中のテキストに含まれるメンションを、見た目的にもデータ的にも通常のテキストとは異なるものとして扱えるようにするためです。 Backlogの以前のエディタはtextarea要素で実装されていました。textarea要素はプレーンなテキストしか扱えず、テキストの一部を太字にするとか背景色をつけるといった機能はありません。 ブラウザ上でテキストエディタを実装する手段には、textareaのほかにcontenteditable属性をtrueにした要素を使う選択肢もあります。この場合はHTMLの表現力が使えるのでメンションの表示をいい感じに
GitHub - outline/rich-markdown-editor: The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - TypeCellOS/BlockNote: A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ProseMirror Guide(日本語訳)
この記事は、リッチテキストエディタを構築するためのツールキットを提供するProseMirrorのライブラリガイドを日本語訳した記事です。 製作者の許諾を得て翻訳・公開いたします。 原文： https://prosemirror.net/docs/guide/ 原著者： Marijn Haverbeke このガイドでは、ライブラリで使われているさまざまな概念と、それらの相互関係について説明します。システムの全体像を把握するためには、少なくともビューコンポーネントのセクションまでは提示された順序で通して読むことをお勧めします。 Introduction ProseMirrorはリッチテキストエディタを構築するためのツールとコンセプトの両方を提供します。 what-you-see-is-what-you-getに触発されたUIを使用しつつ、その編集スタイルの落とし穴を避けることを目指しています。
GitHub - ponymessenger/use-prosemirror: ProseMirror + React made easy
ProseMirror + React made easy NOTE: This library is in production at Pony Messenger. It was open sourced to contribute to the incredible ProseMirror ecosystem, and to ensure the best possible experience for Pony users. Example Installation Usage useProseMirror(config) <ProseMirror /> More Info ProseMirror is one of the best rich text editors out there. Although it is not written in React, its rend
SmartBlock - A Modern Block Based Wysiwyg Editor using React and ProseMirror
Installation Node.js package Install the package via npm $ npm install smartblock --save Load JavaScript from CDN <script src="https://unpkg.com/smartblock@1.3.1/dist/smartblock.js"></script> Usage As an React In your JavaScript file: import * as React from 'react'; import { render } from 'react-dom'; import 'smartblock/css/smartblock.css'; import { SmartBlock, Extensions } from 'smartblock'; rend
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ProseMirrorで作るちょっとだけリッチなテキストエディタ | 株式会社ヌーラボ(Nulab inc.)
tourisugari.jp
purplecouple.blog.2nt.com
ctftime.org
qiita.com/Jim_Jin
comic-days.com
news.yahoo.co.jp