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 的代码，将脚本标记视为无效元素，而不是将它们视为纯文本。

此外，它没有 CDATA 功能，因此它忽略了某些部分...

我需要一个插件，因为我无法从头开始编写它，我没有时间也没有预算。对于 StackOverflow 究竟让我在创建这个问题时做了什么！ 很好的 Stackoverflow

问题

有没有人对 TinyMCE 这样做有运气？ 我可以窃取/借用 Stackoverflows 吗？检查源代码看不到它是一个插件，更像是一个定制的东西。 有人知道任何其他允许代码 sn-ps 的格式化插件吗？

Answer 1

Codemirror - 可以为您提供解决方案吗？

Answer 2

我认为您需要调整您的 tinymce 初始化设置 valid_elements 和 valid_children（也不要忘记您的属性）。