//编辑器里代码模式下的代码
<scripttype="text/javascript">
//my code....
</script>
//编辑器里可视化模式下的代码
<scripttype="text/javascript">
// <![CDATA[
//my code....
// ]]>
</script>

  

最近在使用Wordpress做一个网站项目,需要在后台编辑器里添加自定义的JS脚本和CSS

在编辑器里添加好后,发现在浏览器里JS脚本执行有问题并且CSS的脚本直接被WordPress保存的时候过滤掉了
经过排查发现原因是Wordpress默认的TinyMCE在从代码模式切换到可视化模式的时候对脚本时行了处理
更无耻的是CSS的脚本直接被删除了
 
wiki CDATA上的说明

CDATA sections in XHTML documents are liable to be parsed differently by web browsers if they render the document as HTML, since HTML parsers do not recognise the CDATA start and end markers, nor do they recognise HTML entity references such as &lt; within <script> tags. This can cause rendering problems in web browsers and can lead to cross-site scripting vulnerabilities if used to display data from untrusted sources, since the two kinds of parser will disagree on where the CDATA section ends.

Since it is useful to be able to use less-than signs (<) and ampersands (&) in web page scripts, and to a lesser extent styles, without having to remember to escape them, it is common to use CDATA markers around the text of inline <script> and <style> elements in XHTML documents. But so that the document can also be parsed by HTML parsers, which do not recognise the CDATA markers, the CDATA markers are usually commented-out, as in this JavaScript example:

 
所以正确的写法应该是这样子的
//JavaScript example:
<script type="text/javascript">
//<![CDATA[
//mycode
document.write("<");
//]]>
</script> //CSS example:
<style type="text/css">
/*<![CDATA[*/
//my code
body { background-image: url("marble.png?width=300&height=300")}
/*]]>*/
</style>
 
参考:

如何在编辑器里添加CSS或JS代码的更多相关文章

  1. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  2. Atom编辑器折腾记_(13)JS代码智能提示补全(插件:atom-ternjs)

    题外话 官方正式版尽管内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 可是针对于某些语言来说,还是有些不足的-.当中JS的补全上就明显不足了-所以须 ...

  3. 用python给html里的css及js文件链接自动添加版本号

    传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sy ...

  4. require.js添加css文件实现代码:css.min.js

    define( function () { if (typeof window == "undefined")return { load: function (n, r, load ...

  5. Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)

    题外话 这款插件就比較重量级了-.用熟悉了写原生JS的效率要提升非常多--并且,不仅支持JS还包括了nodejs snippet javascript-snippets 插件作者: zenorocha ...

  6. 测试博文中添加可执行JS代码

    昨天申请开通了博客园的JS权限,今天来看看效果. 测试执行JS 测试执行JS // 运行

  7. 图片的滑动缩放html、css、js代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Django中简单添加HTML、css、js等文件(非正规添加,适合小白)

    Django中简单添加HTML.css.js等文件 首先申明下自己的环境, python版本3.65(亲测3.7版本有毒,没解决掉!) Django版本1.11.15(版本比较成熟,也可以用最新的版本 ...

  9. 配置grunt进行css、js的检查、合并和压缩

    现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档 ...

随机推荐

  1. android.os.handler(转)

    android.os.handler相关知识整理 Handler在android里负责发送和处理消息.它的主要用途有: 1)按计划发送消息或执行某个Runnanble(使用POST方法): 2)从其他 ...

  2. 收集的MySQL的面试题分享给大家

    1.怎样登陆mysql数据库 mysql -u username -p 2.怎样开启/关闭mysql服务 service mysql start/stop 3.查看mysql的状态 service m ...

  3. Revit API批量布置函数doc.Create.NewFamilyInstances();

    start ] ;);                 if (xyzStart.X > pb.Max.X || xyzStart.Y < pb.Max.Y)                ...

  4. WinForm多线程实现HTTP网络检测工具

    一.背景描述与课程介绍 明人不说暗话,跟着阿笨一起玩WinForm.本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高 ...

  5. C++获取和设置时区

    一.     获取当前系统时区信息 使用API函数GetTimeZoneInformation可以获得当前时区的相关信息,函数原型为 DWORD GetTimeZoneInformation( LPT ...

  6. Android:intent的基础

    只有一个活动的应用也太简单了吧?没错,你的追求应该更高一点.不管你想创建多少 个活动,方法都和上一节中介绍的是一样的.唯一的问题在于,你在启动器中点击应用的图 标只会进入到该应用的主活动,那么怎样才能 ...

  7. ZServer4D开源项目

    ZServer4D开源项目 ZServer4D 是一套从商业项目剥离而出的云服务器中间件,可以承载百万级的分布式负载服务,并且支持IoT及内网穿透. 作者将它开源了 https://github.co ...

  8. NSZombie 详解 -僵尸对象

    1.什么是僵尸对象? 简而言之,就是过度释放的对象. 2.僵尸对象有什么特点? 如果一个对象a被变成了僵尸对象,那么,在进行下面的判断时,a是会被系统当成一个对象来进行判断的.但是,如果你使用a进行其 ...

  9. 【伊利丹】Hadoop2.0 NN HA实验记录

    1.关于Hadoop2.2.0中HA的介绍 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDUxMjEyNA==/font/5a6L5L2T/fo ...

  10. h5语音录制及上传(Java版语音聊天系统)

    Since Chrome version 47, Voice Recording works only on HTTPS sites 目前基于webikit(谷歌之类的webikit)和Gecko(F ...