HTML5 テキストを編集し、ajax を使用して保存するためのシンプルな Jquery エディター。 jQueryを使用したビジュアルエディタ jQueryを使用したビジュアルエディタ

追加のコードを学習することなくテキストをフォーマットできる機能をユーザーに提供することは、開発者が過去数年間熱心に取り組んできたことです。 それは無駄ではなく、すでに大きな進歩を遂げています。 最もよく使用されている WYSIWYG エディター 10 個を紹介します。 ご自身のプロジェクトに適したものが見つかることを願っています。

01.ニックエディット

NicEdit は、大きくて扱いにくいエディタに代わる優れたツールです。 必要な機能がすべて含まれていますが、Web サイトへの統合は非常に簡単です。

02.タイニーMCE


TinyMCE は、無料の JavaScript HTML WYSIWYG エディターです。 サイトへの実装は簡単で、幅広いカスタマイズと外観のオプションが提供されます。 TinyMCE は、現在私たちが選んだエディターの中でおそらく最も「完全な」エディターです。 ほぼMSWord。

03.CKエディター


CKeditor は、初期の市場リーダーとなった新しい FCKEditor です。 エディターはそれに基づいて開発されており、FCKEditor で発生した問題を修正することを目的としています。 その結果、MSWord や Open Office に通常あるすべての機能を備えた、生産性の高い WYSIWYG エディターが完成しました。

04. YUIリッチテキストエディター


YUI リッチ テキスト エディターは、通常のテキスト入力フィールドを本格的な WYSIWYG エディターに変える Yahoo のグラフィカル ユーザー インターフェイスです。 アプリケーションは、プロパティとコンテンツが異なるさまざまなバージョンで提供されます。 ただし、どのバージョンを使用しても、エディターに必要なすべての機能を利用できます。


Markitup は、通常のテキスト入力フィールドをタグおよび書式設定エディターに変えることができる jQuery プラグインです。 HTML、Wiki、BBcode は、プラグインが提供するもののほんの一部です。 Markitup は WYSIWYG エディターではありませんが、必要な機能がすべて提供されているため、それがさらに悪いことにはなりません。

06. フリーテキストボックス


FreeTextBox は、ASP.NET 専用に設計された HTML エディターです。 エディターの外観は Microsoft Word に非常に似ています。 無料版にはそれほど多くの機能はありませんが、必要なものはすべて揃っています。

07.Moo編集可能


現在、WYSIWYG エディターのほとんどは、人気のある jQuery ライブラリーのプラグインを提供していますが、場合によっては Mootools も提供しています。 MooEditable は、シンプルでありながら非常に効果的な JavaScript ライブラリであるため、このギャップをうまく埋めてくれます。 あなたが Mootools のファンであれば、何の問題もありません。

08. OpenWysiwyg?


OpenWysiwyg は、必要な機能をすべて備えたクロスブラウザーの本格的なエディターです。 魅力的なドロップダウン メニューやボタンも含まれています。 残念ながらChromeではサポートされていません。

09. Spaw Editor - サイトは廃止されました


Spaw Editor は、Web サイト開発者が標準のテキスト フィールドを、幅広いオプション、複数の言語、および外観を変更できる制御された HTML エディターに置き換えることを可能にする WYSIWYG エディターです。

10.jHtmlエリア


jHtmlArea は、Jquery のプラグインである別の WYSIWYG テキスト エディターです。 プラグインの目標は、シンプルさと使いやすさです。 必要な機能がすべて含まれています。 外観、機能、言語をカスタマイズできます。


デザインをやり直して時間を無駄にする必要がないように、目に心地よいビジュアル エディターを探していました。 その過程で、いくつかのビジュアル エディタを見つけてテストしました。ビジュアル エディタを Web サイトにインストールするのは、簡単なアクション システムです。 (ビジュアルエディターを使用してフォルダー全体をサーバーにアップロードした後)、HEAD タグにスクリプトに対する多数のリクエストを入れる必要があります。 通常、ダウンロードされたファイルには使用デモ バージョンが含まれており、このページのコードから必要なスクリプトの名前を簡単に取得できます。 以下は、エディターを直接使用するために BODY ページで使用される小さなコードです。 HTML フォーム内の必要な場所に配置します。
ビジュアルエディタは、処理の違いによって種類に分けられます。 そこで、jQuery、MooTools、ActiveX、そして JavaScript をベースにしたビジュアル エディターに出会いました。

MooTools を使用したビジュアルエディター
このテクノロジーをベースにした非常に興味深いビジュアル エディターをいくつか見つけました。 ただし、他のニーズのためにサイトですでに使用されている jQuery スクリプトとの互換性がないため、より汎用的なものを探し続けました。

MooTools を使用した MooEditable ビジュアル エディターの例

タグ間に挿入されるスクリプト:

window.addEvent("load", function())( $("textarea-1").mooEditable(); // 投稿後 $("theForm").addEvent("submit", function(e)(alert( $ ("textarea-1").value); true を返します; )); ));

で使用

テキストエリア 1 —ビジュアルエディターで書いたテキストです—

ここでは標準の TEXTAREA フォーム タグが使用されており、無効になっていても入力フィールドが機能します。
ユーザー JavaScript (ただし、すべてのビジュアル エディター オプションは機能しません)。
ビジュアルエディター MooEditable をダウンロード

例 ggEdit、MooTools に基づくビジュアル エディター
FireFox では、このビジュアル エディタ (「ggEdit」) はまったく機能しませんでした。 Mozilla ユーザーとして、これは私にはまったく合いませんでした。
しかし、私はこのようなビジュアルエディター（例：「ggEdit」（ソースがダウンロード可能））のインターフェースが気に入りました。

jQueryベースのビジュアルエディタ
このビジュアル エディター (WKRTE) は、モジュラー ウィンドウ (画像挿入、リンク) が画面フレームの外側にポップアップしなければおそらく便利でしょう。
jQuery ベースのビジュアル エディターである WKRTE の例:

メインのスクリプトが ... に挿入されていないことに注目してください。主にスタイル リクエスト (CSS) です。

メイン スクリプトは終了タグの前に表示されます。

--一部のコンテンツ-- $(document).ready(function() ( var arr = $(".wkrte-1").rte(( width: 720, height: 520,controls_rte: rte_toolbar,controls_html: html_toolbar )) ; ));

ビジュアルエディター AJAX、jQuery、JavaScript

このビジュアル エディター (「CKEditor」) は、その使用例で豊富なテクノロジ パレットを使用します。 ただし、ここでの AJAX はビジュアル エディターの主要な機能ではなく補助的な機能を実行します。 主なライブラリ: jQuery、JavaScript。
ブラウザ間の互換性について厳密なテストは行っていませんが、私のブラウザでは問題なく動作し、嬉しくて仕方ありませんでした。 さらに嬉しいのはロシア語です！

スクリプト: 異なる場合があります。 一例:

HEAD のメイン ライブラリ:

--一部のコンテンツ-- //

確かに、フォーラムなどのページや一部のメッセージの外観を非常に便利に整形できるビジュアル エディターに何度も出会ったことがあるでしょう。 BB コードではなく、特定の結果がすぐに得られます。 インターネット上にはこれらのエディタがたくさんあります。 最も人気のあるものの 1 つは TinyMCE ですが、私は独自のスクリプトの支持者であり、タスクごとに普遍的なソリューションではなく、独自のソリューションがあるべきだと信じています。 そこで、この記事ではJavaScriptでビジュアルエディタを作成する方法を説明します。

以下は、かなりよくコメントされたコードです。





// 編集ボタンを表示する
document.write("");
document.write("");
document.write("
");
document.write(""); // iframeを追加します
/* ブラウザによっては、作成されたフレームにアクセスします */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : フレーム["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.document;
/* 空の HTML ページのコードを作成します */
iHTML = "";
iDoc.open(); // フレームを開きます
iDoc.write(iHTML); // 記述したコードをフレームに追加します
iDoc.close(); // フレームを閉じます
iDoc.designMode = "オン"; // フレーム編集モードを有効にする
/* 選択したテキストの外観を設定する関数
使用可能なコマンドの完全なセット: http://javascript.itsoft.ru/execcom/execCommands.html */
関数 setBold() (
iWin.focus();
iWin.document.execCommand("太字", null, "");
}
関数 setItal() (
iWin.focus();
iWin.document.execCommand("斜体", null, "");
}
関数 save() (
/* 後で結果の HTML コードをスクリプト ハンドラーに渡すことができるように、HTML コードを隠しフィールドに保存します */
document.getElementById("content").value = iDoc.body.innerHTML;
true を返します。
}



一見すると、コードは非常に複雑に見えます。 それはその通りですが、基本的な要素に基づいて見てみると、何も複雑なことはありません。 通常のフォームと、エディターで生成された HTML コードが保存される隠しフィールドがあります。 エディター自体は通常のフレーム、つまりテキストを書き込むことができる通常の HTML ページです (designMode = "on")。 また、パラメーターで指定されたコマンドを実行する execCommand() メソッドを使用して、さまざまな書式設定が作成されます。 新しいボタンを作成し、それらに同様のハンドラーをアタッチすることは難しくないと思います。

このスクリプトには余分なものは何もなく、最も重要で基本的なものだけが含まれています。これを JavaScript で独自のビジュアル エディターを作成するための基礎として利用できます。このスクリプトには余分なものはなく、必要なものだけが含まれます。

WYSIWYG エディターが必要になったとき、その外観と機能は覚えていましたが、名前は覚えていませんでした。 45 分後、ついにそれを見つけました...次に、私自身を含む多くの人を助けるという課題を自分に課しました。それは、少し有名な WYSIWYG エディターすべての統合リストを作成することです。

はじめに このトピックは、ほぼまたは部分的に使用に適したビジュアル エディターの広範なリストです。 私の目標は、インターネット上に散在する既存のデータを整理することでした。TinyMCE
最も一般的なビジュアル エディタの 1 つであり、優れた機能を備えています。 多くのアドオンと多くのプラグインがデフォルトでインストールされています。
(ブラウザ: Mozilla 1.3 以降、MSIE 5.5 以降、Opera 9.0 以降、Safari、Chrome)
【公式サイト | デモ]CKeditor
TinyMCE の完全な類似品。

【公式サイト】CLEditor

多くの機能を備えていないシンプルなビジュアル エディター。 しかし、非常によくできており、すべての機能が効率的に実装されています。
(ブラウザ: Firefox 1.5 以降、Opera 9.50 以降、Safari 3.0 以降、Camino 1.0 以降、Internet Explorer 5.5 以降、Google Chrome)
【公式サイト】ニックエディット

エディタは CLEditor に非常に似ています。 標準的な機能を備えています。
(ブラウザ: Firefox 1.5 以降、Opera 9.50 以降、Safari 3.0 以降、Internet Explorer 5.5 以降、Google Chrome)
【公式サイト】elRTE

非常に高品質なビジュアルエディター。 幅広い機能を備えています。 非常に高品質で作られています。
(ブラウザ: Firefox 3.5 以降、Opera 10 以降、Safari 3.0 以降、Internet Explorer 7 以降、Google Chrome)
【公式サイト | デモ]スポーン

非常に平均的なビジュアルエディタです。 標準的な機能を備えています。

【公式サイト | デモ]シンハ

優れたビジュアルエディターで、多くのアクションが組み込まれているのが特徴で、ニーズに合わせてカスタマイズするのは難しくありません。
(ブラウザ: Firefox 1.5 以降、Opera 9 以降、Safari 3.0 以降、Internet Explorer 5.5 以降、Google Chrome)
【公式サイト | デモ版】Imperavi（有料）

非常に優れたエディタで、機能はそれほど優れていませんが、十分です。 HTML からビジュアル エディターへの移行、およびその逆の移行に関連するエラーが多数あります。 (整列は削除されます) Imperavi は JQuery のプラグインとして機能することに注意することが重要です。
良いドキュメントがあります。
(ブラウザ: Firefox 1.5 以降、Opera 9 以降、Safari 4 以降、Internet Explorer 7 以降、Google Chrome)
【公式サイト | デモ]マークアップ

Markitup は、一般ユーザーよりも専門家に適した便利な HTML エディターに似ています。 しかし、HTML を知っていれば非常に便利です。
(ブラウザ: Firefox 3 以降、Opera 9 以降、Safari 3 以降、Internet Explorer 6 以降、Google Chrome)
【公式サイト | デモ]アロハエディター

悪くないエディタで、とても便利です。 ただし、ほとんどすべての利点を覆い隠す大きな欠点があります。これは、古いブラウザとそれほど古くないブラウザのサポートを拒否することです（最新バージョンのブラウザのみが利用可能です）。
(ブラウザ: HTML5 サポートが必要、Opera はサポートされていません)
【公式サイト | デモ]Mercury エディター

Mercury は完全な Web ページであり、ページ全体または個々の特定の領域を編集するために使用できます。 編集されたコンテンツのプレビューだけでなく、リンク、画像、ビデオ、表の投稿もサポートされています。 ファイルのアップロードは、ドラッグアンドドロップ インターフェイスを使用して行うことができます。
エディターは複数人でのコラボレーションもサポートしています。 Mercury はスタンドアロンの Rails としてインストールすることも、ページ コードに埋め込むことによってもインストールできます。 (JQueryが必要です)
また、欠点は、Chrome 10 以降、Safari 5 以降、Firefox 4 以降のブラウザのみがサポートされていることです。
【公式サイト | ホームページ上のデモ]YUI リッチ テキスト エディター

Yahooのビジュアルエディター。 sdevalex が正しく指摘したように、最高のビジュアル エディターの 1 つです。 包括的な機能があり、ほとんどのブラウザでサポートされています。
[デモ]Moo編集可能

機能の範囲は非常に限られていますが、それ以上の機能が必要ない場合もあります。
[デモ]OpenWysiwyg

必要な機能をすべて備えたクロスブラウザ型の本格エディター。 魅力的なドロップダウン メニューやボタンも含まれています。 残念ながらChromeではサポートされていません。
(IE 5.5 以降、Firefox 1.0 以降、Mozilla 1.3 以降、および Netscape 7 以降)

関連記事