web-dev-qa-db-ja.com

その場で構文強調表示を行うことができるテキストエリア？

メンテナンスを容易にするために、CMS内に多くのHTMLブロックを保存しています。それらは<textarea>sで表されます。

textareaなどでHTMLの構文強調表示を行うことができ、プレーンテキストエディター（WYSIWYGや高度な機能はない）を維持できるJavaScriptウィジェットを知っている人はいますか？

javascripthtmlrichtextboxwidgethighlighting
190
Pekka 웃

通常のテキストエリアでのプレゼンテーションの制御に必要なレベルを達成することはできません。

それでよければ、 CodeMirror または Ace（以前の skywriter および bespin ）、または Monaco （MS VSCodeで使用）。

重複スレッドから-必須のウィキペディアリンク： http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

203
Nickolay

プログラマー の 同様の質問に対する回答 （ オンラインコードエディター ）：

まず、この記事をご覧ください。
Wikipedia ― JavaScriptベースのソースコードエディターの比較 。

詳細については、リクエストに合ったツールをいくつかご紹介します。

  • EditArea ― FileEditorとしてデモ 誰が Yii Extension ― （Apacheソフトウェアライセンス、BSD、LGPL）

    ソースコード用の無料のJavaScriptエディターであるEditAreaがあります。行の数値化、タブのサポート、検索と置換（正規表現を使用）、およびライブ構文の強調表示（カスタマイズ可能）により、適切にフォーマットされたソースコードを記述できます。

  • CodePress ― Joomla！CodePressプラグインのデモ ―（LGPL）― Chromeでは機能せず、開発が終了したようです。

    CodePressは、ブラウザで入力されているテキストをリアルタイムで色付けするJavaScriptで記述された構文強調表示を備えたWebベースのソースコードエディタです。

  • CodeMirror ― 多くのデモの1つ ―（MITスタイル ライセンス+オプション 商用サポート）

    CodeMirrorは、コードのようなコンテンツ（コンピュータープログラム、HTMLマークアップなど）に対して比較的快適なエディターインターフェイスを作成するために使用できるJavaScriptライブラリです。編集している言語のモードが記述されている場合、コードは色付けされ、エディターはオプションでインデントを支援します

  • Ace Ajax.org Cloud9 Editor ― デモ ―（Mozillaトライライセンス（MPL/GPL/LGPL））

    エースは、JavaScriptで書かれたスタンドアロンコードエディターです。私たちの目標は、TextMate、Vim、Eclipseなどの既存のネイティブエディターの機能、使いやすさ、パフォーマンスに一致して拡張するWebベースのコードエディターを作成することです。 WebページやJavaScriptアプリケーションに簡単に埋め込むことができます。 Aceは、 Cloud9 IDE の主要なエディターとして、またMozilla Skywriter（Bespin）Projectの後継として開発されています。

24
Pascal Qyy

CodePress はこれを行います EditArea も同様です。どちらもオープンソースです。

18
Anonymous

EditArea をお勧めします。構文ハイライトテキストエリアのライブ編集。

9
Daniel Bardi

更新：BespinはACEになりました。これは、ここで最も評価の高い回答で言及されています。代わりにACEを使用してください。

Mozillaによる Bespin を使用してください。 HTML5機能を使用して構築されているため（迅速かつ高速ですが、レガシーブラウザはサポートしていません）、使用するのは間違いなく驚くばかりで、おそらくMozillaがサポートしているため、Firefoxを開発しているためです。 .. 拡張機能を含むjQueryプラグイン もあり、jQueryで少し使いやすくします。

7
balupton

私が知っている唯一のエディタは、構文の強調表示とテキストエリアへのフォールバックを持っています Mozilla Bespin です。 GoogleがBespinを埋め込み、エディターの埋め込み方法を確認しています。現時点でこれを使用している唯一のサイトは、まさにアルファ版です Mozilla Jetpack Gallery （Jetpackページを送信する際）。

Bespinエディターの埋め込みと再利用に関するブログ投稿 もあります。

2
Eli Grey

Highlightテキストを<textarea>で、その後ろに慎重に配置された<div>を使用してできます。

Textarea内のテキストを強調表示 を確認してください。

1
E99

なぜそれらをテキストエリアとして表現するのですか？これは私のお気に入りです：

http://alexgorbatchev.com/wiki/SyntaxHighlighter

ただし、CMSを使用している場合は、おそらくより良いプラグインがあります。たとえば、wordpressには進化したバージョンがあります。

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

1
Matrym