flex图文混排

由于我们项目需要在flex中实现图文混排的效果，在实现的过程中经历了很多痛苦，我把经历记录下来，也学到了很多原来不知道的方法和知识
  开始的时候打算使用flex中的richtext，可是发现这个里面只支持字体的变化，但是插入图片的功能好像没有实现，晚上也没有找到哦好的例子。后来开始看RichTextEditor的方法，发现了一个addChild的方法，尝试着在里面直接放路一个图片，发现居然好用，心中窃喜，心里还奇怪网上的怎么没有推荐这个方法呢？可是仔细一用，发现这个不知此图片拖拽，不支持图片定位，并且附件的上传也需要自己实现，想了各种办法没有弄好。尝试通过htmltext的方式，但是这个只能显示，并且支持的标签也很有限。看来RichTextEditor不行，只能另寻其他的方法。
   采用flex嵌入jsp，这个是领导推荐的，并且也给了一个公司自己的webeditor的开源代码。由此开始了近两周的长途跋涉，克服了一个一个困难，过程中总想放弃，可是无奈不能说服客户说这个功能没什么必要。
    开始将jsp采用iframe的方式嵌入要弹出的TitleWindow中，但是发现移动和关闭TitleWindow以后jsp窗口纹丝没动，于是开始分析iframe的代码，终于找到了，通过扑捉TitleWindow移动和关闭事件的时候来操作iframe的动作。终于搞定了第一步，下面还面临着更多的问题。
   开始分析公司的webedior代码，发现居然没有上传图片的功能，由于考虑到事务的事情，我想通过ajax中的js将文件传到服务器上，可是发现传到服务端以后request的head总是null的，抛出需要multipart/form-data的异常，网上查询资料，原来上传文件必须要用form提交，于是改用form的提交方式上传图片，于是写了一个file的标签，上传文件没问题了。
    这个时候领导提出直接使用这个标签和其他的几个不太搭配，要求将file的输入框和按钮都隐藏掉，于是我打算采用js的方法来触发file的点击事件，可是提交以后居然抛出不允许访问的问题，再次google，网上很多答复，大意是说为了安全问题，这个file标签只能用鼠标 点击，采用js方法来模拟click事件是不允许的。看来只能采用别的方法了
  在查询ajax上传文件的时候，偶尔看到了采用frame的方式来做form提交，具体的步骤就是建立一个frame让它的高度和宽度都设置成0，这样就有了一个隐藏的frame，然后将要提交的form的target设置为这个frame，这样form提交的时候页面就不会刷新了。
   上传文件成功了，下面回到webeditor中插入图片的问题，现在有两个问题1要将file标签的输入框和按钮隐藏掉，但是上传文件的时候还需要使用。2要上传多个图片文件，还要在webeditor中显示3webeditor中的html字符串要返回给flex怎么做？
   问题1解决方法，将file标签的透明度设置成0，当鼠标移到图标上的时候，触发事件，将file的坐标跟踪鼠标的坐标
  问题2解决方法当上传成功一个图片以后，重新生成一个新的file标签，这样就可以将多个文件传到后台了。
  问题3解决方法，由于要将产生的html字符串传给flex后台存到数据里中去，所以在上传文件的时候需要将存到服务器上的图片文件的名字重新在前台生成，同时将新旧文件的名字组成一个xml字符串，传到后台，这样就可以向flex传递正确的html字符串了。
   到这里整个webeditor的工作量算是完成了。
   下面解决flex和jsp之间的通讯问题，flex如何调用jsp的方法，flex和jsp之间传参数
   首先阅读iframe.as文件，分析了调用jsp中js文件的原理，flex嵌入jsp的时候将jsp作为一个frame嵌入到flex中的html中的，这个frame的id被拼写成iframe_iFrame（iFrame是flex中定义iframe的id），所以我们就可以采用直接使用ExternalInterface来调用(iframe_iFrame.window.js名字)，这个方法有返回值也可以向jsp传递参数。
   但是这个方法在后来测试的时候总是有一些问题，有的到现在还没就明白
    1如果在flex初始化的时候调用jsp的方法，总是调用不成功（没什么反应），分析以后觉得应该是jsp的页面还没有初始化完毕，调用jsp中的js方法可能就无法调用。解决这个办法我使用了一个定时器就是flex中的setInterval来循环调用，直到jsp返回结果在停止
    2还有就是有的时候方法调用了，可是传递参数总是传不过去，这个问题很头疼，所以只能在jsp端加一个判断如果接收到的参数为null的，直接返回不成功，要求再次调用
    又过了一关，传递参数成功了。
   当我觉得任务完成的时候又发现了一个令人头疼的现象，就是在修改页面和浏览页面中的iframe总是出现奇怪的现象（浏览页面中嵌入的flex总是出现修改页面中调用的iframe部分），晕死了。分析以后我觉得应该是当修改窗口关闭以后，iframe的生命周期并没有结束，而当浏览页开始的时候，调用iframe的visible属性设置为true的时候，这个iframe就重新冒上来显示了，于是我只好在关闭之前加上调用iframe清内容的方法
   到这里还有两个问题1flex弹出提示框以后，由于分层的原因，jsp页面在提示框之前所以导致提示框无法看到2焦点问题，怎么样在jsp和flex输入框的焦点切换
  问题1在弹出提示框之前将iframe隐藏掉，但是ifram中的图片居然没有隐藏掉，只好再次调用清除内容，并设置iframe的visible属性的，当点击确定按钮以后触发的function中重新设置iframe的值并显示
  问题2焦点问题，这个问题到现在还没有很好的结局办法，现在采用的是当点击flex部分的时候将原来的iframe  remove掉，然后设置它的visible和enable都为false，当flex输入框获得焦点以后，再重新加载iframe，但是这样造成了iframe重新显示以后内容居然没了，所以还得在显示之前调用jsp的设置内容方法，重新注入之前的内容。这样勉强可以实现两者之间的焦点切换，但是遗留了问题，切换焦点的时候，由于ifame隐藏又被显示，这个时候页面会有一个闪烁，而且只有点击两次flex的时候才可以获得焦点。真是费劲啊
  焦点问题勉强算是完成了。
  这个模块花了我一个7个工作日的时间，由于flex技术还是很不成熟虽然它提供了和jsp交互的方法但是有很多没有实现的接口，网上很多例子都是整个页面嵌入jsp没找到作为flex一部分来实现的，中间过程中尝试了很多方法，也因此了解了自己很多不知道的知识，做这个感觉付出了很多心血，所以标记一下，也许人只有在痛苦中增长的最快吧。

评论

1 楼 sailout 2012-03-05  

您好，我现在也要用富文本编辑功能，请问针对图文混排问题您有什么更好的解决方案吗？