Web

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

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

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

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

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

 

使用方法

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

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

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

2つ以上表示したい場合

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

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

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

 


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

ピックアップ記事

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

関連記事

  1. Web

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

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

  2. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!

    PCにExcelが入っていないけど買いたくない…たまに、「…

  3. Web

    【jQuery】ナビの範囲外をクリックしてナビを閉じる方法

    Webサイトのナビやメニュー用のプラグインが多く出回ってますが、…

  4. Web

    2018年9月現在もSurface LapotopのWindows10Proへの変更は可能?

    Surface Lapotopは購入初期の状態で「Windows 10…

  5. Web

    chrome/IE/FireFoxのサイズ解釈

    ブラウザごとにmargin(マージン)の間隔が違うことは以前から知って…

  6. Web

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

    ブログを始めるならCORESERVERを使おう!もともと私はデータ…

コメント

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

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

最近の記事

  1. Diary

    【日記】若くしてデブになりました
  2. Web

    Webデザイナーにオススメの業務効率化PCソフト8選
  3. ぼやき

    画面が勝手に動く…スマホの不具合【ゴーストタッチ】
  4. Diary

    Canon EOS Kiss X8iで撮影したポートレート写真
  5. Web

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