我正在使用最新/当前的Tinymce编辑器(<script type="text/javascript" src='https://cdn.tinymce.com/4/tinymce.min.js'></script>
),并且似乎无法显示<svg>
。我在包含一些<svg>
的数据库中保存了一些HTML。当加载以Tinymce加载时,它不会显示。
这是一个已知问题(我已经搜索了,没有发现太多)?有解决方法吗?
tinymce带空和无效的标签。您可以通过
解决向每个空元素添加'&amp; nbsp':
svg.find('*').each(function() { if (!$(this).html()) { $(this).text(' '); } });
这是您的jQuery包装SVG元素。
根据SVG元素参考*
扩展有效元素extended_valid_elements: "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[*]"
*注意,我仅添加了与我的案件相关的元素。
我尝试了Koen的第一个建议,它适用于现有的SVG内容(我在setup
回调中添加了此建议)。但是,当将HTML粘贴到源代码编辑器中,然后确认对话框时,它仍然过滤了SVG标签。
在挖掘Tinymce的源代码之后,查看这些元素实际被删除的位置(在DomParser
类中),我找到了Schema
类的无证件编辑器设置,该设置指定了指定可以空的标签而无需删除的标签。唯一令人讨厌的是,您不能将其用于将添加到现有列表中,只能覆盖它。因此,在设置它时,您必须默认情况下列出它在其中的标签。在初始化时提供的设置中使用此设置:
// 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标签永远不应被过滤出来,因为它们是空的 - 只要它们通常也有效,例如通过将extended_valid_elements
设置为上述Koen或允许所有元素的设置(不建议它使您容易受到XSS攻击的伤害):
extended_valid_elements: "*[*]"
请注意,这适用于我的Tinymce版本4.5.8版。由于此设置未记录在当前或将来的版本中可能不再起作用。另外,他们可能已经调整了我在以后的版本中覆盖的默认列表。在其源代码中的Schema.js
中查找nonEmptyElementsMap
和shortEndedElementsMap
,以在您的版本中查找默认列表(两个列表结合在一起),并注意,在那里,标签被空间分开,但是当您提供列表时,列表自己列表被逗号分开(无论出于何种原因)。
seams将其删除,因为它是一个空的标签:http://world.episerver.com/forum/developer-forum-forum/-episerver-75-cms/-75-cms/thread--radread--rade----集装箱/2015/1/Tinymce and-SVGS/
您可能能够在INIT内使用它:
extended_valid_elements : "svg[*]",
它可以与其他空标签等一起使用,但从未尝试过SVG。
我链接到的论坛帖子:
好吧,我对Tinymce进行了一些调试,问题似乎是 SVG元素被检测为空的,因此被删除。
不幸的是没有配置来改变此行为,但是那里 是一些解决方法。
始终为SVG元素具有名称:
<svg name="something"
始终具有SVG元素的数据-MCE属性:
<svg data-mce-something="something"
在SVG元素中包含一些文本内容:
<svg> </svg>
使用这些技术我可以成功存储 XHTML属性中的Inline SVG
我通过将所有有效的SVG元素添加到 extended_valid_elements
属性中的 settings
对象的属性时使其起作用,而初始化Tinymce时,不需要其他操作
为您提供方便,这是我使用的SVG元素的完整列表 a[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],color-profile[*],cursor[*],defs[*],desc[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignObject[*],g[*],glyph[*],glyphRef[*],hkern[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*],a[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],defs[*],desc[*],discard[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],foreignObject[*],g[*],hatch[*],hatchpath[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tspan[*],use[*],view[*],g[*],animate[*],animateColor[*],animateMotion[*],animateTransform[*],discard[*],mpath[*],set[*],circle[*],ellipse[*],line[*],polygon[*],polyline[*],rect[*],a[*],defs[*],g[*],marker[*],mask[*],missing-glyph[*],pattern[*],svg[*],switch[*],symbol[*],desc[*],metadata[*],title[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],feSpecularLighting[*],feTile[*],feTurbulence[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],hkern[*],vkern[*],linearGradient[*],radialGradient[*],stop[*],circle[*],ellipse[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],text[*],use[*],use[*],feDistantLight[*],fePointLight[*],feSpotLight[*],clipPath[*],defs[*],hatch[*],linearGradient[*],marker[*],mask[*],metadata[*],pattern[*],radialGradient[*],script[*],style[*],symbol[*],title[*],hatch[*],linearGradient[*],pattern[*],radialGradient[*],solidcolor[*],a[*],circle[*],ellipse[*],foreignObject[*],g[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],svg[*],switch[*],symbol[*],text[*],textPath[*],tspan[*],use[*],g[*],circle[*],ellipse[*],line[*],path[*],polygon[*],polyline[*],rect[*],defs[*],g[*],svg[*],symbol[*],use[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],glyph[*],glyphRef[*],textPath[*],text[*],tref[*],tspan[*],altGlyph[*],textPath[*],tref[*],tspan[*],clipPath[*],cursor[*],filter[*],foreignObject[*],hatchpath[*],script[*],style[*],view[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animateColor[*],cursor[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],glyph[*],glyphRef[*],hkern[*],missing-glyph[*],tref[*],vkern[*]