Web

【ace.js】エディタを複数表示させる方法

ブラウザ内でコードを書くならそれ用のエディタを使うわけなんですが、

最悪textarea(テキストエリア)でもなんとかなりますが、

見づらいのでace.jsを使用すればDreamWeaverやBracketsのようなエディタを

ブラウザ内で使用することができます。

 

使用方法

以下のコードを貼り付けるだけで表示されます。

ページ内に一つ表示したいだけならこのまま使用してOKです。

ちなみに今回はpreタグを使用していますがpreタグでなくても大丈夫です。

2つ以上表示したい場合

ただこれを表示したいエディタが2つ以上で不特定多数の場合は

以下のように記述すればよいでしょう。

こうすればエディタがいくつ増えてもそれぞれバッティングせず記述できます。

 


もし、2つ以上のエディタの中身を共有したい場合は以下参考記事を使用してみて下さい。

ピックアップ記事

  1. 目標がない人はやりたいことリスト100をやってみよう
  2. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法
  3. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」

関連記事

  1. Web

    【Brackets】必ず入れるべき拡張機能5選

    前回のブログでオススメのエディタとしてBracketsをオスス…

  2. Web

    Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

    今回はGoogleform埋め込みで回答完了画面に遷移させない方法…

  3. Web

    ディスプレイポートとは?HDMIと比較・メリット紹介!

    今まで自宅の環境ではHDMIかVGAを使用していたのでDisp…

  4. Web

    自分のITリテラシーのレベル把握してる?リテラシーレベル表

    自分のITリテラシーのレベル、把握してますか?そもそもITリテ…

  5. Web

    Web業界用語。ガチ初心者は覚えた方がいい必須用語10個

    どうもWeb業界に生きるつかぽんです。今回…

  6. Web

    ブログサービス「Blogger」の使い方紹介

    友人が2名「自分もブログやりたい!」と言っていたので、自分がや…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. カメラ/写真

    カメラ初心者がCanon EOS Kiss X8iで撮れる写真
  2. Web

    レンタルサーバー探してるならCORESERVER使ってみて!
  3. Diary

    【毎日トトロ】Twitterで毎日トトロの絵をあげます。
  4. Other

    資格・免許は話のネタになる。資格を取るメリットとオススメの資格は?
  5. Web

    画像1枚なおしただけでAdSense審査に通過した話
PAGE TOP