-
Notifications
You must be signed in to change notification settings - Fork 4
/
demo.html
126 lines (122 loc) · 4.36 KB
/
demo.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>iceEditor-演示DEMO</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body style="margin: 100px;">
<div style="text-align: center;font-size:20px;margin-bottom: 20px;">演示DEMO</div>
<div style="text-align: center;font-size:15px;margin-bottom: 20px;">官方：<a href="https://www.iceui.net/iceEditor.html" target="_blank">https://www.iceui.net/iceEditor.html</a></div>
<div id="content"></div>
<script type="text/JavaScript" src="src/iceEditor.js"></script>
<script type="text/JavaScript" src="html-docx.js"></script>
<script>
//自定义编辑器菜单
var e = new ice.editor("content");
e.uploadUrl = "src/upload.php";
e.pasteText = false;
e.screenshot = true;
e.screenshotUpload = true;
//edit.menu=['fontSize','foreColor','bold','italic','underline','strikeThrough','line','justifyLeft','justifyCenter','justifyRight','line','table','insertImage','video'];
//下拉菜单类型
e.plugin({
menu:'代码语言',
name:'codeLanguages',
dropdown:`
<div class="iceEditor-codeLanguages" style="padding:10px 20px;">
<div>iceCode代码高亮</div>
<select>
<option disabled selected>代码语言</option>
<option value ="html">HTML/XTML</option>
<option value ="css">CSS</option>
<option value ="js">JS</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="java">JAVA</option>
<option value="sql">SQL</option>
<option value="go">GO</option>
<option value="cpp">C++</option>
<option value="csharp">C#</option>
<option value="c">C</option>
</select>
</div>`,
success:function(e,z){
//获取content中的按钮
var select = e.getElementsByTagName('select')[0];
//设置点击事件
select.onchange=function(){
var str = z.getSelectHTML().replace(/<\s*\/p\s*>/ig,"\n").replace(/<[^>]+>/g,'').replace(/\n/g,'<br>').trim();
str = str.length?str:' ';
z.element.focus();
var range = z.range.getRangeAt(0);
var frag = range.createContextualFragment('<pre class="iceCode:'+select.value+'">'+str+'</pre>');
var lastNode = frag.firstChild.lastChild;
range.insertNode(frag);
range.setStart(lastNode,0);
range.setEnd(lastNode,0);
range.collapse();
select.getElementsByTagName('option')[0].selected = true;
}
}
});
//function方式
e.plugin({
menu:'function方式',
name:'click',
click:function(e,z){
z.setText('hello world');
}
});
//execCommand命令
e.plugin({
menu:'删除命令',
name:'del',
data:'delete'
});
//下拉菜单类型
e.plugin({
menu:'下拉菜单',
name:'dropdown',
dropdown:'<div class="iceEditor-exec" data="copy" style="padding:10px 20px;">复制选中的文字</div>',
});
//弹出层类型
e.plugin({
menu:'弹窗演示',
name:'popup',
style:'.demo-p{margin-bottom:10px}.demo-button{padding:0 10px}',
popup:{
width:230,
height:120,
title:'我是一个demo',
content:'<p class="demo-p">在光标处插入hello world!</p> <button class="demo-button" type="button">确定</button>',
},
success:function(e,z){
//获取content中的按钮
var btn = e.getElementsByTagName('button')[0];
//设置点击事件
btn.onclick=function(){
z.setText('hello world');
//关闭本弹窗
e.close()
}
}
});
e.create();
e.setValue(`<p>本实例js脚本：</p>
<p></p>
<pre class="iceCode:js">var str = 'hello world';<br>console.log(str);<br></pre>
<p></p>
<p><font color="#00b050" size="2">//实例化（传递一个id）</font></p>
<p><font color="#595959" size="2">var edit = new ice.editor("content");</font></p>
<p></p>
<p><font color="#00b050" size="2">//自定义编辑器工具栏菜单（默认展示所有功能）</font></p>
<p><font color="#595959" size="2">edit.menu=["fontSize","foreColor","bold","italic","underline","strikeThrough","line","justifyLeft","justifyCenter","justifyRight","line","table","insertImage"];</font></p>
<p></p>
<p><font color="#00b050" size="2">//编辑器创建</font></p>
<p><font color="#595959" size="2">edit.create();</font></p>`);
</script>
</body>
</html>