tiptap - Vue.js向けのリッチなWYSIWYGエディタ MOONGIFT
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。 もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多機能で使い勝手が良さそうなエディタです。 tiptapの使い方 通常の表示です。上にツールバーがある一般的なWYSIWYGエディタです。 文字を選択してフローティングメニューを出す機能もあります。 新しい行に入ったタイミングでツールバーを下に表示させます。 画像の挿入。ドラッグ&ドロップでできます。 文字列を選択した時にツールバーを出します。普段は隠れています。 Todoリスト。 Twitterのような @ でメンション相手を出す機能。 Markdown記法をビジュアル化し
オープンソースのWYSIWYGエディタ「Quill 1.0」がリリース
「Quill」は、2014年に登場したWYSIWYGエディタで、モジュール構造の採用と強力なAPIの搭載によって、リッチテキストの編集に対応している。 今回リリースされた「Quill 1.0」では、構文によって色分けされたコードが他のテキストとシームレスに混在できるようになったほか、LaTeX形式の数式レンダリングに対応した。また、さまざまな表現を可能にするクラスが追加されるとともに、フローティングツールバーをベースにした新テーマ「Bubble」が追加されている。 「Quill 1.0」における最大の新機能は「Parchment」で、「Parchment」を利用すれば動画やコードの構文色分け、数式を含む多様なフォーマットやコンテンツを「Quill」上で作成できる。 このほか「Quill」の公式サイトでは、ドキュメントページが、より参照しやすく改善されるとともに、「Interactive P
Trumbowyg - A lightweight WYSIWYG editor by Alex-D / Alexandre Demode
A lightweight WYSIWYG editor Light, translatable and customisable jQuery plugin Beautiful design, generates semantic code, comes with a powerful API <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, <strong>some text bold</strong> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea co
Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup
bootstrap-wysiwyg tiny wysiwyg rich text editor for Bootstrap About This tiny (5KB, < 200 lines) jQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5. Here are the key features: Automatically binds standard hotkeys for common operations on Mac and Windows Drag and drop files to insert images, support image upload (also taking photos
About - CLEditor
CLEditor is an open source jQuery plug-in which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site. Live Demo Go ahead, take it for a test drive. Highlight some text and click some buttons. The following demos are a great source for code samples and examples of how to use plug-ins.
jQueryベースのWYSIWYGエディター『Redactor』 | 100SHIKI
マニアックではあるが、なかなか良さそうなのでメモ的にご紹介。 RedactorはjQueryベースのWYSIWYG（What You See Is What You Get）エディターである。 ユーザーにリッチな文書を入力してもらえる際に便利だ。 もちろん他にも似たようなツールはあるが、ツールバーの見た目が今風＆カスタマイズが容易なのでデザインを損なわずに使うことができるだろう。 ウェブ制作者向けではあるが、覚えておいても良さそうですな。
Redactor WYSIWYG html editor
A simple and fast tool for everyday tasks of creating and editing texts on the web. Suitable for creating and editing common texts for the web, which may also include images, video, embed code. It has a hybrid interface that can be customized according to your needs. For example, you can disable the main toolbar and only show the context toolbar when highlighting text. Or show the control toolbar
jHtmlArea Live Demo - WYSIWYG HTML Editor for jQuery
jHtmlArea Getting started An overview of jHtmlArea, how to download, basic use, examples and more. A simple, light weight, easily extensible WYSIWYG Html Editor built on top of jQuery. This component allows you to easily display a WYSIWYG Html Editor in place of any <textarea/> Html element. The minified script alone is only 9.21kb. Advantages Here are some key advantages to using jHtmlArea: Free,
簡易WYSIWYGエディタを作る - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Javascriptを使ったWYSIWYGエディタと言えば、openWYSIWYGという立派なものが既に公開されているわけで、実際利用するにもこれを弄ったほうが使えそうなのですが、カスタムするにも周辺知識は必要だろう、ということで作ってみました。 動作確認はサンプルにて。おおかまかな手順は、以下。 iframeを生成する （textareaを隠す） iframeのdesignModeをonにする （文書を編集可能にする） iframeにイベントを付与する （編集内容をtextareaに反映する） 提供される機能としては、こんな感じです。 execCommand()で各
まだまだあったJavaScript製のWYSIWYGエディタコンプリート:phpspot開発日誌
まだまだあったJavaScript製のWYSIWYGエディタコンプリート、ということで、本ブログで紹介していない（したものも一部あるかもしれませんが）ライブラリ等をメインにご紹介。 WYSIWYGといっても、それぞれの使い方には特徴があって、微妙に自分の使い勝手にあってなかったりする場合もありますね。ということで選択肢を増やすという意味でご紹介 Free Rich Text Editor OfficeスタイルのリッチなＷＹＳＩＷＹＧエディター →デモページ jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery WYSWYGエディタ実装用jQueryプラグイン jwysiwyg シンプルなＵＩのＷＹＳＩＷＹＧエディター。jQueryプラグイン SPAW Editor ＵＩが美しいタブ付きＷＹＳＩＷＹＧエディタ →デモページ TTW HT
強力にパワーアップした次期FCKEditor·CKEditor MOONGIFT
FCKEditorと言えば、Webベースで使えるWYSIWYGエディタとして有名なソフトウェアだ。しかし既に多数の機能が実装され、コアに手を入れて改造しようとはとても思えない代物になっている。 次期FCKEditor また、多機能ゆえに動作が重たいのが難点だった。そうした問題点を解決できそうなのが次期FCKEditorだ。 今回紹介するオープンソース・ソフトウェアはCKEditor、FCKEditor3.0以降のソフトウェアだ。 FCKEditorは3.0以降から名前が変わり、CKEditorとなる。それに伴って様々な機能拡張がなされている。大きな点として、スキン機能とともに枠の色替え機能が実装されたことだ。なお対応ブラウザはFirefox2以上、IE6以上、Opera9.5以上、Safari3以上となる。 APIによる独自拡張 Ajaxとの親和性も高まっており、ダブルクリックで編集モード
シンプルにリッチなテキストエリア·Sanskrit MOONGIFT
テキストエリアをWYSIWYGエディタに変えるものといえばFCKEditorなどが有名だ。FCKEditorは確かに便利だが、完成度が高すぎるためにカスタマイズしづらく（設定は変更できるが）、何より動作が重たくなっている。 シンプルながらカスタマイズも容易なリッチテキストエディタ 実際にユーザが使う機能はそれほど多くない。もっとシンプルに必要最低限に仕上げたのがSanskritだ。 今回紹介するフリーウェアはSanskrit、テキストエリアをシンプルなWYSIWYGエディタにするソフトウェアだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 Sanskritで使える装飾は太字、斜体、下線、打ち消し線、リンクとなっている。これらはTextileの構文に則っており、実際の出力もTextile形式になっている。Sanskritは言わば記法の入力補助とTex
jQueryを使ったWYSIWYGエディタ·jWYSIWYG MOONGIFT
Webベースでリッチなドキュメントを作成できるソフトウェアと言えば、FCKEditorやWYMeditorなどが一般的だ。これらは非常に便利なソフトウェアではあるが、既に出来上がった感のあるソフトウェアであり、修正しようとも思えないほど多機能だ。逆に多機能すぎて動作が重たいという欠点がある。 jQueryベースのWYSIWYGエディタ 必要なものだけを簡単にピックアップできる、さらに自分なりにカスタマイズすることも考えたい方のためにjwysiwygを紹介しよう。 今回紹介するオープンソース・ソフトウェアはjWYSIWYG、jQueryプラグインとして提供されるWYSIWYGエディタだ。 jWYSIWYGはWYMeditorを模して作られているWYSIWYGエディタだ。jQueryをベースとして作られており、18KBと軽量な作りになっている（圧縮版は7KBだ）。必要な画像やCSSを合わせても
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインがフラットな多機能WYSIWYGエディタ「materialNote」:phpspot開発日誌
IDEA * IDEA
IDEA * IDEA
シンプルに使えるJS製WYSIWYGエディタ「widgEditor」:phpspot開発日誌