javascript - 简单的 html textarea/contenteditable 文本编辑器组件支持谷歌浏览器的链接、撤消、tab-in/outdent

标签 javascript google-chrome textarea contenteditable

我正在编写一个 chrome 扩展,需要一个简单的文本编辑器组件,以便用户可以在扩展中编辑简单的笔记

要求:

  • 可点击的链接,但没有任何类型的模式对话框。如果任何“http://..”子字符串可以变成任何类型的实际可点击链接(即 div 样式像链接和带有 onclick 处理程序就可以了)就足够了
  • 撤消/重做功能
  • tab 缩进/取消缩进单行或同时选择多行
  • 在编辑/显示之间无缝切换,即。没有保存按钮或回流等 (counterexample)
  • 不需要除了缩进之外的任何类型的格式化功能,只需要纯文本 ( counterexample )
  • 适用于 chrome 的 html/js

我看过/试过:

  • <textarea/>: undo included 和 tab indent 容易实现,但是没办法做链接
  • :撤消损坏,tab indent=hell(选择和范围),但链接工作正常。还设置了 white-space: nowrap; 以显示缩进空间。这是我目前的解决方案,但它有很多问题,也许我不得不为此提出另一个问题。
  • > tinymce : 我想是矫枉过正
  • > markitup : 看起来不错,但由于它是一个文本区域,我认为没有链接可能
  • > ACE : 看起来很有前途,值得一试吗?不是矫枉过正?
  • > kix-standalone演示不适用于 chrome(具有讽刺意味的是)

非常感谢任何评论或回答..

编辑:我在我的项目中使用了 codemirror 1(Simplenote Chrome 扩展的 Syncpad),我对它很满意。 CodeMirror 为文本编辑(尤其是实时解析)提供了许多额外的基础设施,我不想再错过了。有时间会更新到codemirror 2

最佳答案

CodeMirror怎么样? ?我不认为它会做链接,但它设计得很好,你可以扩展它。

关于javascript - 简单的 html textarea/contenteditable 文本编辑器组件支持谷歌浏览器的链接、撤消、tab-in/outdent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5784175/

相关文章:

javascript - 如何设置文本区域滚动条的样式

JavaScript 分屏 View

javascript - 需要在javascript onload中调用这个函数

javascript - 指令定义语法澄清

javascript - 图表在 Chrome 中呈现,但在 FF 和 IE 中不呈现

javascript - Chrome 扩展内容脚本是否可以对本身是 Chrome 扩展一部分的 html 文件发出 jQuery AJAX 请求?

css - Chrome 中的 SVG 过滤器有所不同

javascript - 如何确定元素是 javascript/jquery 中父元素的最后一个还是第一个子元素?

jquery - TextArea MaxLength - 支持还是不支持?

javascript - 限制文本区域中单行的行数和字母数