`
QIAN_QIAN
  • 浏览: 139143 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Ext中添加多个FCKeditor

    博客分类:
  • Ext
阅读更多
最近在应用ext,但是在应用到ext中自带的htmleditor时,在粘贴word文档时出现问题,现在修改方案,将htmleditor换为FCKeditor,但是在同一个页面应用到多个时,也会出现问题,现在写了一个小例子,是tab页中有2个fckeditor,这个例子包括了取值及赋值问题

Ext.onReady(function(){

var fckeditorFormPanel = new Ext.FormPanel({
        labelWidth: 75,
        url:'',
        frame:true,
        title: 'fckeditor Form',
        bodyStyle:'padding:5px 5px 0',
        width: 850,
        height:450,
        defaultType: 'textfield',

        items: [{
            xtype:'textarea',
            fieldLabel:'编辑',
labelSeparator:':',
id:'code',
name:'code',
            height:200,
width:300
                }
        ],
        buttons: [{
            text: 'Save',
            handler:function(){
        }
        },{
            text: 'Cancel'
        }]
    });


var fckPanel = new Ext.FormPanel({
        labelWidth: 75,
        url:'',
        frame:true,
        title: 'fckPanel',
        bodyStyle:'padding:5px 5px 0',
        width: 850,
        height:450,
        defaultType: 'textfield',

        items: [{
            xtype:'textarea',
            fieldLabel:'编辑',
labelSeparator:':',
id:'sss',
name:'sss',
            height:200,
width:300
                }
        ],
        buttons: [{
            text: 'Save',
            handler:function(){
       
        }
        },{
            text: 'Cancel'
        }]
    }); 
//fckeditorFormPanel.render(document.body);

var tabPanel=new Ext.TabPanel({
autoScroll : false,
id : 'tabPanel',
region : 'center',
activeTab: 0,
width:500,
listeners :{
tabchange : function(sender,activeTab){
var item = activeTab.items.items[0];
var itemId = item.items.items[0].id;
var oFCKeditor = new FCKeditor( itemId,670,350 ) ;
oFCKeditor.BasePath = "com/jb/pms/js/FCKedirtor/" ;
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.ReplaceTextarea();


},
beforetabchange:function(tab,newTab,currentTab ){
if(currentTab){
var currentitem = currentTab.items.items[0];
var currentitemId = currentitem.items.items[0].id;

var editorInstance=FCKeditorAPI.GetInstance(currentitemId);
Ext.get(currentitemId).dom.value=editorInstance.GetXHTML( true );

}

}
},
    items:[
           {items:[fckPanel],id:'fckPanel',title:'fckPanel'},
           {items:[fckeditorFormPanel],id:'fckeditorFormPanel',title:'设备技术改进内容'}
           ],
     tbar:[{
id : 'btn_save',
text : '保存',
tooltip : '保存',
iconCls : 'save',
handler : function() {
   
    var currentId=tabPanel.activeTab.items.items[0].items.items[0].id;
var currentInstance=FCKeditorAPI.GetInstance(currentId);
Ext.get(currentId).dom.value=currentInstance.GetXHTML( true );

if(Ext.get('code')){
alert(Ext.get('sss').dom.value+  "      "+Ext.get('code').dom.value);
}
   
     }
   
     }]
});

Ext.getCmp('sss').setValue('ssssssssssssssssssssssssssssss');
Ext.getCmp('code').setValue('ccccccccccccccccccccccccccccc');
new Ext.Viewport({
layout :'border',
items : [tabPanel]
});


/**
* 以下创建在线编辑器
*/

 
//var fckPanelKeditor = new FCKeditor( 'sss',670,350 ) ;
//fckPanelKeditor.BasePath = "com/jb/pms/js/FCKedirtor/" ;
//fckPanelKeditor.ToolbarSet = 'Basic';
//fckPanelKeditor.ReplaceTextarea("sss") ;    

});

var editorInstance; 

function FCKeditor_OnComplete( instance ) { 
   editorInstance=instance; 
}; 
分享到:
评论

相关推荐

    ext-fckeditor整合

    在IT行业中,`EXT`和`FCKeditor`是两个重要的前端开发工具。EXT是一个基于JavaScript的组件库,主要用于构建富客户端(Rich Internet Applications,RIAs)应用,它提供了丰富的用户界面组件和强大的数据绑定机制。...

    在EXT中使用FCKEditor编辑器例子

    这篇博客文章“在EXT中使用FCKEditor编辑器例子”可能探讨了如何将FCKEditor集成到EXT应用中,为用户提供一个方便的文本编辑界面。 在EXT中集成FCKEditor,首先你需要理解EXT的基本概念,如组件(Component)、布局...

    FCKEditor与ext结合使用

    2. **创建编辑器**:在EXT的某个组件(如Panel)中,创建一个div元素作为FCKEditor的容器。 3. **初始化FCKEditor**:使用FCKeditor的API进行初始化,指定刚刚创建的div作为编辑器的工作区。 4. **事件绑定**:根据...

    fckeditor 与ext 集成使用

    这通常通过JavaScript代码来实现,例如在EXT的某个组件或视图中创建一个新的FCKeditor对象,并指定编辑器的容器元素ID。 ```javascript var editor = FCKeditor.Create({ 'id' : 'myEditor', // 编辑器ID 'Width'...

    FCKeditor添加行距操作详细步骤

    本文将详细介绍如何在FCKeditor中进行行距的添加操作。 首先,理解什么是行距。行距,即行与行之间的距离,是文本格式化中的一个重要元素。在FCKeditor中,调整行距可以帮助我们更好地控制和优化编辑区域内的文本...

    为fckeditor添加多文件批量上传组件

    3. **创建上传按钮**:在FCKeditor的工具栏中添加一个用于触发批量上传的按钮。这可以通过修改FCKeditor的配置文件(通常为fckconfig.js)来完成,添加新的工具栏按钮定义,并绑定相应的事件处理器。 4. **编写上传...

    FCKeditor 添加行距功能

    1. **添加外部插件**:首先需要在`fckeditor\editor\plugins`目录下新建一个名为`lineHeight`的文件夹,并在该文件夹内创建一个`fckplugin.js`文件。在这个文件中输入以下代码: ```javascript FCKCommands....

    django项目添加了fckeditor

    接下来,我们需要在Django项目的`settings.py`中添加`fckeditor`到`INSTALLED_APPS`列表中,确保应用已经被正确注册: ```python INSTALLED_APPS = [ # ... 'fckeditor', # ... ] ``` 配置完成后,需要在URL...

    fckeditor中添加自动排版功能

    现在,我们将深入探讨如何在FCKeditor中添加自动排版功能。 自动排版是富文本编辑器的一个重要特性,它可以对输入的文本进行格式化处理,使其符合一定的排版规则,如统一字体、大小、段落间距等,从而提高内容的...

    fckeditor解决中文问题

    《解决FCKeditor中文问题全攻略》 ...总的来说,处理FCKeditor的中文问题需要从字符编码、服务器配置和编辑器配置等多个角度入手。理解并掌握这些知识点,将有助于确保FCKeditor在中文环境下的正常运作,提升用户体验。

    用FCKEditor添加中文字体

    以下是如何在FCKEditor中添加并使用中文字体的详细步骤: 首先,我们需要对FCKEditor的核心配置文件fckconfig.js进行修改。这个文件通常位于FCKEditor的安装目录下,是编辑器的全局设置所在。找到文件后,打开它并...

    FCKeditor 2.6中添加插入视频和音频功能

    总结,要在FCKeditor 2.6中添加插入视频和音频的功能,你需要编写一个JavaScript插件,设计一个HTML界面,定义CSS样式,准备图像资源,利用JavaScript库进行交互,处理语言翻译,可能还需要实现文件上传功能。...

    ext-fckeditor

    标题中的"ext-fckeditor"指的是基于Java开发的一个项目,它集成了Ext库和FCKeditor。这个项目的主要目的是为开发者提供一个完整的、可运行的源代码解决方案,以便于在Java环境中集成富文本编辑器功能。 Ext是一个...

    FCKeditor中文使用手册

    FCKeditor允许自定义工具栏按钮,添加插件,甚至改变编辑器的外观和行为。这部分内容会指导读者如何根据项目需求定制FCKeditor,实现特定的功能。 **6. 兼容性与问题解决** 由于FCKeditor需要在不同浏览器上运行,...

    FCKeditor添加删除功能

    1:在点击“浏览服务器”按钮打开的新页面,在文件夹和文件列表中添加删除链接。 2:点击文件夹或文件对应的删除链接,系统提示确认,确定删除时执行删除操作。 3:删除文件夹时同时删除文件夹下所有子文件夹及文件...

    jsp页面中加入fckeditor编译器

    **JSP页面中集成FCKeditor编辑器** FCKeditor是一款功能强大的开源文本编辑器,广泛应用于网页内容编辑,尤其在Java JSP开发环境中。它提供了丰富的文本格式化选项,支持图片、链接、表格等多媒体元素的插入,使得...

    fckeditor编辑器添加swfupload功能

    在IT行业中,编辑器是开发人员日常工作中不可或缺的工具,它们提供了一...这一集成不仅增强了FCKeditor的功能,还展示了Web开发中客户端与服务器端交互、JavaScript库的使用、Flash与JavaScript协作等多个技术知识点。

    EXT中FCK的使用

    在EXT中集成FCKeditor,可以为EXT应用程序提供一个强大的文本编辑功能。 1. **EXT与FCKeditor的结合** 在EXT应用中,通常会遇到需要用户输入大量文本的情况,如发布文章或编辑内容。FCKeditor的引入解决了这个问题...

    FCKeditor结合extjs实例

    标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合,涉及到的主要是两个前端富文本编辑器库:FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时,如何将这两者有效地整合以实现复杂的用户界面...

    jsp中使用FCKEditor

    2. **部署资源**:将解压后的FCKeditor文件夹放置到JSP项目的WebContent目录下,通常会将其放在一个合适的子目录如`editor`或`js`中。 3. **引入JavaScript库**:在需要使用FCKEditor的JSP页面中,通过`<script>`...

Global site tag (gtag.js) - Google Analytics