如何让百度 ueditor 支持 svg 图形的编辑显示？
微wx笑
2023-01-04【网页网站】
5
0关键字：
Ueditor svg
百度 ueditor 默认是不支持 svg 图形的，究其原因有两点
1、xss 过滤功能会把 svg 图形相关的标签全部过虑掉
2、dtd 中没有 svg 图形相关标签的定义，很多自闭合元素会被添加闭合标签
问题分析
百度 ueditor 默认是不支持 svg 图形的，究其原因有两点
1、xss 过滤功能会把 svg 图形相关的标签全部过虑掉
2、dtd 中没有 svg 图形相关标签的定义，很多自闭合元素会被添加闭合标签
比如下面的代码：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> <circle cx="100" cy="100" r="50" fill="green" stroke="black" stroke-width="3"/> <ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" stroke="black" stroke-width="3"/> <defs> <circle id="s1" cx="100" cy="100" r="50" fill="yellow" stroke="black" stroke-width="3"/> <ellipse id="s2" cx="100" cy="100" rx="50" ry="30" fill="salmon" stroke="black" stroke-width="3"/> </defs> <use x="100" y="60" xlink:href="#s1"/> <use x="50" y="100" xlink:href="#s2"/> <line x1="100" y1="100" x2="200" y2="160" stroke="red" stroke-width="3"/> <line x1="100" y1="100" x2="150" y2="200" stroke="pink" stroke-width="3"/> </svg>
其中 circle、ellipse、use、line 等都是自闭合元素，但是被编辑器处理之后就成了下面的样子
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> <circle cx="100" cy="100" r="50" fill="green" stroke="black" stroke-width="3"> <ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" stroke="black" stroke-width="3"> <defs> <circle id="s1" cx="100" cy="100" r="50" fill="yellow" stroke="black" stroke-width="3"> <ellipse id="s2" cx="100" cy="100" rx="50" ry="30" fill="salmon" stroke="black" stroke-width="3"></ellipse> </circle> </defs> <use x="100" y="60" xlink:href="#s1"> <use x="50" y="100" xlink:href="#s2"> <line x1="100" y1="100" x2="200" y2="160" stroke="red" stroke-width="3"> <line x1="100" y1="100" x2="150" y2="200" stroke="pink" stroke-width="3"></line> </line> </use> </use> </ellipse> </circle> </svg>
自闭合元素都被添加了闭合/结束标签，结果就显示不正常了。
正常的显示结果：
不正常的显示结果：
注意：你如果查看本页面的源代码的话，不正常的显示结果的代码并不是上面那段被添加了闭合/结束标签的代码，因为我对编辑器做了修改，所以闭合/结束标签会被编辑器自动给去掉，不修改代码的话无法复现不正常的错误的显示结果。
如何让百度 ueditor 支持 svg 图形的编辑显示？
1、修改配置文件 ueditor.config.js
// xss 过滤是否开启,inserthtml等操作
,xssFilterRules: true
//input xss过滤
,inputXssFilter: true
//output xss过滤
,outputXssFilter: true
// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
// footer: ['style'],header: ['style'],
,whitList: {
a: ['class', 'target', 'href', 'title', 'style'],
abbr: ['title', 'style'],
address: ['style'],
area: ['shape', 'coords', 'href', 'alt'],
article: ['style'],可以把几个过虑选项由 true 改为 false
或者
在 whitList 白名单中添加 svg 相关标签，例如：
svg: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], symbol: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], circle: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], ellipse: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], defs: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], use: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], line: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], g: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill'], rect: ['xmlns', 'xmlns:xlink', 'xlink:href', 'width', 'height', 'cx', 'cy', 'r', 'rx', 'ry', 'id', 'stroke', 'stroke-width', 'stroke-height', 'x', 'y', 'x1', 'y1', 'x2', 'y2','preserveAspectRatio', 'viewBox', 'transform', 'aria-hidden', 'fill']
这些只是举个例子，全部的请参考：SVG 属性参考
2、修改 ueditor.all.js 1167行
empty = _({area:1,base:1,basefont:1,br:1,col:1,command:1,dialog:1,embed:1,hr:1,img:1,input:1,isindex:1,keygen:1,link:1,meta:1,param:1,source:1,track:1,wbr:1,circle:1,ellipse:1,use:1,line:1,rect:1,image:1,path:1,stop:1,feImage:1,feComposite:1,feColorMatrix:1,feConvolveMatrix:1,feFuncR:1,feFuncG:1,feFuncB:1,feFuncA:1,feGaussianBlur:1,feFlood:1,feTurbulence:1,fePointLight:1,feMergeNode:1,feOffset:1,feBlend:1,feDisplacementMap:1,animate:1,mpath:1,animateTransform:1,set:1,polyline:1,polygon:1});添加 svg 中所有的自闭合标签，参考：SVG 元素参考
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2023-01-04/1628.html
