3

我有一个内容可编辑的<div>.

当在 div 中输入正确的降价语法时，我需要它在外部添加正确的 HTML，但在内部保留降价字符。例如：

# My H1

将被解析为

<h1># My H1</h1>

这类似于 iA Writer 的行为方式，我认为 Byword 也是如此。

有什么像这样工作的吗？

4

4 回答 4

5

听起来像一个整洁的项目。

如果您正在使用content-editable，并且您想在用户输入时更新他们的输入，您可能需要深入研究一些相当粗糙的东西，尤其是如果您想支持 IE。

我实际上已经编写了两个非常小的库Caret和Wysiwyg可以提供帮助，看看每个的示例。

您可以使用 Caret 来观察用户的输入，然后使用 Wysiwyg 来做一些事情，比如将行包装在h1标签中。换行有点棘手，不过您可以查看 Caret 的源代码以获取一些提示。

即使您不使用任何一个库，它们也应该可以帮助您入门。

于 2013-05-15T19:40:46.053 回答
1

据我了解，您正在尝试创建一个带有语法突出显示的 Markdown 编辑器。我喜欢这个想法，但我认为现在还没有这样的东西。Markdown 被设计为“易于阅读/易于编写”，足以避免使用复杂的编辑器。例如， Pagedown有点不符合这个原则（即使它是一个很棒的工具）。

无论如何，如果您想自己实现它，您将有多种选择：

  • 通过更改降价转换器的上游

    # My H1

    到

    # # My H1

  • 通过更改降价转换器的下游

    <h1>My H1</h1>

    到

    <h1># My H1</h1>

    但这不是首选方式，因为 Markdown 不是双射的，我猜你不想进行这种转换：

    My H1
=====

    到

    <h1># My H1</h1>

  • 如果您可以访问源代码或创建自己的源代码，请修改降价转换器。

在任何情况下，您都必须精通正则表达式。

于 2013-05-11T00:56:24.863 回答
1

如果您正在处理格式良好的 DOM - 查看 jquery 的 wrap 函数

.wrap()
.wrapAll()
.wrapInner()
于 2013-05-15T16:08:28.397 回答
0

您可以开始阅读有关此 stackoverflow 问题的内容。

您可以使用方法 split 和 carrier return 作为正则表达式来解析行中的文本。然后将文本分成一个数组，您可以使用它document.createElement()来动态创建新元素，例如h1标签。然后将这些标签添加到内容显示器中，您将完成格式。

您必须注意，有很多工作要做，因为您必须考虑多种情​​况：

  1. 如果文本只是格式化会发生什么
  2. 不存在的文本会发生什么
  3. ¿ 您想在每次用户输入字母时检查它吗？
  4. ¿ 格式化一个完整的数组怎么样？

一旦想到所有这些技巧和一点点javascript代码，你就会拥有它。

更新：当然，如果您想使用自己的语法策略创建自己的库（我建议将其与 jQuery 混合使用）。如果这不是您的目的，您可以带一些已发布在其他答案上的库。

于 2013-05-16T09:02:23.110 回答