通过控制台/书签将代码编辑器添加到文本区域答案

【问题标题】：Add a code editor to a textarea via console/bookmarklet通过控制台/书签将代码编辑器添加到文本区域
【发布时间】：2013-09-09 15:50:04
【问题描述】：

我遇到了一个问题，我在 CMS 上开发不受我控制的页面，并且我正在编辑越来越复杂的页面，只不过是一个文本区域。

最初我在我的代码编辑器中创建页面，然后将 HTML 复制到 textarea 中。手动保持本地和 CMS 代码同步。

这个工作流程很糟糕。

当我在 CMS 中工作时，我希望有代码突出显示等功能。有什么办法可以通过书签或控制台命令将Ace 或CodeMirror 之类的代码编辑器添加到文本区域？我试过使用Ace Bookmarket Builder，但我不知道它是设计用于任何页面，还是仅用于 github。

编辑：我觉得我上面说的不够清楚。我只是这个 CMS 的最终用户，我无法更改它在后端的功能。我实际上只需要一个小书签，它可以找到文本区域并对其应用代码编辑器。

【问题讨论】：

我不相信您将能够完全自定义浏览器的文本区域以满足您的个人需求，例如功能齐全的文本编辑器或 ide。也许有一种方法可以通过脚本方法自动将更改拉入并推送到您的 cms，例如使用 selenium 或 curl 等工具。
CodeMirror 的 .fromTextArea 完成了 90% 的工作。您可能需要填充样式，并且需要绑定一些输入/输出按钮，但它可以工作。示例见danml.com/codemirror/embed
Ace Bookmarket Builder 设计用于任何页面
你试过 Tampermonkey 吗？您可以将自己的 JavaScript 添加到任何网页。 Tampermokey 是一个 Chrome 扩展，其他浏览器也有类似的扩展。 tampermonkey.net
你试过wp的高级代码编辑器插件了吗？

标签： javascript jquery textarea codemirror ace-editor

【解决方案1】：

tinymce 和 syntaxhighlighter 都是不绑定到 CMS 的包，所以如果你的包是自定义的，那么你会想尝试一起使用它们，我听说在 Drupal 的这次冒险中取得了一些成功（实际上有一个目前的项目）竞技场，但您可能正在寻找一些工作来定制。有人谈论这个http://www.tinymce.com/forum/viewtopic.php?id=22901

【讨论】：

对不起，我不够清楚。我只是这个 CMS 的最终用户。我无法添加或更改 CMS 的工作方式。我实际上只需要单击一个书签并将 textarea 转换为代码编辑器。