WYSIWYG - Text and code editor

Question

I have a need, something I'm sure other developers must have and StackOverflow does have.

Scenario

I'm building a site to post code examples on, articles that are written by me through an admin system but also possibly Front-end reg'd users.

Mission

To have a WYSIWYG editor that a user can post articles. Obviously it may be a paragraph of text, some headings... not a problem as TinyMCE currently handles this. Mixed in with the text will be code examples, preferably in a code tag.

Execution

So I have been playing with extending TinyMCE. I can allow code tags, but cannot get it to put highlighted text into code tags, but can get it into pre tags. Not a problem. So pasting:

<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>

into the WYSIWIG and highlighting and selecting Preformatted is ok, it encodes all the brackets to < and > and that is perfectly fine. It's stored in my DB and comes out as such;

<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>

BUT when editing, so loading up the textarea with existing content; see 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 re-encodes all the brackets and removes ALL and ANY XML based code, Script tags as non-valid elements, rather than treating them as plain text.

Add to this, that it has no-kind of CDATA functionality so that it ignores some parts...

I need a plugin, as I can't write it from scratch, I havn't the time nor budget. For what StackOverflow has exactly let me do in the creation of this question!! Good Stackoverflow

Question

Has anybody had any luck with doing this to TinyMCE? Can I steal/borrow Stackoverflows? checking the source can't see that its a plugin, more of a custom built thing. Does anybody know of any other Formatting plugins that allow for code snippets?

Answer 1

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

Answer 2

我想你需要调整你的tinymce init设置valid_elements和valid_children（不要忘记你的属性）。