-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
188 lines (175 loc) · 6.71 KB
/
index.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>NKeditor 在线编辑器 PHP demo</title>
<link href="libs/bootstrap/bootstrap.min.css" rel="stylesheet">
<style>
.tab-pane form {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container" style="padding-top: 20px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#light" aria-controls="home" role="tab" data-toggle="tab">精简版</a></li>
<li role="presentation"><a href="#default" aria-controls="profile" role="tab" data-toggle="tab">全功能版</a></li>
<li role="presentation"><a href="#block" aria-controls="messages" role="tab" data-toggle="tab">雅黑主题</a></li>
<li role="presentation"><a href="#grey" aria-controls="messages" role="tab" data-toggle="tab">深灰主题</a></li>
<li role="presentation"><a href="#blue" aria-controls="settings" role="tab" data-toggle="tab">淡蓝主题</a></li>
<li role="presentation"><a href="#classic" aria-controls="settings" role="tab" data-toggle="tab">经典主题</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="light">
<form name="example" method="post">
<textarea name="content1" style="width:900px;height:500px;visibility:hidden;"></textarea>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="default">
<form name="example" method="post">
<textarea name="content2" style="width:900px;height:500px;visibility:hidden;"></textarea>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="block">
<form name="example" method="post">
<textarea name="content3" style="width:900px;height:500px;visibility:hidden;"></textarea>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="grey">
<form name="example" method="post">
<textarea name="content4" style="width:900px;height:500px;visibility:hidden;"></textarea>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="blue">
<form name="example" method="post">
<textarea name="content5" style="width:900px;height:500px;visibility:hidden;"></textarea>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="classic">
<iframe frameborder="0" src="old.html" height="580" width="950"></iframe>
</div>
</div>
<div class="row container text-left" style="margin-top: 20px;">
<button class="btn btn-primary" id="btn">获取编辑器内容</button>
</div>
</div>
<script charset="utf-8" src="NKeditor-all.js"></script>
<!-- 如果你不需要使用批量图片上传，涂鸦功能和文件管理功能，就不需要引入 jquery -->
<script charset="utf-8" src="libs/jquery.min.js"></script>
<!-- JDialog是一款优秀的漂亮，轻量级的js弹出框插件 不是必须引入的，如果不引入则使用默认的 window.alert() 来弹出提示信息 -->
<script charset="utf-8" src="libs/JDialog/JDialog.min.js"></script>
<script src="libs/bootstrap/bootstrap.min.js"></script>
<script>
KindEditor.ready(function(K) {
K.create('textarea[name="content1"]', {
uploadJson : K.basePath+'php/qiniu/upload_json.php',
fileManagerJson : K.basePath+'php/qiniu/file_manager_json.php',
dialogOffset : 0, //对话框距离页面顶部的位置，默认为0居中，
allowFileManager : true,
items : ['source','formatblock', 'fontname', 'fontsize','forecolor','justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'bold', 'italic', 'underline',
'lineheight', 'removeformat','code', 'quote', 'plainpaste','image', 'table', 'hr', 'pagebreak','link', 'unlink',
'preview','about'
],
afterChange : function() {
this.sync();
},
themeType : "primary", //主题
//错误处理 handler
errorMsgHandler : function(message, type) {
try {
JDialog.msg({type:type, content:message, timer:2000});
} catch (Error) {
alert(message);
}
}
});
K.create('textarea[name="content2"]', {
uploadJson : K.basePath+'php/qiniu/upload_json.php',
fileManagerJson : K.basePath+'php/qiniu/file_manager_json.php',
dialogOffset : 0, //对话框距离页面顶部的位置，默认为0居中，
allowFileManager : true,
allowImageUpload : true,
allowMediaUpload : true,
//cssPath : [K.basePath+'plugins/code/prism.css'], //网编辑器中插入自定义的 css
//jsPath: ['http://www.r9it.com/assets/themes/twitter/js/jquery-1.11.1.min.js'], // 插入自定义的脚本
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
K('form[name=example]')[0].submit();
});
},
showHelpGrid: true, // 是否显示输入辅助线
themeType : "primary", //主题
//错误处理 handler
errorMsgHandler : function(message, type) {
try {
JDialog.msg({type:type, content:message, timer:2000});
} catch (Error) {
alert(message);
}
}
});
// black theme
K.create('textarea[name="content3"]', {
uploadJson : K.basePath+'php/default/upload_json.php',
fileManagerJson : K.basePath+'php/default/file_manager_json.php',
allowFileManager : true,
allowImageUpload : true,
allowMediaUpload : true,
themeType : "black", //主题
//错误处理 handler
errorMsgHandler : function(message, type) {
try {
JDialog.msg({type:type, content:message, timer:2000});
} catch (Error) {
alert(message);
}
}
});
K.create('textarea[name="content4"]', {
uploadJson : K.basePath+'php/default/upload_json.php',
fileManagerJson : K.basePath+'php/default/file_manager_json.php',
allowFileManager : true,
allowImageUpload : true,
allowMediaUpload : true,
themeType : "grey", //主题
//错误处理 handler
errorMsgHandler : function(message, type) {
try {
JDialog.msg({type:type, content:message, timer:2000});
} catch (Error) {
alert(message);
}
}
});
K.create('textarea[name="content5"]', {
uploadJson : K.basePath+'php/default/upload_json.php',
fileManagerJson : K.basePath+'php/default/file_manager_json.php',
allowFileManager : true,
allowImageUpload : true,
allowMediaUpload : true,
themeType : "blue", //主题
//错误处理 handler
errorMsgHandler : function(message, type) {
try {
JDialog.msg({type:type, content:message, timer:2000});
} catch (Error) {
alert(message);
}
}
});
});
$('#btn').click(function () {
alert($('textarea[name="content1"]').val());
});
</script>
</body>
</html>