如何让百度 ueditor 支持 svg 图形的编辑显示？
微wx笑
2023-01-04【网页网站】
153
5
0关键字：
Ueditor svg
百度 ueditor 默认是不支持 svg 图形的，究其原因有两点
1、xss 过滤功能会把 svg 图形相关的标签全部过虑掉
2、dtd 中没有 svg 图形相关标签的定义，很多自闭合元素会被添加闭合标签
目录
问题分析
百度 ueditor 默认是不支持 svg 图形的，究其原因有两点
1、xss 过滤功能会把 svg 图形相关的标签全部过虑掉
2、dtd 中没有 svg 图形相关标签的定义，很多自闭合元素会被添加闭合标签
比如下面的代码：
1 2 3 4 5 6 7 8 9 10 11 12 | <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 等都是自闭合元素，但是被编辑器处理之后就成了下面的样子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 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 相关标签，例如：
1 2 3 4 5 6 7 8 9 | 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行
1 | 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
