VueでWYSIWYGリッチテキストエディタを実装することになり、プラグイン選定までの調査記録。 ↓こういうブログとかによくある機能のやつ。 調査開始 まずは「Vue リッチテキストエディタ」などで検索してヒットしたものをリストアップ。 TinyMCE CKEditor Quill tiptap Google Trendsで比較 プラグインの比較でよくお世話になってるGoogle Trends。 検索結果を統計的にグラフ表示してくれる。 TinyMCEとCKEditorの二強っぽい。 日本だとTinyMCEの方がやや優勢。 GitHubスター数の比較 TinyMCE https://github.com/tinymce/tinymce ： 8.7k https://github.com/tinymce/tinymce-vue ： 1.1k CKEditor https://github.c
注意 もっと簡単な導入方法を見つけました。以下を参照してください。 https://qiita.com/idani/items/661e5aaa9dc32588d204 はじめに CKEditorで編集しているHTMLで、画像を挿入した場合に、ドラッグで画像サイズを自由に変更したい。 CKEditorのデモサイトでは、以下のように自由に画像のサイズをドラッグで変更ができる。 ところが、Vue.jsに導入したCKEditorでは、画像のサイズ変更ができなかった！！ TL;DR Enhanced Imageプラグインを導入することで、ドラッグでの画像のリサイズに対応するようです。 デモサイトと今回作成したサンプルコードをGithubで公開をしています。 https://github.com/idani/ckeditor4-vue-image-resize 以下、Vue.jsのCKEditor4
アウトライン・プロセッシング入門を読んだ 『アウトライン・プロセッシング入門』という本を読んでみたら意外とよかったのでアウトラインとアウトライナーについて思っていることを書きます。 読んだきっかけ WorkFlowy というアウトライナーについて調べてたらよく紹介されていたので読んでみた。 WorkFlowy というのはウェブベースのアウトライナー。 Google で「 WorkFlowy 」で検索すると Evernote でライフハックしまくりお父さんみたいな人たちが群生してる様子が観察できる。犬のえさやりタスクや子どもを公園で遊ばせる予定などをどうやってクラウドで管理するかみたいなことをアツく語っている。 良かったところ アウトライナーの使い方を見直した。最近の自分のアウトライナーの使い方は間違っていた。 アウトライナーとは 文章の概要・目次を書くために使うものというのが一般的な理解。
なぜ 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
業務システムでは担当者にテキスト入力を行ってもらうのは良くあることです。そんな時、単なるテキストエリアでは書きたい内容が書き切れないのではないでしょうか。そこで使われるのがツールバーを備えたWYSIWYGエディタです。 かつてはCKEditorがよく知られていましたが、あまりに多機能であるために動作が重たく、使いこなせないケースがよくありました。そこでもっとシンプルに必要十分な機能を備えたエディタを紹介します。 wysiwygetize 単なるテキストエリアに見えますが、文字を書いたり選択するとフローティングのツールバーが表示されます。画像貼り付けの機能はありませんが、文字装飾と見出し設定ができます。 wysiwygetize demo bootstrap-wysiwyg Bootstrapと組み合わせて利用します。画像の埋め込み、リンク、文字の配置など十分な機能が備わっています。 Tin
Trix: A rich text editor for everyday writing BasecampからのオープンソースプロジェクトのWYSIWYGエディタ「Trix」 シンプルで必要十分なWYSIWYGエディタが実装できます。 関連エントリ HTML5ベースのWYSIWYGエディタ「Squire」 HTMLコンテンツ全体のWYSIWYG編集を可能にするツール「ContentTools」 サーバ上のHTMLをWYSIWYGで書き換えてそのまま保存するというシンプルなCMS「SiteCake」 Markdown記法そのままでWYSIWYGできるエディタ実装jQueryプラグイン「Markdownify」
Smalleditor 定期的に自動保存してくれるWYSIWYGエディタ「Smalleditor」。 WYSIWYGエディタ自体はテキストを選択すればツールバーが出るというようなシンプルな物ですが、定期的に保存してリビジョンとして管理してくれ、元に戻せるエディタ実装に使えます 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「EnjoyCSS」
hackpad 複数人数でWYSIWYGにドキュメントをリアルタイム編集できる「Hackpad」 １つのドキュメントを複数人数でリアルタイムに編集し、公開出来るツールです。 誰かの編集が即座にWYSIWYGで反映されているあたりが面白くて便利そう。 文書を作って誰かを招待して同時に文書をつくり上げることが出来ます。 何らかのドキュメントを複数人数で確認しながら作る際に使えそうです。 関連エントリ 高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」 ブラウザ上で動くHTML5アニメーション作成ツール「HTML5Maker」
SCEditor - A lightweight WYSIWYG HTML and BBCode editor - SCEditor 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 ユーザインタフェースがシンプルなので、どんなサイトでも簡単に使えそうです。 Youtube動画の挿入機能や顔文字の挿入機能等も便利そうです。 Bootstrapを使ったサイトでもマッチしそうなデザインです。 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 簡単にクールな他言語サイトがWYSIWYGで作れる「Edicy」
ベーシックなjQueryのWYSIWYGエディタです。結構使いやすそうだったので備忘録。よくあるWYSIWYGエディタの機能はほぼ揃っています。軽量との事ですが、一般的な軽量サイズが分かりませんので触れないでおきます。 ベーシックなWYSIWYGエディタを実装するスクリプト。軽量と書いてありましたが、WYSIWYGエディタの標準サイズを把握していないのでこの辺はご自身で判断頂ければと思います。 こんな感じ。テキストの装飾やレイアウト調整、顔文字等以外にYoutubeの貼り付けやフルスクリーンモードへの切り替えも出来るようになっています。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="styles
Movable Typeのエントリ編集フォームを WYSIWYG(なんかボタンが沢山あってワープロ感覚でHTMLを編集できるやつ)エディタにするプラグインは、結構色々ありますが、その中で一番便利だなー、と思ったのは、TinyMCE-MTPluginです。 僕自身は WYSIWYG エディタはあんまり使わないんですが、人に勧める時はいつもこれですね。 「本文」「続き」のフィールドだけでなく、「概要」や、自分で追加したカスタムフィールドにも WYSIWYG を適用できるのが非常に便利です。 ※ただ、あんまり沢山適用しすぎると、ブログ記事編集画面が激重になってしまうので注意。 インストールや設定の手順は上記リンク先の配布元のToI企画さんに詳しく載ってるので省略。 TinyMCE-MTPlugin を適用すると、エントリー編集フォームが以下のようになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く