使用 Emacs 编辑浏览器中的文本框

Question

当要在网站上输入大量内容时，常常会感叹于文本框编辑能力的简陋，用起来完全没有 Emacs 那种顺畅的感觉。 要是能够使用 Emacs 来编辑浏览器中文本框的内容就好了。在 github 上搜索了一番，发现还真有两个插件可以做到这一点，一个是 atomic-chrome，另一个是 emacs_chrome。且两个插件都同时支持 chrome 和 firefox

atomic-chrome

给浏览器安装 GhostText 插件

• 如果是 firefox，点击这里安装 GhostText
• 如果是 Chrome，点击这里安装 GhostText

在 Emacs 上安装 atomic-chrome 插件

最简单的方法就是使用 use-package，在初始化文件中加入

(use-package atomic-chrome
  :ensure t
  :config (atomic-chrome-start-server))

使用

1. 启动 Emacs
2. 将光标放到浏览器中的文本框中
3. 点击工具栏上的GhostText，就会弹出一个Emacs窗口
4. 在窗口上输入内容，会看到浏览器文本框中的内容也跟着变化
5. 按下 C-c C-c 退出Emacs窗口

配置

默认情况下Emacs打开的buffer处于 text-mode,不过你可以通过设置 atomic-chrome-default-major-mode 来修改它:

(setq atomic-chrome-default-major-mode 'markdown-mode)

你甚至可以通过配置 atomic-chrome-url-major-mode-alist 来指定某个网站使用特定的major-mode

(setq atomic-chrome-url-major-mode-alist
      '(("github\\.com" . gfm-mode)
        ("redmine" . textile-mode)))

默认情况下atomic-chrome通过切分当前window的方式来在产生新window，并在新window中显示编辑buffer，而这就要求时时刻刻都要有一个Emacs Frame存在。

然而我一般使用 daemon 的方式来运行Emacs，并不会经常保持一个frame存在，因此我把atomic-chrome打开编辑buffer的方式配置成创建新frame和window

(setq atomic-chrome-buffer-open-style 'frame)

emacs_chrome

给浏览器安装 Edit-with-Emacs 插件

如果是firefox，点击这里安装

如果是Chrome，点击这里安装

安装好后，进入插件配置页面，推荐选中 “Enable context menu item to invoke editor” 和 “Enable Alt-Enter Keyboard shortcut to invoke editor”

这样就可以通过双击文本框或者 Alt-Enter 快捷方式来调用Emacs编辑

在 Emacs 上安装 edit-server

我们依然使用 use-package 来安装

在初始化文件中加入

(use-package edit-server
  :ensure t
  :config (edit-server-start))

使用

1. 启动Emacs，推荐将Emacs以daemon方式启动
2. 双击浏览器中的文本框，或者将光标放到文本框中后按下 Alt-Enter, 会弹出一个新Emacs窗口
3. 在Emacs中输入内容，然后按下 C-c C-c. Emacs中输入的内容就填入文本框中了

配置

设置默认编辑 buffer 的 major mode

(setq  edit-server-default-major-mode 'markdown-mode)

emacs_chrome要做到指定网站使用特定major-mode可以通过设置 edit-server-url-major-mode-alist 或通过 edit-server-start-hook 来实现:

(setq edit-server-url-major-mode-alist
      '(("github\\.com" . gfm-mode)
        ("redmine" . textile-mode)))
;; 或者
;; (add-hook 'edit-server-start-hook
;;           (lambda ()
;;             (when (string-match "github.com" (buffer-name))
;;               (markdown-mode))
;;             (when (string-match "redmine.com" (buffer-name))
;;               (textile-mode))))

atomic-chrome VS emacs_chrome

atomic-chrome 的特点在于它能够实时同步浏览器中文本框中的内容，也就是说你在文本框中所做的修改能放映到 Emacs 中，而在 Emacs 中所作的修改也能实时反映到文本框中，可谓酷极。

然而它只能通过点击 toolbar 上的图标来调用 Emacs，不太方便。而且每次连接上 Emacs/退出 Emacs 时都会有一个 Connected/Disconnected 的提示在浏览器上显示，感觉很累赘。

相比之下，emacs_chrome 可以通过直接双击文本框来调用 Emacs，就要方便多。虽然没有像 atomic-chrome 那么酷，能同步文本框中的内容，但感觉更实用一些。