1）调用kindeditor图片上传：
<script>
//这里是编辑器
var editor;
KindEditor.ready(function (K) {
editor = K.create(‘textarea[name="content"]‘, {
allowFileManager: true,
resiseMode: 1
});
//这里是监听按钮点击事件 然后在初始化点击按钮弹窗上传图片的基本配置
K(‘#image‘).click(function () {
editor.loadPlugin(‘image‘, function () {
editor.plugin.imageDialog({
imageUrl: K(‘#url‘).val(),
clickFn: function (url, title, width, height, border, align) {
K(‘#url‘).val(url);
editor.hideDialog();
}
});
});
});
});
</script>
表单代码
<tr>
<td>图片：</td>
<td>
<input type="text" id="url" name="img" readonly="readonly" value=""/>
<input type="button" id="image" value="选择图片"/>
</td>
</tr>
2）调用kindeditor编辑器：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script charset="utf-8" src="./ke/kindeditor.js"></script>
<script>
var editor;
KindEditor.ready(function (K) {
editor = K.create(‘textarea[name="content"]‘, {
allowFileManager: true
});
});
</script>
<body>
<form action="test.php" method="post">
<table border="1px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td><textarea name="content" cols="5" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" value="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
3）jQuery获取kindedit中的内容：
<script>
$(function(){
$(‘#btnOk‘).bind(‘click‘,function(){
var name=$(‘#name‘).val();
var remark=$(document.getElementsByTagName(‘iframe‘)[0].contentWindow.document.body).html();
var data={
name:name,
remark:remark
}
$.post(‘__URL__/add‘,data,function(msg){
if(msg==1){
alert(‘录入成功！‘);
$(‘#name‘).val("");
$(document.getElementsByTagName(‘iframe‘)[0].contentWindow.document.body).html(""); //获取编辑器内容
}else{
alert(‘录入失败‘);
}
});//post结束
});//click结束
});
</script>
时间： 2024-10-06 17:34:41