大家帮我看看这个div内的值，如何提交给服务器？_PHP代码_论坛

大家帮我看看这个div内的值，如何提交给服务器？

lu***ha 分类：PHP代码人气：857 回帖：5 发布于6年前收藏

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"];
?>

所以，该怎么写代码？

标签：javascript php

讨论这个帖子（5）垃圾回帖将一律封号处理……

Lv5 码农

雪***0 移动开发工程师 6年前#1

直接获取该div内的innerHTML 返回到php接

用ajax 这里使用jq 比较方便

$("btn").click(function(){
    var text = $("div").html();//获取符文本的值
   //这里点击触发ajax提交文本
    $.ajax({
        url:"post.php",
        type:'post',
        data:{fwb:text},//传值
        dataType:'json',
        success:function(data){
        console.log("submit success!")
        }
    })
})

Lv5 码农

zz***25 其它 6年前#2

如果是用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']得到值了

Lv4 码徒

c2***31 交互设计师 6年前#3

上面的方法也可以实现，然后我自己也琢磨了一个方法！下面看看我自己的方法！
1、通过onkeyup实现的，在div编辑域输入文本，同时，构建的textarea文本域也实时显示div编辑域的内容，如下图。

给textarea设置style="display: none;"隐藏就可以了！

然后js代码如下：

<script type="text/javascript">
 function SwapTxt()
  {
      var txt = document.getElementById("eml").innerHTML;
      document.getElementById("lyny").innerHTML=txt;
  }
</script>

就这样简单实现！

这也是一种方法！

Lv7 码师

15***by 产品经理 6年前#4

var data=document.getElementById('content').innerHTML;

Lv2 入门

SW***CH 职业无 6年前#5

通过from提交表单，到处理页面也是可以的

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取