富文本编辑HandyEditor怎么实现form表单提交

 剑鱼论坛 发表于 2020年01月11日 JS/jQuery  1460
剑鱼论坛
LV 6 高中
最后在线:9小时前
加入时间:314天前
主帖:89  跟帖:48

富文本编辑HandyEditor是鲶鱼cms的作者开发的一款前端页面的富文本编辑器,有着小巧易用,方便灵活的特点,是一款轻量型的富文本编辑器。

我们在编辑完文本后需要把内容上传到后端服务器,可以有两种方法选择:

一种是使用ajax方法,Handyeditor有一个函数可以实现在ajax方法下面获取编辑器的内容,如下:

he.getHtml();

使用上面的函数调用后,我们就能够获取编辑器里面的内容了。

另一种是直接使用form表单上传,也是传统的表单上传方式,下面我们着重来看一下,Handyeditor怎么实现页面表单上传,作为例子,我们假设有以下的表单代码:

<form action="" method="post">
<textarea id="editor" name="editor" rows="5" style="display: none;"></textarea>
<input type="submit" value="Submit" id="submit">
</form>

这个表单很简单,只有一个编辑框,我们作为例子来演示,所以代码尽量简单点,实际使用您可以根据情况增加更多的input输入框。

现在我们编辑完文本后需要通过form表单直接上传的话,该怎么实现?

Handyeditor有另一个函数用于把编辑器里面的内容同步到textarea里面,就是:

he.sync();

那么,我们怎么来使用呢?

我们需要给提交按钮绑定一个点击事件,如下代码:

$("#submit").click(function(){
he.sync();
});

这里的代码我们是使用jQuery的代码来实现的,请根据您的实际情况写代码。

上面的代码表示,当我们点击提交按钮的时候,就把富文本Handyeditor的已经编辑内容同步到表单里面。这样就可以实现使用普通的form表单提交了。

有了上面的简单代码,当您点击提交按钮后就可以把编辑器中的内容上传到服务器后台了。

  • 1条回复 1460次浏览
  • 2楼
     371b82 发表于 139天前
    初学者 ,编辑器没有同步到textarea
    371b82
    LV 1 出生
    最后在线:139天前
    加入时间:139天前
    主帖:0  跟帖:1
论坛主帖
155
论坛跟帖
129
在线访客
0
今日主帖
0
今日跟帖
0
今日注册
1
79
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
2
XzA=
1
© 2019 - 2020 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html
0
剑鱼论坛