问TinyMCE和SVG

EN

TinyMCE剥离空的和无效的标记。你可以通过

1. 在每个空元素中添加“”： Svg.find(‘*’).each(函数(){ if (!$(this).html()) {$(This).text(‘this’‘)；})； 这里，svg是您的jQuery包装的svg元素。
2. 根据有效元素 *扩展svg元素参考* extended_valid_elements："svg*、defs*、模式*、desc*、元数据*、g*、掩码*、路径*、行*、标记*、rect*、圆*、省略*、多边形*、多边形*、折线*、线性梯度*、辐射梯度*、停止*、图像*、视图*、文本*、文本路径*、标题*、tspan*、字形*、符号*、开关*、使用*“ *注:我只增加了与我的案件有关的因素。

我尝试了Koen的第一个建议，它适用于现有的SVG内容(我在setup回调中添加了这一点)。但是，当将HTML粘贴到源代码编辑器并确认对话框时，它仍然过滤掉SVG标记。

在深入了解TinyMCE的源代码以查看这些元素实际被删除的位置(在DomParser类中)之后，我发现了一个Schema类的无文档编辑器设置，它指定了允许空而不被删除的标记。唯一令人讨厌的是，您不能使用它添加到现有的列表，您只能覆盖它。因此，在设置它时，您必须列出默认情况下它在其中的标记。在初始化TinyMCE时，请在提供给它的设置中使用此方法：

// First the list of tags that it normally knows about by default:
non_empty_elements: "td,th,iframe,video,audio,object,script,pre,code,area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed,source,wbr,track"
// Now we add tags related to SVGs that it doesn't normally know about:
+ "svg,defs,pattern,desc,metadata,g,mask,path,line,marker,rect,circle,ellipse,polygon,polyline,linearGradient,radialGradient,stop,image,view,text,textPath,title,tspan,glyph,symbol,switch,use",

这样，这些SVG标记就不应该被过滤掉，因为它们是空的--只要它们在一般情况下也是有效的，例如，按照Koen的建议设置extended_valid_elements，或者允许所有元素(不推荐，因为它使您容易受到XSS攻击)：

extended_valid_elements: "*[*]"

请注意，这对于我的4.5.8版本的TinyMCE是有效的。由于此设置是无文档化的，因此它在当前或未来版本中可能不再工作。此外，它们可能调整了我在以后版本中重写的默认列表。在源代码中查找nonEmptyElementsMap和shortEndedElementsMap，以在您的版本中找到默认列表(这两个列表合并了)，并注意，在那里，标记是用空格分隔的，但是当您自己提供列表时，列表是用逗号分隔的(不管出于什么原因)。

因为它是一个空标记而被TinyMCE删除的接缝：http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2015/1/tinymce-and-svgs/

您的可能会在init中使用：

extended_valid_elements : "svg[*]",

它与其他空标签等一起工作，但从未尝试过使用SVG。

从我链接到的论坛帖子：

好的，我在TinyMCE中做了一些调试，问题似乎是svg元素被检测为空，并被删除。 不幸的是，没有配置方式来改变这种行为，但是有一些解决办法。

1. 始终有svg元素的名称attibute：<svg name="something"
2. 始终有svg元素的data-mce属性：<svg data-mce-something="something"。
3. 在svg元素中包含一些文本内容：<svg>&nbsp;</svg>，使用这些技术，我可以成功地将内联svg存储在xhtml属性中