`
kodak_zhou
  • 浏览: 136750 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

把CKeditor嵌入到EXTJS的WINDOW控件中

阅读更多
buildContentWin : function(grid, rowIndex, fieldName, fieldNameT) {
var win = new Ext.Window({
layout : 'form',
width : 1024,
title : '内容编辑',
height : 506,
autoScroll : true,
// closeAction : 'hide',
border : true,
modal : true,
plain : true,
closable : true,
resizable : false,
margin : '2 0 0 2'
});

var record = grid.getStore().getAt(rowIndex);
var data = record.get(fieldName)
var v = data;

var fckFormObj = new Ext.FormPanel({
frame : true,
items : [{
layout : 'form',
border : false,
items : [{
hideLabel : true,
    xtype:"textarea",
    id:"fckInstance", //div节点,这里要挂接FCKeditor编辑器 
    name:"fckInstance", 
    value:v != null ? v:'',
    height:500 
  }]
}],
  buttons:[{ 
    text:"确定" ,
    handler: function(){ 
     //获取fckeditor内容赋给textarea 
   
var o = document.getElementById('fckInstance');
var str = EmployeeActivityExt.editor.getData() ;
var _record = grid.getStore().getAt(rowIndex);
_record.set(fieldName, str);
_record.set(fieldNameT, '.......');
win.close();
    } 
   },{ 
    text : '取消',
handler : function() {
win.close();
}
   }]
});
win.add(fckFormObj);
win.show();
if(EmployeeActivityExt.isFirst){
if(CompanyNewsInfoExt.editor != null){
CKEDITOR.remove(CompanyNewsInfoExt.editor);
}
if(EmployeeActivityExt.editor != null){
CKEDITOR.remove(EmployeeActivityExt.editor);
}
EmployeeActivityExt.editor = CKEDITOR.replace('fckInstance',{filebrowserUploadUrl : 'ckeditor/uploader?Type=File',  
  filebrowserImageUploadUrl : 'ckeditor/uploader?Type=Image',  
  filebrowserFlashUploadUrl : 'ckeditor/uploader?Type=Flash' 
      });
EmployeeActivityExt.isFirst = false
}else{
CKEDITOR.remove(EmployeeActivityExt.editor);
EmployeeActivityExt.editor = CKEDITOR.replace('fckInstance',{filebrowserUploadUrl : 'ckeditor/uploader?Type=File',  
  filebrowserImageUploadUrl : 'ckeditor/uploader?Type=Image',  
  filebrowserFlashUploadUrl : 'ckeditor/uploader?Type=Flash' 
      });
}
}
分享到:
评论

相关推荐

    extjs 嵌入 ckeditor 例子

    综上所述,将CKEditor嵌入到ExtJS应用中涉及对两个库的理解以及组件化开发。通过自定义组件,我们可以灵活地控制CKEditor的显示和行为,同时利用ExtJS的强大功能构建复杂的Web应用程序。在实际项目中,这种集成方式...

    extjs中嵌入ckeditor完整实例

    extjs中嵌入ckeditor的完整实例,同时有ckeditor的配置说明

    最新的ckeditor 富文本-FCKEditor控件

    最新的ckeditor 富文本-FCKEditor控件,最新的ckeditor 富文本-FCKEditor控件,属于第三方控件,功能齐全,完善,大部分的ASP.NET开发的网站都需要富文本控件,欢迎大家交流心得~

    ExtJs4-CKEditor关键代码

    封装CKEditor用于ExtJs4的关键代码,我自己试用可以成功,希望对大家有帮助

    ext 中嵌入CKEditor 实现代码

    在本文中,我们将深入探讨如何在EXTJS框架中嵌入CKEditor,以便创建一个功能强大的在线HTML教程编辑器。EXTJS是一个用JavaScript编写的富客户端应用程序框架,它提供了丰富的组件库,而CKEditor则是一个流行的富文本...

    extjs4-ckeditor:在 ExtJS 4.x 中使用 CKEditor

    ExtJS 4.x + CKEditor 这是一个简单的页面,它使用了 ExtJS 中使用的的包装器。如何使用(非MVC) 请参阅包含的示例 index.html 文件。如何使用 (MVC) 通过本地下载的副本或通过 CKEditor CDN 包含 CKEditor。 将 js...

    CKeditor控件.net版

    在.NET环境中,CKeditor可通过特定的.NET封装控件进行集成,方便开发者在ASP.NET项目中使用。 标题"CKeditor控件.net版"指的是这个压缩包包含的是针对.NET框架的CKeditor集成方案。这意味着开发者可以获得与...

    ckeditor第三方控件

    CKEditor是一款广泛应用于Web开发领域的第三方文本编辑器控件,以其功能丰富、用户体验优秀而著称。这款编辑器能够提供类似桌面文字处理软件的编辑体验,使得用户在网页上进行文本创作、格式调整、图片上传等操作变...

    ckeditor 3 自定义控件

    通过以上介绍,我们了解到如何在 CKEditor 3 中实现自定义控件并集成 CKFinder。这不仅能够提升编辑器的功能性,还能显著增强用户体验。开发者可以根据项目需求进一步扩展和定制控件,使其更加符合应用的具体场景。

    UNIGUI ckeditor组件,把著名的ckeditor & ckfinder集成到ExtJS的Delphi下的UNIGUI框架

    4. 在`UNIGUI`控件中嵌入`ckeditor`,并根据需要调整编辑器的样式和功能。 集成完成后,用户可以通过`UNIGUI`应用程序直接在`ckeditor`中享受到丰富的文本编辑功能,同时利用`ckfinder`轻松管理媒体资源。这种整合...

    ckeditor控件

    在`ckeditor.rar`这个压缩包中,包含的文件很可能是CKEditor的源码、示例、文档以及可能的配置文件。解压后,开发者通常会找到以下几部分: 1. **源码文件**:包含 CKEditor 的 JavaScript 和 CSS 文件,用于在网页...

    ckeditor_4.x自定义按钮控件详细配置

    在 CKEditor 4.x 版本中,我们可以通过自定义按钮控件来扩展编辑器的功能。本文将详细介绍如何在 CKEditor 4.x 中自定义按钮控件的详细配置。 首先,我们需要下载 CKEditor 的官方插件,并解压缩文件。在解压缩后的...

    CKEditor控件CKFinder控件和使用说明

    3. **预览功能**:用户可以在CKFinder中预览图片和其他文件,确保插入到CKEditor中的内容正确无误。 4. **权限控制**:可以设置不同的访问权限,如读取、写入和删除,以保护文件安全。 5. **多语言**:与CKEditor...

    ckeditor富文本控件

    1. **安装**:介绍如何将CKEditor集成到你的网站或应用中,可能涉及下载编辑器文件、添加JavaScript引用、配置初始化脚本等步骤。 2. **配置**:解释如何调整CKEditor的设置,比如更改默认工具栏布局、设置语言、...

    SSH+ExtJs完成CKEditor富文本编辑器整合

    本篇文章将详细介绍如何在SSH框架中整合CKEditor与ExtJS,以实现高效、美观的前端文本编辑功能。 首先,我们需要理解SSH框架的运作原理。Spring作为核心框架,负责管理对象的依赖注入(DI)和面向切面编程(AOP),...

    asp.net CKeditor 3 用户自定义控件 解决UpdatePanel下问题

    为了更好地集成CKEditor到ASP.NET项目中,作者提供了一个自定义控件。该控件继承自`TextBox`类,并添加了对CKFinder的支持以及解决了在UpdatePanel中使用时可能出现的问题。 **1. CKEditor控件的基本结构** ```...

    CKEditor 4 开发人员指南(中文)

    将CKEditor集成到Web页面中,通常涉及到加载CKEditor的脚本文件和生成编辑器实例。CKEditor提供了两种生成编辑器的选项:框架式编辑(FramedEditing)和内联式编辑(InlineEditing)。框架式编辑是CKEditor最常用的...

    extjs与ckeditor

    extjs与ckeditor 整合 将资源文件复制到工程的WEBROOT目录下或者自己在WEBROOT下自己建一个文件夹存放资源文件 比如我们把资源文件放在webroot/scripts/lib/ckeditor文件夹下 在项目的入口页面引入以下3个js文件

    ckeditor html5_video 插件添加封面和中文功能

    HTML5 视频标签 `<video>` 用于嵌入视频内容,通常包括 `src`(视频源)、`controls`(播放控件)、`poster`(预览图片)等属性。在 CKEditor 中,通过 HTML5-Video 插件,我们可以方便地在编辑器内创建和配置这些...

    ckeditor文本框控件

    这款编辑器易于集成,可以方便地嵌入到各种Web应用中,尤其适合初学者进行项目开发。 2. **功能特性** - **富文本编辑**:CKEditor支持多种文本格式,包括加粗、斜体、下划线、字体、颜色等。 - **插入媒体**:...

Global site tag (gtag.js) - Google Analytics