ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - WYSIWYGの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/11/04

KEditor - 複雑なデザインもこなせるWYSIWYGエディタ

技術者以外の方でWebページを作成する時にはオーサリングツールを使うのが一般的です。また、ちょっとしたコンテンツの修正であればWYSIWYGエディタを使いますが、あまり凝ったデザインには対応できません。そこで使ってみたいのがKEditorです。Webベース、ドラッグ&ドロップで自在にコンテンツを作成できます。## KE...

List

  • 2017/09/25

Mobiledoc Kit - 好みのWYSIWYGエディタを作る

世の中には多くのWYSIWYGエディタが存在します。どれもそれぞれに特徴があり、選択が多くて迷ってしまうでしょう。しかし、それでもなお自分の目的にぴったりと合っていないことがあるかも知れません。そこで使ってみたいのがWYSIWYGビルディングキットです。今回はMobiledoc Kitを紹介します。## Mobiled...

List

  • 2017/09/25

Megadraft - Draft.JSをベースにしたリッチテキストエディタ

Facebookが開発している、WYSIWYGエディタのベースになるDraft.JS

List

  • 2017/08/26

RichText - シンプルなWYSIWYGエディタ

自分の見たままに編集する、いわゆるWYSIWYGな環境を提供するソフトウェアは開発者以外の方には必須のソフトウェアです。Markdownがいかに分かりやすい記法とは言え、開発者以外の方には使いづらいはずです。今回はjQueryプラグインのRichTextを紹介します。シンプルなデザインのWYSIWYGエディタとなってい...

List

  • 2017/07/30

pell - 1KBの軽量なWYSIWYGエディタ

Webでコンテンツを公開するのが当たり前になっている一方、HTMLを習得している割合はそれほど高くありません。そのため、コンテンツを作成する負荷を軽減するためWYSIWYGエディタの存在は大事になっています。今回はpellというエディタを紹介します。わずか1KBという軽量なライブラリです。## pellの使い方こちらが...

List

  • 2017/06/14

Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ

一昔前のCMSというとユーザの見る画面と管理画面がはっきりと分かれていました。セキュリティ上はやりやすいかも知れませんが、管理者としてはユーザがどう見えているかを逐一確認する必要があって不便でした。最近ではユーザの見ている画面上でそのまま編集できるものが増えています。その最新作と言えるのがOryです。## Oryの使い...

List

  • 2017/04/02

Pen - WYSIWYGなMarkdownエディタ

最近Dropbox Paperというサービスが気に入っています。特にMarkdown風の記法で、WYSIWYGに編集できるのが便利です。しかしオフラインで使えないのは大きな問題で、これが解決できると便利だと感じることでしょう。そこでWYSIWYGなMarkdownエディタを探しているのですが、その中で出会ったのがPen...

List

  • 2017/04/01

Alloy Editor - 多機能でWYSIWYGなMarkdownエディタ

Markdownは覚えやすい記法だと思いますが、それでも一定の書き方を覚えないと使いこなせません。そのため多くのMarkdownエディタでは2画面のプレビューがある(間違っていないかすぐに確認できる)ものとなっています。個人的には2画面があまり好きではないのでWYSIWYGなものがないかと思っていました。そこで出会った...

List

  • 2016/12/05

medium-draft - Medium風のWYSIWYGエディタ

良いサービスというのは真似る人が多いものです。良いと思ったものを自分たちのサービスに反映したいと考えるでしょうし、純粋に開発者として自分でも実装してみたいと考えることもあるでしょう。最近多いのはMediumです。今回紹介するmedium-draftはMedium風のリッチエディタを再現したソフトウェアになります。## ...

List

  • 2016/08/31

Froala WYSIWYG HTML Editor - 綺麗なデザインのWYSIWYGエディタ

昔のWYSIWYGエディタと言うとツールバーに多くの機能が並んでおり、生成されるHTMLは相当分かりづらいものでした。機能が豊富すぎたために表示速度が重たかったり、一般ユーザにとっても混乱しかねないものだったと思います。現在ではずいぶん進化しており、すっきりとしたデザインで使いやすいものが増えています。今回はFroal...

List

  • 2016/07/30

Slate - カスタマイズできるWeb用のリッチテキストエディタ

HTMLのテキストエリアのUIが貧弱なのは有名な話で、文字入力が多いサービスにおいて素のテキストエディタをそのまま提供することはなくなっています。かといってかつてのWYSIWYGエディタのように機能がてんこ盛りなのも見かけません。もっとスマートに、もっと使いやすい形で入力してもらうべきです。今回はWeb上にリッチなエデ...

List

  • 2016/06/07

Editor - Web用のMarkdownエディタ

世の中、Markdownばかりになってきました。その効果として、コンテンツが増えたり、関連ツールも多数出てきています。特にMarkdownエディタについてはかつてのWikiのように多数の言語で実装されるようになっています。今回紹介するEditorもその一つですが、単独で動くものではなくWebサイトに埋め込んで使うタイプ...

List

  • 2016/05/21

Dante - Medium風WYSIWYGエディタ

ブログシステムとしてMediumが人気です。シンプルなUIで、文章を書くという目的にぴったりです。特にエディタが良くできていて、セクションごとに動画や写真を挿入したり、文章を装飾する際に表示されるツールバーも良い感じです。そんなMediumのエディタを真似たのがDanteです。自分のサービスの中にMedium風エディッ...

List

  • 2016/02/26

MediumEditor - MediumクローンのWYSIWYGエディタ

ブログサービスとして人気のMedium。書きやすさがとても大事で、それはデザインやフォントサイズなど様々な面に表現されます。そんなMediumの使っているWYSIWYGクローンと言えるのがMediumEditorです。## MediumEditorの使い方デモです。シンプルで分かりやすいです。!

List

  • 2016/02/09

MaterialNote - マテリアルデザインのWYSIWYGエディタ

WYSIWYGなエディタはたくさんあります。昔はリッチで機能が多いものが良いとされてきましたが、最近ではなるべくシンプルによく使われる機能だけを提供するというものが増えています。今回紹介するのはMaterialNote、デザイン性の優れたWYSIWYGエディタです。## MaterialNoteの使い方これがMater...

None

  • Premium_s 2016/02/03

業務で使えるオープンソース(175)「WYSIWYG」

今回のテーマはWYSIWYGです。過去に2013年にも同じテーマで行っていますが、すでに3年前の内容とあって、トレンドとはずれてきています。そこで今回は2014年以降に紹介したWYSIWYGエディタを中心に紹介したいと思います。## 最近のトレンド### HTML5HTML5が勧告されたこともあって、HTML5を駆使し...

List

  • 2015/11/08

Trix - 毎日使うからこそ。Basecamp製のWYSIWYGエディタ

見た目に派手、またはとにかく機能を詰め込んだソフトウェアは一見すると便利そうに見えるでしょう。しかしそれを毎日使い続けるとなると話は別です。むしろシンプルで必要なものだけが揃っている方が安心できるのではないでしょうか。Trixはそんな観点から作られたWYSIWYGなテキストエディタです。開発したのはBasecamp(前...

List

  • 2015/10/05

ContentTools - ユーザが見ている画面をそのまま使って編集

WYSIWYGエディタは見たままに編集できるというのが売りです。とはいえ、管理画面などで提供されるものはHTMLタグの入力を省略できるだけで、表示されている内容がそのままユーザ向けに表示される訳ではありません。今回はまさに見たままにユーザにも提供できるコンテンツを編集可能なContentToolsを紹介します。## C...

List

  • 2015/09/26

woofmark - MarkdownのWYSIWYGエディタ

Markdownを扱えるサイトが増えるのに伴って、自分のサイトでもMarkdownをコンテンツに使いたいと思うのではないでしょうか。レンダーは数多くありますが、さらにコンテンツを編集する機能も提供しなければならないでしょう。そこで使ってみたいのがwoofmarkです。WYSIWYGなMarkdownエディタで、HTML...

List

  • 2015/09/25

Substance - Webページをそのまま編集できるWYSIWYGエディタ

Webサービスの種類によってはユーザにコンテンツを作成してもらうタイプのものがあります。最近ではMarkdown記法で書かせることが多いようですが、それも記法に慣れた人向けでしょう。初心者はHTMLも分からないものです。そんな中使えるのはWYSIWYGなエディタです。HTMLをインラインで修正できるSubstanceは...