tiptap - Vue.js向けのリッチなWYSIWYGエディタ MOONGIFT
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。 もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多機能で使い勝手が良さそうなエディタです。 tiptapの使い方 通常の表示です。上にツールバーがある一般的なWYSIWYGエディタです。 文字を選択してフローティングメニューを出す機能もあります。 新しい行に入ったタイミングでツールバーを下に表示させます。 画像の挿入。ドラッグ&ドロップでできます。 文字列を選択した時にツールバーを出します。普段は隠れています。 Todoリスト。 Twitterのような @ でメンション相手を出す機能。 Markdown記法をビジュアル化し
Geist - 関連性に重点を置いた個人用ナレッジベース
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人のナレッジはきちんと積み重ねていかなければなりません。日々のインプットを書きためておく場所を用意しておかないと、あっという間に頭の片隅から抜け落ちてしまいます。 そこで使ってみたいのがGeistです。個人のナレッジについて、関連性を用いて描けるソフトウェアです。 Geistの使い方 メイン画面です。主な機能はノート、マップ、そしてリンクです。 ノートはWYSIWYGで書けます。 そしてノートはノードとしてマップ上に表示します。 そして関連性をラインで表現します。 画像も追加できます。 Geistは特に各メモ（ノート）の関連性に重点を置いたソフトウェアになります。構造的に文書を書く際に、それらをすべて分けてしまって線でつないで表現するのは面白そうです。 Geistはnode/Ja
MediumEditor - MediumクローンのWYSIWYGエディタ
ブログサービスとして人気のMedium。書きやすさがとても大事で、それはデザインやフォントサイズなど様々な面に表現されます。 そんなMediumの使っているWYSIWYGクローンと言えるのがMediumEditorです。 MediumEditorの使い方 デモです。シンプルで分かりやすいです。 リンクを設定する際の表示です。 テーマが多数あります。 引用表示した場合。 こんな感じの角丸表示もできます。 MediumEditorはピュアなJavaScriptで作られており、jQueryなどへの依存がありません。また、プラグインの仕組みに対応しており、数多くのプラグインが公開されています。 Mediumのデザインは様々な工夫がこらされた結果であり、クローンとしてそれを手軽に使えるようになるのは魅力的です。オープンソースなので自分好みにカスタマイズもできるでしょう。 MediumEditorはJ
MaterialNote - マテリアルデザインのWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WYSIWYGなエディタはたくさんあります。昔はリッチで機能が多いものが良いとされてきましたが、最近ではなるべくシンプルによく使われる機能だけを提供するというものが増えています。 今回紹介するのはMaterialNote、デザイン性の優れたWYSIWYGエディタです。 MaterialNoteの使い方 これがMaterialNoteの画面です。ツールバーが黒一色でスタイリッシュです。 テーブルを追加する場合、枠を選択します。 追加されるテーブルもすっきりしたデザインです。 行間を調整と言ったこともできます。 画像はローカルから指定もできます。 Air Modeというのにするとテキストエリアやツールバーはなくなります。文字を選択するとフローティングでツールバーが出ます。 生成されるコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
