讲师中心 微信公众号
AI工具推荐 视频效率加速

如何利用js取得eWebEditor编辑器的内容

星浩吖_9039

星浩吖_9039

发布时间:2016-05-25 17:11:51

|

1755人浏览过

|

来源于php中文网

原创

用javascript取控件的值本来是一件简单的事却被ewebeditor搞的很不方便,导致很多初学者,不知道该如何获取。在分析之前先把我们习惯性的取值方法写出来。

<HTML>  
  
<HEAD>  
  
<TITLE>eWebEditor : 标准调用示例</TITLE>  
  
<META http-equiv=Content-Type content="text/html; charset=gb2312">  
  
<link rel='stylesheet' type='text/css' href='example.css'>  
  
<script>  
  
    function validateForm(){  
  
  
        if(document.getElementById("content1").value!=""){  
  
            document.getElementById("myform").submit();  
  
        }else{  
  
            alert("空");  
  
        }  
  
    }  
  
</script>  
  
</HEAD>  
  
<BODY>  
  
<FORM method="post" name="myform" action="rs.jsp">  
  
<TABLE border="0" cellpadding="2" cellspacing="1">  
  
<TR>  
  
    <TD>编辑内容:</TD>  
  
    <TD>  
  
        <INPUT type="hidden" name="content1" >  
  
        <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" 
        scrolling="no" width="550" height="350"></IFRAME>  
  
    </TD>  
  
</TR>  
  
<TR>  
  
    <TD colspan=2 align=right>  
  
    <INPUT type=button value="提交" onclick="validateForm()">   
  
    <INPUT type=reset value="重填">   
  
    <INPUT type=button value="查看源文件" onclick="location.replace('view-source:'+location)">   
  
    </TD>  
  
</TR>  
  
</TABLE>  
  
</FORM>  
  
</BODY>  
  
</HTML>

上面代码非常简单我们一般会认为document.getElementById("content1").value这样就可以取值了,但事实上 并不是这样,通过这种方式取值,只能取到初始值,当编辑器的内容变化时是取不到的,为什么呢?为什么后台程序可以取得到编辑器中的值 呢,<%=request.getParameter("content1")%>这里是可以取到编辑器中的内容的,但是 document.getElementById("content1").value确不可以。看来eWebEditor在js中动了手脚,一定是动态 帮定了提交事件,或动态绑定了在源码中搜索onsubmit找到如下代码,原来动态的绑定了onsubmit事件,这样每次在提交前会执行 AttachSubmit函数

oForm.attachEvent("onsubmit", AttachSubmit) ;  
  
if (! oForm.submitEditor) oForm.submitEditor = new Array() ;  
  
oForm.submitEditor[oForm.submitEditor.length] = AttachSubmit ;  
  
if (! oForm.originalSubmit) {  
  
    oForm.originalSubmit = oForm.submit ;  
  
    oForm.submit = function() {  
  
        if (this.submitEditor) {  
  
            for (var i = 0 ; i < this.submitEditor.length ; i++) {  
  
                this.submitEditor[i]() ;  
  
            }  
  
        }  
  
        this.originalSubmit() ;  
  
    }  
  
}

[jscript] view plain copy

function AttachSubmit() {   
  
    var oForm = oLinkField.form ;  
  
    if (!oForm) {return;}  
  
      
  
    var html = getHTML();  
  
    ContentEdit.value = html;  
  
    if (sCurrMode=="TEXT"){  
  
        html = HTMLEncode(html);  
  
    }  
  
    splitTextField(oLinkField, html);  
  
}

AttachSubmit就是copy编辑器的内容到隐藏域控件中的过程。

知道了过程我们的问题就不难解决了。只需在取编辑器内容之前执行下AttachSubmit即可

Json Schema Toolkit
Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载
function validateForm(){  
  
    window.frames["eWebEditor1"].AttachSubmit();//执行iframe页面中的AttachSubmit函数  
  
    if(document.getElementById("content1").value!=""){  
  
        document.getElementById("myform").submit();  
  
    }else{  
  
        alert("空");  
  
    }  
  
}

整个过程就此结束,其实eWebEditor代码中的很多思想都是很具有参考价值的例如AttachSubmit的绑定submit 方法的重新封装,我还发现一段比较写的比较好的代码也一起贴出来。

var URLParams = new Object() ;  
  
var aParams = document.location.search.substr(1).split('&') ;  
  
for (i=0 ; i < aParams.length ; i++) {  
  
    var aParam = aParams[i].split('=') ;  
  
    URLParams[aParam[0]] = aParam[1] ;  
  
}  
  
  
  
var sLinkFieldName = URLParams["id"] ;  
  
var sExtCSS = URLParams["extcss"] ;  
  
var sFullScreen = URLParams["fullscreen"];  
  
  
  
var config = new Object() ;  
  
config.StyleName = (URLParams["style"]) ? URLParams["style"].toLowerCase() : "coolblue";  
  
config.CusDir = URLParams["cusdir"];  
  
config.ServerExt = "jsp";

解析url的方法,这种方法以前koko跟我说过一回,今天在ewebeditor中又看到了,看来是一种比较常规的分析URL参数的方法。

总结:其实eWebEditor只是修改了提交表单的两个事件,在提交表单前进行值copy,从而避免了编辑器每次更新都同步值这种没有必要的操作。

以上就是 如何利用js取得eWebEditor编辑器的内容 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

40

2026.09.30

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

40

2026.09.30

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

20

2026.09.30

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

20

2026.09.30

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

20

2026.09.29

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

240

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

140

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

120

2026.09.23

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

60

2026.09.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 20.7万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn