代码拉取完成，页面将自动刷新
<!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>
sdasdass 呵呵。。。 测试空格键
</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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手