231

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

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

4

11 に答える 11

244

通常のプレゼンテーションでは、必要なレベルの制御を実現することはできませんtextarea

それでよろしければ、CodeMirrorまたはAce またはMonaco (MS VSCode で使用) をお試しください。

重複スレッドから - 必須のウィキペディア リンク: JavaScript ベースのソース コード エディターの比較

于 2009-10-24T21:26:26.610 に答える
32

プログラマーに関する同様の質問(オンライン コード エディター)に対して私が行った回答は次のとおりです。

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

詳細については、あなたの要求に合うと思われるいくつかのツールを次に示します。

  • EditAreaYii 拡張であるFileEditor としてのデモ― ( Apache Software License, BSD, LGPL )

    ソース コード用の無料の JavaScript エディタである EditArea を次に示します。行の番号付け、タブのサポート、検索と置換 (regexp を使用)、およびライブ構文の強調表示 (カスタマイズ可能) を使用して、整形式のソース コードを記述できます。

  • CodePressJoomlaのデモ!CodePress プラグイン― ( LGPL ) ― Chrome では動作せず、開発が中止されているようです。

    CodePress は、JavaScript で記述されたシンタックス ハイライト機能を備えた Web ベースのソース コード エディターで、ブラウザーに入力されているテキストにリアルタイムで色を付けます。

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

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

  • Ace Ajax.org Cloud9 EditorDemo ― ( Mozilla トライライセンス (MPL/GPL/LGPL) )

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

于 2012-02-24T11:33:27.863 に答える
19

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

于 2011-02-06T04:59:55.323 に答える
11

構文が強調表示されたテキストエリアのライブ編集には、EditAreaをお勧めします。

于 2010-06-14T22:41:02.803 に答える
8

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

MozillaのBespinを使用する必要があります。HTML5 の機能を使用して構築されているため (高速で高速ですが、従来のブラウザーはサポートしていません)、使用するのは間違いなく驚くべきものであり、私が遭遇したすべてのものを打ち負かしています。 .. jQueryでの使用を少し簡単にするための拡張機能を含む jQuery プラグインもあります。

于 2010-07-29T04:09:47.407 に答える
2

私が知っている唯一の構文強調表示とテキストエリアへのフォールバックを備えたエディターはMozilla Bespinです。Bespin の埋め込みについて Google で調べて、エディターの埋め込み方法を確認してください。現在これを使用していると私が知っている唯一のサイトは、非常にアルファ版のMozilla Jetpack ギャラリー(Jetpack の送信ページにあります) です。

Bespin エディターの埋め込みと再利用に関するブログ記事も参考になるでしょう。

于 2009-10-24T21:49:13.403 に答える
1

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

http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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

于 2009-10-24T21:25:23.913 に答える