なぜ Day One は Markdown を捨てたのか Day One が Markdown をやめて WYSIWYG に移行した話は前書いた。 Day One がクソになった Day One 、このブログでも度々言及していて、 Markdown で日記が書けて便利だったんだけど、最近のバージョンアップ（ Mac は 2.8 以降 、 iOS は 3.0 以降）でプレー... portalshit.net 自分が知っている範囲でアンチ Markdown 勢は Scrapbox くらいしか思い浮かばず、 GitHub や Trello などのグローバル勢に加え、 Qiita やはてなブログなど日本国内向けのサービスでも当然のように Markdown が共通言語として使われているのに、その Markdown を捨てて WYSIWYG 化する1という戦略は疑問だった。 ひとむかし前の WYSI
The Next Generation WYSIWYG HTML Editor Beautiful JavaScript web editor that's easy to integrate for developers and your users will simply fall in love with its clean design. <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <meta name=”viewport” name=”viewport” content=”width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0″ /> <link href=’https://cdn.jsdelivr.net/npm/f
「Quill」は、2014年に登場したWYSIWYGエディタで、モジュール構造の採用と強力なAPIの搭載によって、リッチテキストの編集に対応している。 今回リリースされた「Quill 1.0」では、構文によって色分けされたコードが他のテキストとシームレスに混在できるようになったほか、LaTeX形式の数式レンダリングに対応した。また、さまざまな表現を可能にするクラスが追加されるとともに、フローティングツールバーをベースにした新テーマ「Bubble」が追加されている。 「Quill 1.0」における最大の新機能は「Parchment」で、「Parchment」を利用すれば動画やコードの構文色分け、数式を含む多様なフォーマットやコンテンツを「Quill」上で作成できる。 このほか「Quill」の公式サイトでは、ドキュメントページが、より参照しやすく改善されるとともに、「Interactive P
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 昔のWYSIWYGエディタと言うとツールバーに多くの機能が並んでおり、生成されるHTMLは相当分かりづらいものでした。機能が豊富すぎたために表示速度が重たかったり、一般ユーザにとっても混乱しかねないものだったと思います。 現在ではずいぶん進化しており、すっきりとしたデザインで使いやすいものが増えています。今回はFroala WYSIWYG HTML Editorを紹介します。 Froala WYSIWYG HTML Editorの使い方 Froala WYSIWYG HTML Editorには幾つかのモードがありますが、ツールチップモードでは文字を選択すると装飾が出ます。 画像も選択できます。 大きさを変えることもできます。 YouTube動画を埋め込み。 絵文字も使えます。 ツー
Emoji One Area Simple jQuery WYSIWYG editor with emojione smiles for use in replies and comments View on GitHub Download .zip Download .tar.gz Emoji One Area Emojione-area is a small jQuery plugin that allows you to transform any html element into simple WYSIWYG-like editor with ability to use Emojione emojis. The end result is a secure text/plain in which the image emojis will be replaced with th
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスの種類によってはユーザにコンテンツを作成してもらうタイプのものがあります。最近ではMarkdown記法で書かせることが多いようですが、それも記法に慣れた人向けでしょう。初心者はHTMLも分からないものです。 そんな中使えるのはWYSIWYGなエディタです。HTMLをインラインで修正できるSubstanceはとても便利そうです。 Substanceの使い方 Substanceを適用しているページです。普通のWebページのように見えますが編集できます。 選択して見出しにしました。 太字にすることもできます。 リンクを追加する場合。 メニューを使って文字の種類を変更できます。 Substanceの特徴としてはHTMLやXMLのインポートができること、サーバ/クライアントサイ
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WYSIWYGなエディタは使い勝手が良さそうです。 Webベースのノート環境は幾つか存在しますが、利用の決め手になるのは機能よりも自分にとって手に馴染むがどうかが大きなポイントになるようです。その意味でwri.peはプログラマにとって手に馴染む人が多いようです。 今回はもう少し高機能なノートWebアプリケーションPryNotesを紹介します。ノート環境としてだけでなく、Webブラウジングのお供にぴったりなソフトウェアになります。 PryNotesの使い方 組織で使える 暗号化 どこからでもアクセスできる ファイルキャビネット プライバシー クラウド といった項目になります。 PryNotesは任意のWebサイトをコピーしてノート上に貼付けられる機能があります。スクラップを残しておく
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました まさにWYSIWYG！ 一般的にCMSを構築した場合、訪問者の見る画面と管理者の画面は分かれています。管理上、その方が分かりやすいのですが、管理者にとっては編集した内容がどのように表示されるかが掴みづらいのが難点です。 そこで最近では訪問者の見たままにWebサイトを編集できるCMSが増えていますが、同じような機能を独自のシステムにも追加できるのがjQuery Notebookです。 jQuery Notebookの使い方 jQueryプラグインだけあって使い方は簡単です。 <div class="my-editor"></div> $(document).ready(function(){ $('.my-editor').notebook(); }); これで完了です。続いてデモを
シンプルな見た目に拘ったWYSIWYGエディタ、Froala WYSIWYG Editorのご紹介です。jQueryに依存しています。ちょっと今まで見た事が無いタイプですね・・・ アイデアが素敵だったのでメモ。シンプルさに拘ったWYSIWYGエディタです。 HTML5のcontenteditableのように、その場で編集可能です。ドラッグすればそこにWYSIWYGエディタが表示されるので、その場で編集できる、というもの。 上記のようにWYSIWYGエディタがポップアップします。勿論、普段から使っているような、常時表示された状態にも出来ます。 <script src="http://code.jquery.com/jquery-1.10.2.js"></script <script src="froala editor.min.js"></script> 本体とプラグインを読み込み。 $(f
Your WYSIWYG HTML Editor Beautiful Javascript web editor that's easy to integrate for developers and your users will simply fall in love with its clean design. Take a tour Download Buy Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications. Its complete documentation, specially designed framework plugins and tons o
Bootstrap Magic : Generate your own bootstrap theme quickly and easily Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 ベースカラーや、フォントサイズ等、かなり多岐に渡るBootstrapのカスタマイズをWEB上で簡単に実施して、そのままCSSに保存できます（Minify化もOK) Bootstrapベースサイトを作る場合は覚えておいて損はないですね。 関連エントリ BootstrapベースのフラットUI実装フレームワーク「Furatto」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Twitter BootStrap に追加できる５つのコンポーネントパック
poplineはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 最近のCMSの流行はWYSIWYGな環境です。見たままに、その場で編集できるスタイルは分かりやすくて便利です。今回はストレスフリーでコンテンツの編集が可能なpoplineを紹介します。 コンテンツの表示されている状態です。こちらは編集モードです。 文字を選択すると、装飾するためのツールバーが表示されます。文字列はそのまま編集可能です。 リストを追加してみました。 リンクの場合、さらにURLを入力する欄が表示されます。 こちらは表示モード。文字列を選択するとTwitterやFacebook、Google検索するためのツールバーが表示されます。 poplineはシンプルなテキスト編集がメインですが、まさに見たままにコンテンツを編集できるのがユニークです。保存終了したコンテンツはそのままでは消え
WYSIWYGエディタのCKEditorが良い感じになってる！ WYSIWYGエディタはTinyMCEがWordPressにデフォルトで使用されているので有名ですが、CKEditorもプラグインで使用できるのでご存知の方も多いのではないかと思います。他にもいろいろ探してみたのですが、なんだかんだCKEditorが良さそうだったのでご紹介いたします。 投稿日2013年05月09日 更新日2013年05月09日 ダウンロード 下記URLからダウンロードします。 「CKBuilder」を選択すれば、プラグインをカスタマイズしてダウンロードすることができます。 ここでは「ckeditor_4.1.1_standard」を使用します。 Download | CKEditor.com 使い方 「Sample」フォルダ以外を自分の作業フォルダへコピーします。 ファイル構成は下記図のようにします。 作成し
Create.jsはユーザ向け画面をそのまま編集できるJavaScriptライブラリです。 CMSは一般的にユーザ向けの画面と管理画面とが分かれて提供されています。しかし運用時にはユーザ向けの画面を見ながらその場で修正したいこともあるでしょう。その際に使えるライブラリがCreate.jsです。 メイン画面です。この時点では普通に表示されています。 エディターを立ち上げました。Editボタンを押します。 編集可能な部分に色がつきました。 編集中の画面です。 編集しました。 コンソールで見ると編集した内容がJavaScriptのオブジェクトになっているのが分かります。 Create.jsは単体で動作する訳ではなく、編集した内容を別途サーバサイドに送ってDBやファイルを更新する必要があります。ただし、編集可能な箇所を決めたりすることはできるので、運用担当者の編集可能範囲について自由に更新し、保存
Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのかもしれません ページ全体をWYSIWYG編集可能にするモードもIEにはあったりしましたが、これは編集させたい部分だけを編集できるようになるという所がよいです。 ページ全体を下手に編集可能にするとデザインが崩れたりして大変であったりしますが、コンテンツ部分のテキストのみ編集可能にすればそういうことがないですね。 関連エントリ HTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
