javascript - WYSIWYG - 文本和代码编辑器

Question

我有需要，我确信其他开发人员必须有，而 StackOverflow 确实有。

场景

我正在建立一个网站来发布代码示例，这些文章是我通过管理系统编写的，但也可能是前端注册用户。

使命

拥有一个用户可以发布文章的所见即所得编辑器。显然它可能是一段文本，一些标题......这不是问题，因为 TinyMCE 目前可以处理这个问题。与文本混合的是代码示例，最好是在代码标签中。

执行

所以我一直在尝试扩展 TinyMCE。我可以允许代码标签，但无法将突出显示的文本放入代码标签中，但可以将其放入预标记中。没问题。所以粘贴:

<xsl:template match="*" mode="jsonObjectOrElementProperty">
    <xsl:text>"</xsl:text>
    <xsl:value-of select="name()"/>
    <xsl:text>":</xsl:text>
    <xsl:apply-templates select="." mode="jsonObjectProperties"/>
  </xsl:template>

进入 WYSIWIG 并突出显示并选择 Preformatted 就可以了，它将所有括号编码为 < 和 >，这非常好。它存储在我的数据库中并按原样输出；

<pre>&lt;xsl:template match="*" mode="jsonObjectOrElementProperty"&gt;<br /> &lt;xsl:text&gt;"&lt;/xsl:text&gt;<br /> &lt;xsl:value-of select="name()"/&gt;<br /> &lt;xsl:text&gt;":&lt;/xsl:text&gt;<br /> &lt;xsl:apply-templates select="." mode="jsonObjectProperties"/&gt;<br /> &lt;/xsl:template&gt;</pre>

但是在编辑时，所以用现有的内容加载文本区域；查看 HTML；

<textarea class="tinyMCE"><pre>&lt;xsl:template match="*" mode="jsonObjectOrElementProperty"&gt;<br /> &lt;xsl:text&gt;"&lt;/xsl:text&gt;<br /> &lt;xsl:value-of select="name()"/&gt;<br /> &lt;xsl:text&gt;":&lt;/xsl:text&gt;<br /> &lt;xsl:apply-templates select="." mode="jsonObjectProperties"/&gt;<br /> &lt;/xsl:template&gt;</pre></textarea>

TinyMCE 重新编码所有括号并删除所有和任何基于 XML 的代码，Script 标记作为无效元素，而不是将它们视为纯文本。

除此之外，它没有任何类型的 CDATA 功能，因此它会忽略某些部分...

我需要一个插件，因为我不能从头开始写，我没有时间也没有预算。 StackOverflow 正是让我在创建这个问题时做了什么!! 良好的 Stackoverflow

问题

有没有人有幸对 TinyMCE 执行此操作？我可以窃取/借用 Stackoverflows 吗？检查源代码看不到它是一个插件，更像是一个定制的东西。有人知道任何其他允许代码片段的格式化插件吗？

Answer 1

Codemirror - 可能是您的解决方案？