javascript - 大家帮我看看这个div内的值，如何提交给服务器？
本文介绍了javascript - 大家帮我看看这个div内的值，如何提交给服务器？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1、我在开发一个简约的富文本编辑器，目前已经实现了编辑器的一些功能
2、我这个富文本编辑器是用div来构建编辑域的，优点是可以插入任何元素（文本、图片、视频、音频等都可以实时预览）
3、问题是，div不属于表单，无法直接提交给php页面接收div里面的数据
4、比如我的表单接收页面是test.php，我想将div里的内容通过html代码的方式提交过来。
下面是div编辑器的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>富文本编辑器</title>
</head>
<body>
<div id="content" style="height: 100px;width: 300px;border:1px solid black" contenteditable></div>
<button data-name="justifyCenter">居中</button>
<button data-name="justifyLeft">左对齐</button>
<button data-name="justifyRight">右对齐</button>
<button data-name="indent">添加缩进</button>
<button data-name="outdent">去掉缩进</button>
<button data-name="fontname" data-value="宋体">宋体</button>
<button data-name="fontsize" data-value="5">5大字体</button>
<button data-name="fontsize" data-value="6">6大字体</button>
<button data-name="fontsize" data-value="7">7大字体</button>
<button data-name="forecolor" data-value="red">红色字体</button>
<button data-name="backColor" data-value="lightgreen">浅绿背景</button>
<button data-name="bold">加粗</button>
<button data-name="italic">斜体</button>
<button data-name="removeFormat">清空格式</button>
<button data-name="insertimage" data-value="http://files.cnblogs.com/files/xiaohuochai/zan.gif">插入图像</button>
<button data-name="createlink" data-value="www.cnblogs.com/xiaohuochai">增加链接</button>
<button data-name="unlink">删除链接</button>
<!--富文本控制-->
<script>
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
document.execCommand(this.getAttribute('data-name'));
document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value'));
}
}
</script>
</body>
</html>上面代码还没有提交按钮，因为我只构建了富文本编辑器的一些功能（左对齐，居中对齐、右对齐，文字大小，颜色等之类的）
如上图，我只是在div编辑域输入了文字，文字可以通过下面的按钮加格式。
现在想通过一个提交按钮，将上面这段文字的html代码提交给test.php。
test.php代码
<?php
header("content-type:text/html;charset=utf8");
echo $_POST["zhengwen"];
?>所以，该怎么写代码？
解决方案
如果是用AJAX方式的话， 楼上的朋友已经说了， 我说说表单提交方式的吧。
首先现在
form表单里写一个隐藏域<input type="hidden" name="zhengwen" value="" />
然后监听表单提交事件
$("#form").submit(function(){
// 可以过滤一下是否为空
// 同步你 DIV 的值到隐藏域
var content = $("#content").html();
$("input[name=zhengwen]").val(content);
// 提交
return true;
});这样子你再后台就可以通过$_POST['content']得到值了
这篇关于javascript - 大家帮我看看这个div内的值，如何提交给服务器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
