リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
Thredot はスレッド形式でメモを書けるサービスです。 Google アカウントがあればログインできます。 こういうの Playground ページを用意しているので、気軽に使い心地を試してみてください。 Thredot のコンセプト Thredot はアイデアや情報をメモに書き出すハードルを限界まで下げることを目指しており、そのために様々な工夫をしています。 メモを整理させない 爆速な検索機能 公開範囲を設定できる WYSIWYG エディタを採用 メモを整理させない Thredot では徹底的にメモを整理させない方針を取っています。 僕は「整理するための機能が用意されていると整理をしたくなってしまう」人間です。 でも整理するのって超面倒くさいです。 ( 支離滅裂 ) 結局中途半端に整理しようとして余計にゴチャゴチャになり、最終的にメモを書くこと自体が億劫になってしまいます。 Thre
iOSのブラウザ（Safari、Chromeなどなど）で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動だと思っている。 キーボードが表示されているときにposition: fixedが効かない WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。 しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。 position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている（これはposition: stickyにしても同じ）。 ワークアラウンドも上手く動かない noteやscrapbo
メンバーの「スキ」をわかりあいたい！フロントエンドのLT会を開催しました - Mirrativ Tech Blog
こんにちは！フロントエンドエンジニアの どじねこ です。 今回は少し前となりますが 2024年5月に社内で開催したLT会についてご紹介したいと思います。 よろしければ先日公開されました「iOS・Android 合同のLT大会を開催しました！」も合わせてご覧ください tech.mirrativ.stream ⛳️ LT会を開催した背景 ミラティブには多数のエンジニアが在籍しており、配信やライブゲームを楽しんでいただけるよう日々活動しています。メンバーの技術分野はバックエンド、フロントエンド、Unity、インフラなど多岐にわたり、それぞれの専門性を活かして課題解決に取り組んでいます。 Webフロントエンドではモバイルと異なりチームではなく、強く興味を持ったメンバーで構成されるギルドが主体となって定期的に勉強会や知見の共有会を行っています。今回はそうした勉強会の延長として、社内外に向けて発信する
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ
マークダウン、皆さん使っているでしょうか。使っていますよね、GitHub(GFM)やSlack(一部記法）、個人的なメモアプリ等など、マークダウンを使えるサービスは多いので、使ったことがある人は多いんじゃないかと思います。 そして弊社のDocBaseというサービスは、マークダウンを使って情報共有をするサービスです。これも皆さん使っていますね？ この度は、そんなDocBaseのメモ編集画面で、ハイブリッドエディタなるものをリリースしました。これはDocBaseに存在したいくつもの不満、問題を解消してくれるもので、これが一体どういったもので、どうやって作られたのかを書いていきます。 ハイブリッドエディタとは？？ 「ハイブリッド」何やらガソリンと電気を使って動きそうな印象を受ける言葉ですが、もちろんそういった意味はありません。 次の動画を見てください。 左側がマークダウン、右側がHTMLのプレビ
【告知】12/1にZennで関数型プログラミングの入門本を公開します 〜 Unknown Unknowns 「知らない事に気づいてない」
【告知】12/1にZennで関数型プログラミングの入門本を公開します 〜 Unknown Unknowns 「知らない事に気づいてない」 この記事は、 2023-12-1にZennで公開予定 関数型プログラミングの入門本 Functional Programming From Scratch 関数型プログラミングをゼロからわかりやすく実用的に幅広い視点から解説！〜 圏論からFRPの構築まで 🔷UNIT 1🔷 OVERVIEW の冒頭部分です。 全UNIT 1 ~ 5のうち、この本は、UNIT 1です ★1. OVERVIEW 関数型プログラミングの一番「外側」を紹介 関数型プログラミングとは何か？ 最新のプログラミングコミュニティの動向、CPUと命令型プログラミング、システム言語における型、構造化プログラミングへの抽象化、関数型言語の紹介、オブジェクト指向と関数型プログラミングの用語と
今回は、Advanced Custom Fields（アドバンス カスタムフィールド）のテキストエリアに 「リンクの付け外しだけ」を追加したい！」 を WYSIWYG エディター を使って実現します。 ただ、カスタムフィールドの WYSIWYGエディター を使うと、触られたくない無駄なツールがたくさんありますよね。 そこで、ツールバーに表示する機能を制限すれば良いというわけです。 デフォルトのWYSIWYGには「Full」と「Basic」がある カスタムフィールドの WYSIWYGエディターを作成することで、2つの標準メニュー（「Full」と「Basic」）が表示されるようになっています。 それぞれのツールバーを見ていきましょう。 WYSIWYGの「Full」 WYSIWYGの「Basic」 WYSIWYGエディターのツールバーを任意の機能のみ表示する では、ここから無駄なツールを取り除い
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました
iOSブラウザで快適に書けるエディターを作るの大変すぎ問題
Tiptapでオリジナルエディタをつくろう！
マークダウンエディタをハイブリッドにするために必要なこと
ACFのWYSIWYGエディターをリンクの付け外しだけにするカスタマイズ - Qiita