wysiwygエディタの人気記事 11件 - はてなブックマーク

1 - 11 件 / 11件

新着順人気順

絞り込み

検索対象
ブックマーク数
期間
セーフサーチ

wysiwygエディタの検索結果1 - 11 件 / 11件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

wysiwygエディタに関するエントリは11件あります。 js、エディタ、 wordpress などが関連タグです。人気エントリには『Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source』などがあります。

Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source
- 83 users
- blog.h13i32maru.jp
- テクノロジー
- 2021/07/08
こんにちは丸山@h13i32maruです。僕は今、Ubie Discoveryで医療従事者向けのカルテエディタを作っています。人生で初めてContent Editableを使ってエディタを作ってるんですが、それがすごく楽しいです！というのも、エディタを作るには色々技術的な課題があります。例えば、テキストをパースするには？ASTからHTMLをビルドするには？パフォーマンスのよい更新方法は？などなど。それらの技術的な課題を解決していくのが単純に楽しいという感じです。また、車輪の再発明は極力抑えつつ、自分たちのプロダクトでやりたいことを実現できるような工夫もしています。というわけで、今回はそんなエディタ作りで取り組んだ課題と解決策を紹介していきたいと思います。（訳: 楽しかったので、誰かに聞いてもらいたい！）エディタの概要メンテしやすいテキストパーサ - PEG.js メンテしやすいH
- editor
- react.js
- エディタ
- WYSIWYG
- html
- javascript
- React
- コード
- テスト
- js
WYSIWYGエディターの状態抽象化とReactとのつなぎ込み - 良いクロスブラウザエディターを目指して | Wantedly Engineer Blog
- 43 users
- www.wantedly.com
- テクノロジー
- 2021/01/27
まえがきブログや記事を投稿するWebサービスには、殆どの場合、リッチなエディター機能が備わっています。特に、記事を見た目通りに書けるエディターは、WYSIWYGエディターと呼ばれ、記事を書く際には欠かせない機能の一つです。 Wantedly にもストーリーと呼ぶ記事を投稿する機能があり、その記事投稿部分では、WYSIWYGエディターを実装しています。では、どのようにWYSISYGエディターを開発していくのでしょうか。この記事では、エディターの機能を実際に開発するための基礎知識と実装について書いていきます。今回話すエディターについて今回記事で指すエディターとは、 WYSIWYGエディターを想定しています。例えば、Dropbox Paper や google docs、Medium、Note などのエディターがそれに該当します。Qiita や Zenn のような 2カラムの Markdow
- react
- エディタ
- JavaScript
- js
- 開発
- あとで読む
商用利用できるWYSIWYGエディター5選！Froala Editorの導入方法も解説 - Workship MAGAZINE(ワークシップマガジン)
- 12 users
- goworkship.com
- テクノロジー
- 2020/05/23
「Microsoft Officeシリーズの感覚で、HTMLの文字装飾ができればいいのに……」「Wordpressのような高機能なエディターが欲しいな……」 CMSを開発するとき、このように感じるエンジニアの方は多いのではないでしょうか。しかしWordpressのような高機能なエディターを自分で作るのには、膨大な工数がかかります。自作という選択肢はあまり現実的ではありませんよね。そこで便利なのが、「WYSIWYG（ウィジウィグ）エディター」。OfficeのWordのようなドキュメントエディターを、簡単に導入できるフレームワークやプラグインのことです。文字の装飾はもちろん、画像や動画の設置までできる高機能なエディターを簡単に導入できます。今回は、商用利用が可能なWYSIWYGエディターを5つピックアップしました。CakePHP3で簡単に実装できる『Froala Editor』の導入方
- *web制作
- 日本語
- js
- wordpress
- web制作
GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
- 7 users
- qiita.com/mima_ita
- テクノロジー
- 2019/11/29
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub https://github.com/quilljs/quill Demo https://quilljs.com/ ・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある）・クリップボードを経由して画像のアップロードが可能です。・highlight.jsを使用してコードブロックのハイライトが可能のようです対象ブラウザ IEは非推奨のようです。ライセンス BSD 3-clause サンプル 1.3.7のサンプル <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Quill</title> <!-- highlight.js を使う場合はq
- js
- qiita
- github

WYSIWYGエディタをCKEditorで作ってみた - Qiita
- 4 users
- qiita.com/Sotq_17
- テクノロジー
- 2019/10/02
WYSIWYGエディタって何？「What You See Is What You Get（見たままが得られる）」エディタ。うぃじうぃぐって読むらしけど誰が読めるんやろう。ユーザー側からタグ付けとかスタイリングとかをさせることなく、簡単に良い感じに文章が作れるエディターです。イメージでいうとQiitaとかWordpressの投稿のエディタ画面みたいな感じです。これを簡単に実装できる方法を紹介します CKEditor vs Draft.js 実装しようと思い、調べましたがものすごく種類あるみたいですね。 https://qiita.com/rana_kualu/items/fc752de7d4f2224b29ee 最終2候補で悩みましたが、結局表題の通りCKEditorを使用しました。理由はReact案件ではないことがメインです。（Reactが入ってるか否かで使い分けてもいいかも）
Wix Rich Content - 多彩なパターンに対応したWYSIWYGエディタ
- 4 users
- www.moongift.jp
- 世の中
- 2019/09/22
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました開発者であればMarkdownのようにテキストベースで記述する方が簡単かも知れませんが、開発者でない人たちはWYSIWYGなエディタを使った方が簡単に感じるはずです。使い勝手の良いWYSIWYGエディタを探している方はWix Rich Contentを使ってみましょう。Wix製の使いやすいUIを持ったエディタです。 Wix Rich Contentの使い方デモでは左右に分かれています。左がエディタ、右側がプレビューです。普通の文章を書きます。ツールバーからコンポーネントを追加できます。これは水平線の例。スライドショー。アニメーションGIFの追加はGIPHYを検索して行うようです（デモではエラーになってしまいましたが）。 Googleマップも埋め込めます。作成した内容は
Reactベースで動作するWYSIWYGエディタ
- 3 users
- zenn.dev/tns_00
- テクノロジー
- 2022/03/18
始めに Next(React)、TypeScript、Material UI環境で扱えるWYSIWYGエディタを調査し、実際に使用し、どのエディタが一番適しているかを調査しましたので、その結果をご紹介します。 WYSIWYGエディタとは「WYSIWYGエディタって何？」と思われる方向けにWYSIWYGエディタって何かを簡単にご説明させていただきます。 What You See Is What You Get（見たままが得られる）の頭文字をとったものでWYSIWYGと呼ばれます。最近では、コンテンツマネジメントシステム(CMS)などでよく使われているエディタです。実際のコンテンツそのものを編集しながら確認することができ、そのままをウェブページなどで表示する事が出来ます。（実際は環境（ブラウザ等）に依存するので必ずしも全く同じ結果が得られるわけではないみたいですが。。。）使用する側か
ACFのWYSIWYGエディターをリンクの付け外しだけにするカスタマイズ - Qiita
- 3 users
- qiita.com/3Zz8Xx
- テクノロジー
- 2023/12/14
今回は、Advanced Custom Fields（アドバンスカスタムフィールド）のテキストエリアに「リンクの付け外しだけ」を追加したい！」を WYSIWYG エディターを使って実現します。ただ、カスタムフィールドの WYSIWYGエディターを使うと、触られたくない無駄なツールがたくさんありますよね。そこで、ツールバーに表示する機能を制限すれば良いというわけです。デフォルトのWYSIWYGには「Full」と「Basic」があるカスタムフィールドの WYSIWYGエディターを作成することで、2つの標準メニュー（「Full」と「Basic」）が表示されるようになっています。それぞれのツールバーを見ていきましょう。 WYSIWYGの「Full」 WYSIWYGの「Basic」 WYSIWYGエディターのツールバーを任意の機能のみ表示するでは、ここから無駄なツールを取り除い
- wordpress
- 仕事
WYSIWYGエディタに入門する
- 3 users
- zenn.dev/kyoncy
- テクノロジー
- 2021/03/19
最近、QuillというWYSIWYGエディタのライブラリを触ったので忘れないうちに記事にしています。 Markdownに関する記事は比較的多いですが、WYSIWYGエディタはあまり見かけなかったです... この記事では、以下のことについて解説していきます。 WYSIWYGエディタとMarkdownの違いよく使われているWYSIWYGエディタ WYSIWYGエディタの勘所おまけ: pluginを作る WYSIWYGエディタとは WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。What You See Is What You Get（見たままが得られる）の頭文字をとったものであり、「is」を外したWYSWYG（ウィズウィグ）と呼ばれることもある。冒頭でも紹介
- WYSIWYG
Markdown用のオープンソースのWYSIWYGエディタ・「Markdown Editor」
- 3 users
- kachibito.net
- テクノロジー
- 2019/10/09
Markdown EditorはMarkdown用のオープンソースのWYSIWYGエディタです。Web向けもデスクトップアプリ向け（Electron）もあります。入力エリアとプレビューエリアの2ペインUIとなっており、メニューバーから見出しやリンク、画像の挿入、リストやテーブルの他、絵文字や任意の定型文（ライセンスの文言など）の挿入ボタンも用意されています凄くいいと思うんですが、もう少し名前を探しやすいものにしてほしかったです・・　ライセンスはMITとのこと。 Markdown EditorOn GithubFor Electron
SmartBlock - ブロックベースのReact用WYSIWYGエディタ
- 3 users
- www.moongift.jp
- テクノロジー
- 2020/10/11
ユーザにHTML編集を任せる場合、何らかのツールバーやWYSIWYGなエディタが欲しいと思うでしょう。そういったツールは多々ありますが、なかなか使いやすいものに出会えません。今回紹介するSmartBlockはブロック単位での編集が可能なエディタです。並び替えもできて使い勝手はよさそうです。 SmartBlockの使い方リスト部にマウスを当てた場合です。テキストだけの場合はツールバーの内容が変わります。文章全体では右側に並び替えも出ます。表の場合は列や行の追加も出ます。 SmartBlockの便利なところは、Reactのコンポーネントとして単純なHTMLテキストを適用するだけで使えることです。専用のブロックなど気にする必要はありません。色変更などはありませんが、カスタマイズして実装すればよさそうです。 SmartBlockはReact用TypeScript製のオープンソース・ソフト
- あとで読む