在tinymce中使用css个script

tinymce的编辑器中css和script默认是不起作用的。(编辑器主要面向写文章使用,考虑到xss攻击,默认是不启用的)

需要修改tinymce.js中几行代码,可以使其起作用。

1、SaxParser.parse中,关于script标签。

L11732- L11758注释掉

这一部分的意思是,在Start element处遇见script等标签,直接跳过,不进行解析(不追加到DOM中)。

这个函数的调用,一般在editor.setContent中使用(根据传递的HTML string,来对页面的HTML进行设置)。

2、另一个地方就是Schema(L10352)的修改

这一部分是解析模式设置,就是遇见比如div、span等,怎么处理(属性过滤、添加。是不是block,比如span的父节点不是block元素的话,就默认加个p标签等等)。

把L10636(delete schema.script;//不解析script)注释掉。

在L10448中加入‘’script link style‘’,意思是把这些标签解析成block。(你不希望自己的script外面自动加一层p标签)

至此,在code功能中,设置好要显示的内容后,script的功能是加载不进来的。但在preview是能看到css和script效果的。

不同:

code的html设置:elm.html(html);

preview的html设置:

测试部分:

原生的innerHtml是不起作用的,而jquery.html是起作用的。想要起作用,可以使用jquery的方法。

tinymce原装插件源码分析(七)-使能css、script的更多相关文章

  1. tinymce原装插件源码分析(一)-hr

    tinymce简介 tinymce是一款能方便无限扩展的网页富文本编辑器. tinymce原装插件已经十分丰富,对于文本编辑(blog等文章)是绰绰有余,但是应对一些复杂的应用,比如在上面开发html ...

  2. tinymce原装插件源码分析(五)-searchreplace

    searchreplace 功能:查找和替换 代码注释见: https://www.xunhanliu.top/static/js/tinymce/plugins/searchreplace/plug ...

  3. tinymce原装插件源码分析(四)-fullscreen

    fullscreen 作为一款文本编辑器,全屏功能是非常有必要的.在插件中主要是修改一些css style和触发resize事件. style问题(反例): 见github源码:https://git ...

  4. tinymce原装插件源码分析(三)-code

    code: 用于显示源码.主要包含一个弹框.设置显示内容以及内容的更新. function showDialog() { var win = editor.windowManager.open({ t ...

  5. tinymce原装插件源码分析(二)-link

    link 功能描述如下: 单纯放置光标: 1.如果光标放到了<a>上,读取a标签的内容,并弹框显示,确定的时候,更新当前a标签. 2.否则,就创建弹框,确定的时候,按照参数添加a标签. s ...

  6. tinymce原装插件源码分析(六)-preview

    priview 此插件文件结构比较简单,按钮注册.editor.windowManager.open.窗口出现之前的渲染数据的准备.页面代码的准备. 注意: 1.preview的默认宽高设置: 2.c ...

  7. Mybatis源码学习第七天(插件源码分析)

    为了不把开发和源码分析混淆,决定分开写; 接下来分析一下插件的源码,说道这里老套路先说一个设计模式,他就是责任链模式 责任链模式:就是把一件工作分别经过链上的各个节点,让这些节点依次处理这个工作,和装 ...

  8. ABP源码分析七:Setting 以及 Mail

    本文主要说明Setting的实现以及Mail这个功能模块如何使用Setting. 首先区分一下ABP中的Setting和Configuration. Setting一般用于需要通过外部配置文件(或数据 ...

  9. vuex 源码分析(七) module和namespaced 详解

    当项目非常大时,如果所有的状态都集中放到一个对象中,store 对象就有可能变得相当臃肿. 为了解决这个问题,Vuex允许我们将 store 分割成模块(module).每个模块拥有自己的 state ...

随机推荐

  1. Linux-workqueue讲解

    =============  参考  ============= 代码:linux-3.10.65/kernel/workqueue.c =============================== ...

  2. JavaScript进阶【五】利用JavaScript实现动画的基本思路

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

  3. 【Tool】Augmentor和imgaug——python图像数据增强库

    Augmentor和imgaug--python图像数据增强库 Tags: ComputerVision Python 介绍两个图像增强库:Augmentor和imgaug,Augmentor使用比较 ...

  4. redis各数据类型应用概述

    前言 redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存.亦可持久化的日志型.key-value数据库,并提供多种语言的API. 它是内存存储的数据结构服务器,可用作数据库.高速缓存 ...

  5. php strtotime 同样的函数为何在不同的地方输出的结果不同?

    方法1:调用函数 date_default_timezone_set('Asia/Shanghai'); // 如果是中国的话 方法2:设置php.ini 中data.timezone [Date] ...

  6. Spring事务管理 与 SpringAOP

    1,Spring事务的核心接口 Spring事务管理的实现有许多细节,如果对整个接口框架有个大体了解会非常有利于我们理解事务,下面通过讲解Spring的事务接口来了解Spring实现事务的具体策略.  ...

  7. 导入项目后下载jar包问题理解

    1.导入,然后你下载的jar包,jar下载成功,并不代表你项目里的代码就能用这个jar包了. 你必须还要本地添加进classpath.必须手动添加进类路径 2.总结就是:下载jar包是下载jar包,添 ...

  8. Hit 2255 Not Fibonacci

    今天下午刚起来眼睛就比較涨,,并且还有点恶心,唉.结果一直不在状态.并且这个题太坑了.. .. 点击此处即可传送 Hit 2255 Maybe ACMers of HIT are always fon ...

  9. POJ1274 The Perfect Stall 二分图,匈牙利算法

    N头牛,M个畜栏,每头牛仅仅喜欢当中的某几个畜栏,可是一个畜栏仅仅能有一仅仅牛拥有,问最多能够有多少仅仅牛拥有畜栏. 典型的指派型问题,用二分图匹配来做,求最大二分图匹配能够用最大流算法,也能够用匈牙 ...

  10. 用jquery ajax做的select菜单,选中的效果

    //用server端语言赋值给js变量     var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>'     $(fun ...