|
|
<!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;">
|
|
|
<p>
|
|
|
<ol>
|
|
|
<li>
|
|
|
这是一段用以测试的文字。
|
|
|
</li>
|
|
|
</ol>
|
|
|
</p>
|
|
|
</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',
|
|
|
// 添加上传参数
|
|
|
extraFileUploadParams : {
|
|
|
name: "RockYang",
|
|
|
sex: "Man"
|
|
|
},
|
|
|
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>
|
|
|
|
