`

xhEditor,读取textarea的value值,取不到最新编辑结果

阅读更多
在一个编辑框中,利用xhEditor,对立面的值进行修改,在前台利用javascript进行校验是,取到的都是修改前的值,而在提交之后,到后台得到的确实是修改之后的新值,这就造成了前端无法验证当前是否为空的问题。
在网上找了好多关于xhEditor的问题,加上几个同学不停地调试,最终解决了这个问题。
首先,xhEditor是一个基于JQuery开发的插件,只能利用JQuery来进行dom操作才行,另外,xhEditor默认会在textarea所在的form对象中绑定onsubmit事件,当用户点击submit按钮时,xhEditor就会将最新结果同步回textarea,随后随表单中的其它表单项一同提交到服务端脚本。因此,如果在onsubmit事件之前,用jquery来取值,是取不到最新编辑的值。
综上所述,要利用jquery来绑定form表单的submit事件,
进行绑定之前最终要的一点是,绑定代码必需在xhEditor初始化代码后面,也就是说在xhEditor把值回传后再读取,此后在相应绑定的函数中读取textarea的value值,才会是最新编辑结果,初始化代码一般是
$('#myTextarea').xheditor({tools:'full',skin:'default',showBlocktag:true,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://xheditor.com/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png"});

或者为在程序中的
<textarea id="myTextarea" rows="50" cols="75" label="内容" name="content" Class="xheditor {skin:'o2007blue',html5Upload:false,upMultiple:'1',upImgUrl:'noDectestUpload.html',upImgExt:'jpg,jpeg,gif,bmp,png',upLinkUrl:'noDectestUpload.html',upLinkExt:'zip,rar,txt,docx,doc,xls,xlsx,pdf',tools:'simple'}">content</textarea>

即如下所示的绑定form的submit事件的代码,必须在上述的xhEditor初始化代码之后,在写:
<script type="text/javascript">
$(document).ready(function(){
  $("form").submit(function(e){
     $("myTextarea").val();
    alert("取值进行校验");
  });
});
</script>

分享到:
评论

相关推荐

    Xheditor网页文本编辑器

    **Xheditor网页文本编辑器**是一款常用的在线文本编辑器,尤其适合初学者进行学习和实践。它提供了丰富的文本编辑功能,使得用户可以在网页上实现类似Word的编辑体验,广泛应用于论坛、博客、CMS(内容管理系统)等...

    HTML 在线编辑xheditor

    - **版本更新**:保持编辑器的版本更新,以获取最新的功能和修复已知问题。 总结,xheditor是一个功能强大且易于使用的HTML在线编辑器,适合各种Web应用中的文本编辑需求。通过深入理解和实践,开发者可以充分利用...

    xheditor 在线编辑器

    尽管XHEditor的最新版本停留在1.1.4,但其稳定性和实用性依然受到许多开发者的青睐。 总的来说,XHEditor是一个实用且易于集成的在线编辑器,尤其适合那些希望在网站或应用中提供富文本编辑功能的开发者。其简洁的...

    xheditor文本编辑器插件制作html编辑器使用代码

    使用xheditor时,首先需要从官方网站下载最新版本的压缩包,解压后将xheditor目录放置于项目中合适的位置。然后在HTML文件中通过`&lt;script&gt;`标签引入xheditor.js文件,同时设置编辑器容器的ID,例如: ```html ...

    很好用的ajax在线编辑器xheditor

    XHEditor是一款功能丰富的JavaScript富文本编辑器,主要用于网页中的内容编辑,支持Ajax方式提交编辑内容。它以其便捷性、易用性和高度可定制性在Web开发领域得到了广泛应用。XHEditor的设计理念是提供一个简单且...

    最好最轻便的编辑器xheditor简易配置实例

    XHEditor通过AJAX将文件发送到此脚本,然后由服务器进行保存和返回处理结果。 在XHEditor的配置中,你需要指定上传的相关参数,如URL、允许的文件类型等。例如: ```javascript $('#myEditor').xheditor({ ...

    xhEditor在线编辑器完整实例

    xhEditor是一款功能丰富的JavaScript富文本在线编辑器,它提供了许多高级特性,使得网页内容的编辑变得更加便捷和直观。这款编辑器适用于各种Web应用程序,如论坛、博客、CMS(内容管理系统)等,允许用户以类似Word...

    最新版本xheditor-v1.2.2

    最新版本XHEditor-v1.2.2带来了多项优化和改进,提升了用户体验和稳定性,是开发人员构建动态网站内容编辑功能的理想选择。 ### 一、XHEditor的基本特性 1. **轻量级**: XHEditor体积小巧,加载速度快,减少对...

    xheditor-1.1.14

    说明:通过本参数,在非标准submit提交环境下,比如AJAX提交,可以由用户点击提交按钮以触发编辑器最新值的同步 备注:v1.1.7新添加 onPaste:剪切板粘贴回调函数 参数值:用户粘贴后需要执行的函数 说明:此函数...

    xheditor实例

    【xheditor实例】是一个基于JavaScript的开源富文本编辑器,它提供了丰富的功能,使得网页开发者可以方便地在网页上创建具有WYSIWYG(所见即所得)效果的文本编辑区域。xheditor适用于博客、论坛、CMS等需要用户输入...

    xheditor文本编辑器

    Fckeditor太大,加载很慢。于是xheditor便开始出现在人们的视野里。可能你还不知道xheditor是什么,其实你...目前,创络科技正致力于整合优化后的xheditor到我们的后台系统,使客户可以更加容易、快速的编辑网站内容。

    xheditor-1.1.7 编辑器插件

    xheditor-1.1.7 编辑器插件 包含xheditor所含关键文件及jquery,导入web工程即可使用

    xheditor 文本编辑器插件

    xheditor是一款广泛应用于Web开发中的文本编辑器插件,专为网页内容的创建和编辑提供便利。这款工具允许用户在浏览器环境中实现类似于Word的文本处理体验,极大地提升了网页上的文字编辑效率和用户体验。 一、...

    xheditor 编辑器

    **xheditor编辑器详解** xheditor是一款开源的JavaScript富文本编辑器,它为网页开发者提供了方便快捷的文本编辑解决方案。在Web应用中,用户往往需要输入大量文本,而HTML的原始输入框只能处理纯文本,无法满足...

    xhEditor网页编辑器(基于jQuery技术)

    xhEditor是一款基于jQuery库的开源网页编辑器,它为网站开发者提供了强大的文本编辑功能,让用户可以在网页上实现类似Word的富文本编辑体验。这款编辑器设计简洁、易用,支持多种格式的文本输入,包括字体、字号、...

    xheditor编辑器实现图片上传

    XHEditor接收到文件名后,将其插入到编辑器内容中,从而完成图片的上传与显示。 总的来说,实现XHEditor编辑器的图片上传功能,需要结合前端的XHEditor配置和后端的文件处理逻辑。理解这一过程有助于我们在实际开发...

    xheditor-1.1.8 简易在线编辑器

    3. **初始化编辑器**:通过JavaScript调用xheditor的初始化函数,将`&lt;textarea&gt;`转化为富文本编辑器。 ```html &lt;textarea id="myEditor"&gt;&lt;/textarea&gt; $(function(){ $('#myEditor').xheditor({tools:'full'}); ...

    xheditor jsp完整实例

    【xheditor jsp完整实例】是一个基于XHEditor的Web富文本编辑器的应用示例,主要用于在Java服务器页面(JSP)上实现用户友好的文本编辑功能。XHEditor是一款开源的JavaScript富文本编辑器,它提供了丰富的API和...

    xheditor 在线编辑器jsp/ava实现版

    **xheditor 在线编辑器** 是一个广泛应用于Web应用程序中的富文本编辑器,它提供了类似于桌面文字处理软件的功能,使用户能够在网页上进行复杂的文本编辑、格式化和媒体插入。这款编辑器以其易用性、灵活性和强大的...

    xhEditor编辑器

    例如:&lt;textarea name="content" class="xheditor"&gt;test&lt;/textarea&gt;经过以上步骤,你就已经成功的将xhEditor编辑器安装在你的网页中。若需要学习更多xhEditor编辑器的使用技术,请参阅:xhEditor进阶使用。

Global site tag (gtag.js) - Google Analytics