html5 svg 实现编辑器,如何让WordPress编辑器支持内联SVG代码?
WordPress编辑器对SVG的支持一向是非常的不友好,首先它不能上传SVG文件,也不能自动的嵌入到内容中让它正常显示。同时,对内联SVG代码根本不识别,会无情的将SVG代码自动删除。
在上一篇文章中我介绍了如何让Wordpress支持上传SVG图片的方法,似乎是部分的解决了这个问题。最近在开发“Web学习手册(http://know.xyhtml5.com)”过程中遇到了大量的需要在Wordpress可视化编辑器里使用内联SVG(inline SVG)代码的情况。
相信你也知道,Wordpress使用的是TinyMCE编辑器,而TinyMCE编辑器仅对标准的HTML5标记进行支持,SVG代码一律不识别,当我在Wordpress的编辑器了“可视化”和“文本”两个标签间切换时,所有的SVG代码都被干净的删除。
网上有很多关于如何让Wordpress的TinyMCE支持SVG的讨论,在TinyMCE官方网站也找到了配置TinyMCE扩展标记的文档。主要是三个配置点:extended_valid_elements,custom_elements和valid_children。下面是网上拷贝的一段网友提供的配置Wordpress编辑器的代码:
add_filter('tiny_mce_before_init', 'vsl2014_filter_tiny_mce_before_init');
function vsl2014_filter_tiny_mce_before_init( $options ) {
if ( ! isset( $options['extended_valid_elements'] ) ) {
$options['extended_valid_elements'] = 'svg';
} else {
$options['extended_valid_elements'] .= ',svg';
}
if ( ! isset( $options['valid_children'] ) ) {
$options['valid_children'] = '+body[svg]';
} else {
$options['valid_children'] .= ',+body[svg]';
}
if ( ! isset( $options['custom_elements'] ) ) {
$options['custom_elements'] = 'svg';
} else {
$options['custom_elements'] .= ',svg';
}
return $options;
}
还有网友认为下面这样就可以了:
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
还有网友给出了下面的建议:
TinyMCE删除SVG代码的原因是认为是空标记,所以,应该在代码里放入一点东西,比如 ,或一句“抱歉,你的浏览器不支持SVG”(在支持SVG的浏览器里这句话是不显示的。)
应该给SVG标签上添加一个id属性。
将SVG代码放入
内
上面的这些建议单独使用似乎都不成功,但每种建议都似乎能解决一部分问题。经过反复的实验,我最终找到了下面的方法,能成功的让SVG在Wordpress的TinyMCE编辑器里不被删除,而且保存良好的格式。
首先在function.php里加入下面的PHP代码:
/**
* Add to extended_valid_elements for TinyMCE
*
* @param $init assoc. array of TinyMCE options
* @return $init the changed assoc. array
*/
function my_change_mce_options( $init ) {
$ext = 'a[*],altglyph[*],altglyphdef[*],altglyphitem[*],animate[*],animatecolor[*],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[*],line[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialgradient[*],rect[*],script[*],set[*],stop[*],lineargradient[*],style[*],svg[*],switch[*],symbol[*],text[*],textpath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*]';
// Add to extended_valid_elements if it alreay exists
if ( isset( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= ',' . $ext;
} else {
$init['extended_valid_elements'] = $ext;
}
// Super important: return $init!
return $init;
}
add_filter('tiny_mce_before_init', 'my_change_mce_options');
在上面的Wordpress过滤器里,我将所有的SVG标记元素都添加了上去(至于用通配符’*[*]’的方法,我没有实验过,有兴趣的朋友可以试试,欢迎给出反馈。)
细心的朋友可能观察到,上面的SVG标记名称全都改成了小写。而很显然SVG官方规范里规定SVG标记名称的大小写是有意义的。但我实验过,使用驼峰式的SVG标记名称是不行的。可能是HTML代码并不在意大小写的原因。
第二,在Wordpress的TinyMCE编辑器里,将所有的SVG代码都用
包裹起来,这样,TinyMCE编辑器就能保持SVG代码的原有缩进格式。
第三,在代码里放入一点东西,比如 ,或一句“抱歉,你的浏览器不支持SVG”:
...
抱歉,你的浏览器不支持SVG
实施了上面的方法后,我现在使用Wordpress的TinyMCE编辑器,在嵌入SVG代码后,就像跟写入普通html代码一样,不会被删除和情况。我并没有深入的研究TinyMCE编辑器对SVG代码的处理机制,上面的这些方法也只是治标不治本。也许随着Wordpress的升级或TinyMCE升级,这些方法会失效。
如果你有更巧的方法,请在评论里分享,谢谢!
html5 svg 实现编辑器,如何让WordPress编辑器支持内联SVG代码?相关推荐
- html5svg在线编辑器,HTML5 内联 SVG
HTML5 内联 SVG HTML5 支持内联 SVG. SVG Sorry, your browser does not support inline SVG. 什么是SVG? SVG 指可伸缩矢量 ...
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- html中svg的css,HTML5 内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- 079_html5内联SVG
1. html5支持内联SVG. 2. 什么是SVG? 2.1. SVG指可伸缩矢量图形(Scalable Vector Graphics). 2.2. SVG用于定义用于网络的基于矢量的图形. 2. ...
- html5 svg 信箱图标,在网页中使用内联SVG图标和字体图标的比较
如果你要在你的网站中创建一个图标系统,你可以有不少的选择.如果你希望使用图片来制作图标,可以使用CSS sprites(CSS雪碧)技术.如果你希望使用矢量图来作为图标(这是时下非常流行的做法),你可 ...
- 第八课--H5内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- html保存为svg,JavaScript – 将内联SVG保存为JPEG / PNG / SVG
如今这很简单. 基本思路是: > svg到画布 > canvas到dataUrl >从dataUrl触发下载 它实际上在stackoverflow片段之外工作 var btn = d ...
- Html内联定义特点,HTML5
HTML5 内联 SVG HTML5 支持内联 SVG (Scalable Vector Graphics),看下图例子,进一步了解 SVG : SVG 对不起,您的浏览器不支持内联SVG(Sorry ...
- 图片转svg标注_使用psd.js将PSD转成SVG -- 基础篇(文字图片)
转载至微信公众号:方凳雅集 背景 随着发展,活动会场页面的题图运营需要线上模板化,而自研的导购素材制作平台接入了海棠-创意中心,通过平台能力,将素材模板化,并且通过配置化的方式生成多种场景化,个性化的 ...
- 把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬 让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
最新文章
- C++ MFC常用函数(转)
- 2017/Province_Java_B/2、纸牌三角形
- Java 字符,整型,字符串三者转换
- 3招seo技巧让你把关键词做进百度前三
- 动态计算未知盒子的高度
- qml demo分析(clocks-时钟)
- socket和URLConnection
- eclipse java 源代码,java – 下载Eclipse源代码
- 淘宝现重大BUG,是程序员报复?官方回应
- paip.提升效率---质量控制--代码风格模板化
- 视频教程-CCNA趣味实战语音视频课程--企业VoIP组网实验-思科认证
- 变频器基础:变频器工作原理与常用功能
- java get set怎么用_JAVA get set用法
- Oracle中的SQL函数(全)
- Java:基础 :集合和迭代器
- Unknown rule function-calc-no-invalid.Stylelint(function-calc-no-invalid)
- JavaC++题解与拓展——leetcode398.随机数索引【水塘抽样学习】
- bzoj1008题解
- Python 源码学习:类型和对象
- sja1000编程c语言,基于51单片机SJA1000 CAN通讯实现(C语言程序)
热门文章
- 不用无限手套,人人都能开发BI系统
- Oracle BI系统排名?Oracle BI办公系统怎么选?什么是用户口碑最好的Oracle BI系统?
- 打印服务自动停止的解决方法
- 滨州智能dcs系统推荐_dcs系统厂家推荐
- 互联网晚报 | 7月27日 星期三 | 微信安装包11年膨胀575倍;阿里申请香港纽约双重主要上市;苹果应用商店被曝大量色情应用...
- python微信语音转发方法_最全的微信语音转发方法,最简单的方式大家已经帮你选出来了...
- latex_列表和表格环境_给tabular加lable标签问题
- 【托马斯微积分】(12版)阅读笔记2:极限
- 三菱plcascll转换16进制_三菱ASCII码指令
- 老卫带你学---keras中文文档