editor.md
Version:
Open source online markdown editor.
119 lines (93 loc) • 4.83 kB
HTML
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>识别和解析 HTML 标签 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
<header>
<h1>识别和解析HTML标签</h1>
<p>HTML tags (filter) decode, You can increase safety by filtering the danger label.</p>
<p>注：虽然此功能能极大地扩展 Markdown 语法，但也面临着安全上的风险，所以默认是不开启的。</p>
<p>Update: 可以通过设置 `settings.htmlDecode = "style,script,iframe|on*"`来实现过滤指定标签及属性的解析，提高安全性；</p>
</header>
<div class="btns">
<button class="filter-btn" exp="true">Unfilter</button>
<button class="filter-btn" exp="style,script,iframe|*">Filter style,script,iframe|*</button>
<button class="filter-btn" exp="style,script,iframe|on*">Filter style,script,iframe|on*</button>
<button class="filter-btn" exp="style,script,iframe|onclick,title,onmouseover,onmouseout,style">Filter style,script,iframe|onclick,title,onmouseover,onmouseout,style</button>
</div>
<div id="test-editormd">
<textarea style="display:none;">#### 开启识别和解析 HTML 标签
配置项：
{
htmlDecode : true // Decode all html tags & attributes
// Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,...
htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
}
#### 示例
##### 上标和下标
上标：X<sup>2</sup>
下标：O<sub>2</sub>
##### 代码块里包含的过滤标签及属性不会被过滤
```html
<style type="text/style">
body{background:red;}
</style>
<script type="text/javscript">
alert("script");
</script>
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe>
```
##### Style
<style>
body{background:red;}
</style>
<style type="text/style">
body{background:red;}
</style>
##### Script
<script>
alert("script");
</script>
<script type="text/javscript">
alert("script");
</script>
##### Events
<div style="color:green;" onclick="alert(1233);" title="div xxxxx">Events</div>
<div style="color:red;" contenteditable onclick="alert(1233);" onmouseover="alert(1233);" onmouseout="alert(1233);" title="div xxxxx">Events</div>
##### 插入Flash
<embed src="http://player.youku.com/player.php/sid/XMzA0MzIwMDgw/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
##### 插入视频
李健《最好不相见》
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe></textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width: "90%",
height: 720,
path : '../lib/',
htmlDecode : true, // Decode all html tags & attributes
// Expression : tagName,tagName,...|attrName,attrName,...
//htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
});
$(".filter-btn").click(function(){
testEditor.config("htmlDecode", $(this).attr("exp"));
});
});
</script>
</body>
</html>