苦しんで覚えるDraft.js -リッチテキストエディタをシュッと作る- - Qiita
株式会社LITALICOでWebエンジニア（Rails）を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2017』1日目の記事です。 記念すべき1記事目は、Facebook謹製のリッチテキストエディタフレームワークのDraft.jsについて書こうと思います。 はじめに 弊社では、conobie, LITALICO(りたりこ)発達ナビ, U2Plusを始めとするメディアを中心としたWebサービスを複数運営しております。様々な歴史的な経緯で、記事編集画面をスクラッチで実装しているのですが、以下のような辛さを抱えています。 記事UIパーツの修正・追加をする事が結構しんどい 書いた見た目と表示される見た目が異なるので、いちいちプレビューを見ないといけない Undo/Redoなどの履歴管理が辛い コンテンツの順序を変更することが辛
Webサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法
ホームテクノロジーWebサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法 Webサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法 Webアプリで入力を受け付けるコンテンツにtextareaタグがある。これは複数行テキスト入力が可能なコンテンツだ。メールフォームなどのフリーテキストの入力を求める場合に設置することが多く、お問い合わせページやアンケートページなどに入力した覚えがあるのではないだろうか。 このtextarea要素は、複数行入力できるとはいってもプレーンテキストであって、文字入力だけ許されている。機種依存ではあるが、絵文字を表現する程度だろうか。 もし太字や文字サイズをカスタマイズするような要件には向かない。というかtextareaで、これらカスタマイズはできない。文字通りテキストエ
GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
はじめに 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
商用利用できるWYSIWYGエディター5選！Froala Editorの導入方法も解説 - Workship MAGAZINE(ワークシップマガジン)
「Microsoft Officeシリーズの感覚で、HTMLの文字装飾ができればいいのに……」 「Wordpressのような高機能なエディターが欲しいな……」 CMSを開発するとき、このように感じるエンジニアの方は多いのではないでしょうか。 しかしWordpressのような高機能なエディターを自分で作るのには、膨大な工数がかかります。自作という選択肢はあまり現実的ではありませんよね。 そこで便利なのが、「WYSIWYG（ウィジウィグ）エディター」。OfficeのWordのようなドキュメントエディターを、簡単に導入できるフレームワークやプラグインのことです。文字の装飾はもちろん、画像や動画の設置までできる高機能なエディターを簡単に導入できます。 今回は、商用利用が可能なWYSIWYGエディターを5つピックアップしました。CakePHP3で簡単に実装できる『Froala Editor』の導入方
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
