TinyMCE and SVG



我正在使用最新/当前的Tinymce编辑器(<script type="text/javascript" src='https://cdn.tinymce.com/4/tinymce.min.js'></script>),并且似乎无法显示<svg>。我在包含一些<svg>的数据库中保存了一些HTML。当加载以Tinymce加载时,它不会显示。

这是一个已知问题(我已经搜索了,没有发现太多)?有解决方法吗?

tinymce带空和无效的标签。您可以通过

解决
  1. 向每个空元素添加'&amp; nbsp':

    svg.find('*').each(function() {
      if (!$(this).html()) {
        $(this).text('&nbsp;');
      }
    });
    

    这是您的jQuery包装SVG元素。

  2. 根据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中查找nonEmptyElementsMapshortEndedElementsMap,以在您的版本中查找默认列表(两个列表结合在一起),并注意,在那里,标签被空间分开,但是当您提供列表时,列表自己列表被逗号分开(无论出于何种原因)。

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元素被检测为空的,因此被删除。

不幸的是没有配置来改变此行为,但是那里 是一些解决方法。

  1. 始终为SVG元素具有名称:<svg name="something"

  2. 始终具有SVG元素的数据-MCE属性:<svg data-mce-something="something"

  3. 在SVG元素中包含一些文本内容:<svg>&nbsp;</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[*]

最新更新