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 中并突出显示并选择“预格式化”即可，它将所有括号编码为 <和>那很好。它存储在我的数据库中并以这样的方式输出；

<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 吗？检查源代码看不出它是一个插件，更多的是一个定制的东西。 有人知道任何其他允许代码片段的格式化插件吗？

Answer 1

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

Answer 2

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