forked from wangeditor-team/wangEditor
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
70 lines (60 loc) · 2.26 KB
/
demo.html
File metadata and controls
70 lines (60 loc) · 2.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
<!--引入 fontawesom-4.2.0-->
<link rel="stylesheet" type="text/css" href="fontawesome-4.2.0/css/font-awesome.min.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fontawesome-4.2.0/css/font-awesome-ie7.min.css">
<![endif]-->
<!--引入wangEditor.css-->
<link rel="stylesheet" type="text/css" href="css/wangEditor-1.1.0-min.css">
<style type="text/css">
body{
padding: 0px 10px 0px 10px;
}
</style>
</head>
<body>
<h1>wangEditor demo</h1>
<div id='txtDiv' style='border:1px solid #cccccc; height:240px;'>
<p>欢迎使用<b>wangEditor</b>，当前版本为v1.1.0</p>
<p>请输入内容...</p>
</div>
<div style='margin-top:10px;'>
<button id='btnHtml'>查看html</button>
<button id='btnText'>查看text</button>
<button id='btnHide'>隐藏</button>
<textarea id='textarea' style='width:100%; height:100px; margin-top:10px;'></textarea>
</div>
<!--引入 jquery.js-->
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--引入 wangEditor.js-->
<script type="text/javascript" src='js/wangEditor-1.1.0-min.js'></script>
<script type="text/javascript">
$(function(){
//一句话，即可把一个div 变为一个富文本框！o(∩_∩)o
//其实返回的 $editor 就是一个jquery对象，可以进行任何jquery的操作，例如 $editor.html() ， $editor.text()
var $editor = $('#txtDiv').wangEditor();
//显示 html / text
var $textarea = $('#textarea'),
$btnHtml = $('#btnHtml'),
$btnText = $('#btnText'),
$btnHide = $('#btnHide');
$textarea.hide();
$btnHtml.click(function(){
$textarea.show();
$textarea.val( $editor.html() );
});
$btnText.click(function(){
$textarea.show();
$textarea.val( $editor.text() );
});
$btnHide.click(function(){
$textarea.hide();
});
});
</script>
</body>
</html>