リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
メンバーの「スキ」をわかりあいたい！フロントエンドのLT会を開催しました - Mirrativ Tech Blog
こんにちは！フロントエンドエンジニアの どじねこ です。 今回は少し前となりますが 2024年5月に社内で開催したLT会についてご紹介したいと思います。 よろしければ先日公開されました「iOS・Android 合同のLT大会を開催しました！」も合わせてご覧ください tech.mirrativ.stream ⛳️ LT会を開催した背景 ミラティブには多数のエンジニアが在籍しており、配信やライブゲームを楽しんでいただけるよう日々活動しています。メンバーの技術分野はバックエンド、フロントエンド、Unity、インフラなど多岐にわたり、それぞれの専門性を活かして課題解決に取り組んでいます。 Webフロントエンドではモバイルと異なりチームではなく、強く興味を持ったメンバーで構成されるギルドが主体となって定期的に勉強会や知見の共有会を行っています。今回はそうした勉強会の延長として、社内外に向けて発信する
Tiptapに入門してみた
はじめに この記事では、簡単にWYSIWYGエディタを作成できるTiptapの基本的な使い方をハンズオン形式で解説していきます。 Tiptapとは？ WYSIWYGエディタを作成できるライブラリ 標準でエディタにスタイリングされていないため、UIを自由に実装できる 共同編集機能も実装できるっぽい Markdown記法はサポートしてない (https://tiptap.dev/guide/output#not-an-option-markdown) GitHubでPRを書くときのようなMarkdownエディタはできない（TiptapはあくまでWYSIWYGエディタを構築するためのライブラリ） Tiptap markdown というパッケージを使えばMarkdownエディタを作成できるかも？しれないが、よくわからない… Markdown shortcuts があるので、キー入力にMarkdow
やりたいこと Tiptapのリンクプラグインがどうにも使いにくいのでどうにかしたい。 リンクを設定したらリンク先が正しいかをクリックして確認したいが、openOnClickオプションtrueだとシングルクリックでリンク先を開いてしまって編集したいときに誤爆する。 StackBlitz リンクをクリックするとopen_in_newアイコンが表示されて、アイコンをクリックすると別タブでリンクを開きます。 これなら誤爆しない。 参考にした情報 Tiptapと同じProseMirrorベースのMarkdownエディタであるMilkdownを参考にしました。 トップページに置いてあるサンプルが完成イメージと一致していた！ widgetの中身をtemplateタグに書いて読み込めるとメンテしやすくなるんだが、それはまた別の機会に調査する。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
ヘッドレスWysiwygエディタTiptapにLinkクリックで表示されるウィジェットを追加する