メンテナンスを容易にするために、CMS 内に多数の HTML ブロックを保存しています。それらは s で表され<textarea>
ます。
textarea
プレーン テキスト エディターのまま (WYSIWYG や高度な機能なし)で、HTML の構文の強調表示を行うことができる何らかの JavaScript ウィジェットを知っている人はいますか?
メンテナンスを容易にするために、CMS 内に多数の HTML ブロックを保存しています。それらは s で表され<textarea>
ます。
textarea
プレーン テキスト エディターのまま (WYSIWYG や高度な機能なし)で、HTML の構文の強調表示を行うことができる何らかの JavaScript ウィジェットを知っている人はいますか?
通常のプレゼンテーションでは、必要なレベルの制御を実現することはできませんtextarea
。
それでよろしければ、CodeMirrorまたはAce またはMonaco (MS VSCode で使用) をお試しください。
重複スレッドから - 必須のウィキペディア リンク: JavaScript ベースのソース コード エディターの比較
プログラマーに関する同様の質問(オンライン コード エディター)に対して私が行った回答は次のとおりです。
まず、
Wikipedia - JavaScript ベースのソース コード エディターの比較という記事をご覧ください。
詳細については、あなたの要求に合うと思われるいくつかのツールを次に示します。
EditArea ― Yii 拡張であるFileEditor としてのデモ― ( Apache Software License, BSD, LGPL )
ソース コード用の無料の JavaScript エディタである EditArea を次に示します。行の番号付け、タブのサポート、検索と置換 (regexp を使用)、およびライブ構文の強調表示 (カスタマイズ可能) を使用して、整形式のソース コードを記述できます。
CodePress ― Joomlaのデモ!CodePress プラグイン― ( LGPL ) ― Chrome では動作せず、開発が中止されているようです。
CodePress は、JavaScript で記述されたシンタックス ハイライト機能を備えた Web ベースのソース コード エディターで、ブラウザーに入力されているテキストにリアルタイムで色を付けます。
CodeMirror ―多くのデモのうちの 1 つ― ( MIT スタイルのライセンス + オプションの商用サポート)
CodeMirror は、コードのようなコンテンツ (コンピューター プログラム、HTML マークアップなど) 用の比較的快適なエディター インターフェイスを作成するために使用できる JavaScript ライブラリです。編集している言語用にモードが書かれている場合、コードは色付けされ、エディターはオプションでインデントを支援します
Ace Ajax.org Cloud9 Editor ― Demo ― ( Mozilla トライライセンス (MPL/GPL/LGPL) )
Ace は、JavaScript で書かれたスタンドアロンのコード エディターです。私たちの目標は、TextMate、Vim、Eclipse などの既存のネイティブ エディターの機能、使いやすさ、およびパフォーマンスを拡張する Web ベースのコード エディターを作成することです。Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。Ace は、Cloud9 IDEの主要なエディターとして、また Mozilla Skywriter (Bespin) プロジェクトの後継として開発されました。
構文が強調表示されたテキストエリアのライブ編集には、EditAreaをお勧めします。
更新: Bespin は ACE になりました。これは、ここで最も評価の高い回答で言及されています。代わりに ACE を使用してください。
MozillaのBespinを使用する必要があります。HTML5 の機能を使用して構築されているため (高速で高速ですが、従来のブラウザーはサポートしていません)、使用するのは間違いなく驚くべきものであり、私が遭遇したすべてのものを打ち負かしています。 .. jQueryでの使用を少し簡単にするための拡張機能を含む jQuery プラグインもあります。
私が知っている唯一の構文強調表示とテキストエリアへのフォールバックを備えたエディターはMozilla Bespinです。Bespin の埋め込みについて Google で調べて、エディターの埋め込み方法を確認してください。現在これを使用していると私が知っている唯一のサイトは、非常にアルファ版のMozilla Jetpack ギャラリー(Jetpack の送信ページにあります) です。
Bespin エディターの埋め込みと再利用に関するブログ記事も参考になるでしょう。
なぜそれらをテキストエリアとして表しているのですか? これは私のお気に入りです:
http://alexgorbatchev.com/wiki/SyntaxHighlighter
ただし、CMS を使用している場合は、おそらくより優れたプラグインがあります。たとえば、wordpress には進化したバージョンがあります。
http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/