SublimeTextのGhostTextプラグインのご紹介〜テキストエリアがエディタになる〜

SublimeTextのGhostTextプラグインのご紹介〜テキストエリアがエディタになる〜

  • 2016-08-20  最終更新日:2016-08-20

ChromeやFirefox上でテキストエリアの編集作業内容をSublimeTextで編集できてしまうプラグインのご紹介です。

ようするにブログなどで入力するテキストボックスがSublimeTexやAtomエディタで入力できると思って頂ければわかりやすいかと思います。

そのプラグインはGhostTextです。

このようなプラグインを待ってましたって思ったのでご紹介いたします。

ワードプレスのテキストエリアの編集作業に特にはかどりますね。使い慣れているエディタなのでさくさくと入力できます。タグ入力などは補完機能があるのではかどりますね。

テキストエリアにちまちまとタグ入力していたのでかなりはかどりますね。リアルタイム同期は素晴らしいです。


導入・使い方

GhostText

まずSublimeTextでパッケージをインストールします。 ghostと入れるだけで出てきます。

GhostText

次にChromeのエクステンションを入れます。

こちらからインストール⇒GhostText for Chrome

さてこれで準備は終わりました。ChromeもSublimeTextも立ち上げておいてください。

GhostText

まずはChromeで編集したいテキストエリアを表示させます、そこで先ほど入れたエクステンションをクリック!

すると英語でThere are multiple text areas on this page.Click on the one you want to use.と表示されるのでそこをクリックします。

GhostText

今度はテキストエリアをクリックすると枠が青色になってsublimetextに内容が表示されます。

これで同期されましたので自由に編集できます。

GhostText

こちらが公式サイトです⇒GhostText/GhostText お使いのブラウザのテキストエリアに書き込む用のテキストエディタを使ってください。エディタに入力したすべてが常にブラウザのテキストエリアやエディタにリアルタイムに反映されます


∞Tadashi Suyama∞

ghosttext sublimetext atom chrome firefox plugin サブライムテキスト ゴーストテキスト
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ