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

StackOverflow https://stackoverflow.com/questions/1619167

質問

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

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

役に立ちましたか？

解決

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

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

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

他のヒント

同様の質問に対して行った回答（オンラインコードエディター）プログラマー：

まず、この記事をご覧ください：
ウィキペディア<！>＃8213; JavaScriptベースのソースコードエディターの比較。

詳細については、リクエストに合うと思われるいくつかのツールを以下に示します。

  • EditArea <！>＃8213; FileEditorとしてデモ Yii拡張機能 <！>＃8213; （ Apacheソフトウェアライセンス、BSD、LGPL ）

      

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

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

      

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

  • CodeMirror <！>＃8213; 多数のデモの1つ <！>＃8213; （ MITスタイルライセンス+オプションの商用サポート ）

      

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

  • Ace Ajax.org Cloud9 Editor <！>＃8213; デモ <！>＃8213; （ Mozillaトライライセンス（MPL / GPL / LGPL））

      

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

CodePress は、 EditArea 。どちらもオープンソースです。

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

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

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

私が知っている唯一のエディタは、構文の強調表示とtextareaへのフォールバックを備えており、 Mozilla Bespin です。 GoogleがBespinを埋め込み、エディターの埋め込み方法を確認しています。現時点でこれを使用している唯一のサイトは、アルファ版 Mozilla Jetpack Gallery （ Jetpackページを送信してください）、それらがどのように含まれているかを確認できます。

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

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

http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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

<textarea>の後ろに慎重に配置された<div>を使用して、<=>内のテキストを強調表示できます。

テキストエリア内のテキストを強調表示をご覧ください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top