论坛首页 → Web前端技术论坛 →

EXT/FCKEditor 集成 -- AJAX UI -- 一种web开发的新的思维

浏览 6358 次
锁定老帖子 主题：EXT/FCKEditor 集成 -- AJAX UI -- 一种web开发的新的思维
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2008-08-18   最后修改：2009-03-10

代码如下,刚学习EXT,感觉比使用DOJO畅快许多,不像<<征服AJAX dojo,prototype,script.aculo.us>>书中作者使用的DOJO是0.4的版本,我下的是1.1的版本,结果许多组件的命名空间都变了,书中讲的代码等于是废的.前面的prototype,script.aculo.us到是讲的不错,但是不深. 所以后面自己也就废弃了DOJO的学习,学习了EXT.

我是PHP程序员,做PHP也就意味着不能像JAVA,.NET一样使用服务器端组件,更没有服务端AJAX组件了...

我是从JAVA web开发者转到PHP的,之前参与过北京市旅游局系统二期改造项目和中关村高新技术园调查的开发,

使用工作流组件开发相当快. 转到PHP后刚开始有些不太适应,几个月后也就适应了,学习到了很多东西.包括开发思维的转变.

 

这里总结了一些经验:

1. 使用一套PHP4/PHP5兼容框架,推荐使用FLEAPHP,使用好几个月了,相当的好用.

2. 熟悉SMARTY 这个模板框架是必须学会的,即使你是程序员

3. 熟悉MVC结构,这个是最重要的.如果你不想在后期狂改代码的话

[对于PHP我只分出VC和DAO层,一般只需要这两个]

4. 要求会使用JS开发,知道使用OOP来写JS. 至少熟悉Prototype框架

5. 对做企业应用的话EXT是不能少的,虽然我到现在还不知道它的版权到底是怎样的.我没有找到

[说是GPL3 或者LGPL 但是仍然要收费,做多个项目是不是要求购买OEM版的,我也不知道,所以决定购买一套UCREN]

 

 

index.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EXT/FCKEditor 集成 -- AJAX UI -- 一种web开发的新的思维,要及时转换思想</title>
<link rel="stylesheet" type="text/css" href="/ucren/extjs/js_source/resources/css/ext-all.css" />
<script type="text/javascript" src="/ucren/extjs/js_source/ext-base.js"></script>
<script type="text/javascript" src="/ucren/extjs/js_source/ext-all.js"></script>

<!-- //具体事例 -->
<script type="text/javascript" src="/ucren/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="/ucren/extjs/app/extfckapp/FckExtjsCall.js"></script>

</head>

<body>
<!-- //页面中子导航菜单 -->


</body>
</html>

 

FckExtjsCall.js

Ext.onReady(function() {
 var fckFormObj = new Ext.FormPanel({
  labelWidth:75,
  url:"",
  title:"EXT/FCKEditor 集成 -- vb2005xu | cdlinux.ys168.com",
  bodyStyle:"padding:5px 5px 0",
  defaultType:"form",
  buttons:[
   {
    text:"Save" ,
    type:'submit',
    handler: function(){
     //获取fckeditor内容赋给textarea
     Ext.get('fckInstance').dom.value = "jjj";//fckobj.GetXHTML(true) + '提交后'; 
     Ext.MessageBox.alert('FCK内容',Ext.get('fckInstance').dom.value);
     if (fckFormObj.form.isValid())
     {
      //创建响应测试函数      
      var fckobj_temp = FCKeditorAPI.GetInstance('fckInstance');
      //fckobj_temp.UpdateLinkedField();//此方法被绑定到submit事件
      
      fckFormObj.form.doAction('submit',{
       url:'submit.php',
       method:'post',
       waitMsg:'正在提交,请稍等...',
        success:function(form,action){//成功
         showInfo('Success',fckobj_temp.GetXHTML(true));
        } ,
        failure:function(form,action){//失败
         showInfo('Failed','网络中断造成连接失败');
        }
      });
     }
    }
   },
   {
    text:"Cancel"
   }
  ],
  items:[{
      xtype:"textarea",
      fieldLabel:"编辑",
      labelSeparator:"：",
      id:"fckInstance", //div节点，这里要挂接FCKeditor编辑器
      name:"fckInstance",
      width:736,
      height:371
  }]
 });
 fckFormObj.render(document.body);
 
 /*创建Fckeditor对象 -- 构造函数指出了Fckeditor要挂接的id,上文中的xtype : 'textarea'指定*/
 //在页面上要求挂载fckeditor/fckeditor.js文件
 var fckobj = new FCKeditor('fckInstance',810,350);
 fckobj.BasePath = "/ucren/fckeditor/" ;
 fckobj.ToolbarSet = 'Default' ;
 fckobj.ReplaceTextarea(); 
 
 //创建响应测试函数
 function msgBox()
 {
  var fckobj_temp = FCKeditorAPI.GetInstance('fckInstance');
  fckobj_temp.UpdateLinkedField();//此方法被绑定到submit事件
  Ext.MessageBox.alert('FCK内容',fckobj_temp.GetXHTML( true ));
  
 }
 
 function showInfo(tip,str){
  var win = new Ext.Window({
   title: '信息提交应答提示 -- ' + tip,
   width: 400 , height: 200 ,autoScroll: true ,
   html: '<h1>'+ str +'</h1>'    
  });
  win.show();
 }
});

 

submit.php

这个是一个空文件 可以自己添加内容 .

 

 

以下是工程代码结构图

卷 kong 的文件夹 PATH 列表
卷序列号码为 00003AB9 6CED:1D77
G:.
├─.cache
├─.settings
├─blog
├─extjs
│  ├─app
│  │  ├─extfckapp
│  │  └─ExtremeWebManager
│  └─js_source
│      └─resources
│          ├─css
│          └─images
│              ├─default
│              │  ├─box
│              │  ├─button
│              │  ├─dd
│              │  ├─editor
│              │  ├─form
│              │  ├─grid
│              │  ├─layout
│              │  ├─menu
│              │  ├─panel
│              │  ├─progress
│              │  ├─qtip
│              │  ├─shared
│              │  ├─sizer
│              │  ├─slider
│              │  ├─tabs
│              │  ├─toolbar
│              │  ├─tree
│              │  └─window
│              ├─gray
│              │  ├─button
│              │  ├─panel
│              │  ├─qtip
│              │  ├─tabs
│              │  ├─toolbar
│              │  └─window
│              └─vista
│                  ├─basic-dialog
│                  ├─grid
│                  ├─layout
│                  ├─qtip
│                  ├─sizer
│                  ├─tabs
│                  └─toolbar
├─fckeditor
│  └─editor
│      ├─css
│      │  ├─behaviors
│      │  └─images
│      ├─dialog
│      │  ├─common
│      │  │  └─images
│      │  ├─fck_about
│      │  ├─fck_docprops
│      │  ├─fck_flash
│      │  ├─fck_image
│      │  ├─fck_link
│      │  ├─fck_select
│      │  ├─fck_spellerpages
│      │  │  └─spellerpages
│      │  │      └─server-scripts
│      │  └─fck_template
│      │      └─images
│      ├─dtd
│      ├─filemanager
│      │  ├─browser
│      │  │  └─default
│      │  │      ├─images
│      │  │      │  └─icons
│      │  │      │      └─32
│      │  │      └─js
│      │  └─connectors
│      │      ├─asp
│      │      ├─aspx
│      │      ├─cfm
│      │      ├─lasso
│      │      ├─perl
│      │      ├─php
│      │      └─py
│      ├─images
│      │  └─smiley
│      │      └─msn
│      ├─js
│      ├─lang
│      ├─plugins
│      │  ├─autogrow
│      │  ├─bbcode
│      │  │  └─_sample
│      │  ├─dragresizetable
│      │  ├─placeholder
│      │  │  └─lang
│      │  ├─simplecommands
│      │  └─tablecommands
│      ├─skins
│      │  ├─default
│      │  │  └─images
│      │  ├─office2003
│      │  │  └─images
│      │  └─silver
│      │      └─images
│      └─_source
│          ├─classes
│          ├─commandclasses
│          └─internals
├─json
├─phplibs
│  ├─FLEA
│  │  ├─FLEA
│  │  │  ├─Ajax
│  │  │  ├─Com
│  │  │  │  └─RBAC
│  │  │  │      └─Exception
│  │  │  ├─Config
│  │  │  ├─Controller
│  │  │  ├─Db
│  │  │  │  ├─Driver
│  │  │  │  └─Exception
│  │  │  ├─Dispatcher
│  │  │  │  └─Exception
│  │  │  ├─Exception
│  │  │  ├─Filter
│  │  │  ├─Helper
│  │  │  ├─Rbac
│  │  │  │  └─Exception
│  │  │  ├─Session
│  │  │  ├─View
│  │  │  │  └─Exception
│  │  │  └─_Errors
│  │  │      ├─chinese-gb2312
│  │  │      ├─chinese-utf8
│  │  │      ├─default
│  │  │      └─_common
│  │  └─_Cache
│  └─Smarty
│      ├─internals
│      └─plugins
├─prototype
├─taskofpig
│  ├─Controller
│  ├─Dao
│  ├─js
│  ├─music
│  ├─tpl
│  ├─tpl_c
│  └─_log
├─ucren-documentation
│  ├─common
│  └─images
│      └─bigicons
└─ucren-engine
    ├─classes
    │  ├─animation
    │  ├─net
    │  └─patch
    └─resource
        └─skins
            └─qq

  • 描述: ext-fckeditor_vb2005xu.jpg 样图
  • 大小: 70.5 KB
返回顶楼
         
  • Saro
  • 等级: 二星会员
  • 性别:
  • 文章: 55
  • 积分: 245
  • 来自: 湖北武汉
   发表时间：2008-08-18  
在textarea的render事件中实例化fckeditor是否更好些呢。
返回顶楼
          回帖地址
0 请登录后投票
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2008-08-18  
你说得不错,在textarea的render事件中实例化fckeditor是更好些,代码结构更紧促一些,其实这个是从两方面出发的:1. 使用的PDT的插件JSEclipse的代码自动完成,对JSON结构支持的不好;2. 从我个人来讲我觉得将非EXTJS的代码类与其相分离比较好,闭包的概念我还不熟悉. 希望各位不吝赐教
返回顶楼
          回帖地址
0 请登录后投票
  • jianfeng008cn
  • 等级: 五星会员
  • 性别:
  • 文章: 682
  • 积分: 713
  • 来自: 湖州
   发表时间：2008-08-18   
(function(某可能冲突的变量){


某可能冲突的变量('某可能冲突的变量为JQuery').html();

})(JQuery)
  
(function(某可能冲突的变量){


某可能冲突的变量('某可能冲突的变量为Prototype').html();

})(Prototype)
 
返回顶楼
          回帖地址
0 请登录后投票
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2008-08-20  
jianfeng008cn 昨天你留在上边的demo能否给些详细解释,是关于JS闭包的么?这个我看不明白,还请多多指教
返回顶楼
          回帖地址
0 请登录后投票
  • siemens800
  • 等级: 初级会员
  • 性别:
  • 文章: 10
  • 积分: 0
  • 来自: 南京
   发表时间：2008-09-12  
帅哥，我想知道你的工程代码结构图是怎么导出来的 这个很方便
返回顶楼
          回帖地址
0 请登录后投票
  • ecchanger
  • 等级: 初级会员
  • 性别:
  • 文章: 14
  • 积分: 40
  • 来自: 杭州
   发表时间：2008-09-22  
siemens800 写道
帅哥，我想知道你的工程代码结构图是怎么导出来的 这个很方便

tree + 目录名
返回顶楼
          回帖地址
0 请登录后投票
  • bevin_b
  • 等级: 初级会员
  • 性别:
  • 文章: 18
  • 积分: 30
  • 来自: 上海
   发表时间：2008-10-28  
虽然EXT官方论坛上的那个例子也写的不怎么样，但是起码做到了基本的控件化...所以您不用在论坛上到处发贴炫耀这点东西吧
返回顶楼
          回帖地址
0 请登录后投票
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2008-12-01  
bevin_b 写道

虽然EXT官方论坛上的那个例子也写的不怎么样，但是起码做到了基本的控件化...所以您不用在论坛上到处发贴炫耀这点东西吧

有中文的么?? 你这么牛,怎么也没见你写出来啊,敝帚自珍的东西?
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics