`

在EXT中使用FCKEditor编辑器例子

阅读更多

转载自http://www.iteye.com/topic/170998

最近有朋友问我在EXT中使用FCKEditor编辑器遇到的一些问题,于是自己花一点时间写了一个例子,提供给大家学习。
例子已经配置好上传图片/flash/文件到服务器的功能,下载附件ext-fckeditor.rar,布署运行工程下的 /ext/examples/form/fckForm.html即可。如http://localhost: 8080/ext/examples/form/fckForm.html
代码如下:

  1. Ext.onReady(function(){ 
  2. var fckeditorFormPanel = new Ext.FormPanel({ 
  3.         labelWidth: 75,  
  4.         url:'', 
  5.         frame:true, 
  6.         title: 'fckeditor Form', 
  7.         bodyStyle:'padding:5px 5px 0', 
  8.         width: 950, 
  9.         height:450, 
10.         defaultType: 'textfield', 
11.  
12.         items: [{ 
13.                     xtype:'textarea', 
14.                     fieldLabel:'编辑', 
15.                     labelSeparator:':', 
16.                     id:'code', 
17.                     name:'code', 
18.                     height:200, 
19.                     width:300 
20.                 } 
21.         ], 
22.         buttons: [{ 
23.             text: 'Save' 
24.         },{ 
25.             text: 'Cancel' 
26.         }] 
27.     });   
28.     fckeditorFormPanel.render(document.body); 
29.     /**
30.          * 以下创建在线编辑器
31.          */ 
32.     var oFCKeditor = new FCKeditor( 'code',810,350 ) ;  
33.     oFCKeditor.BasePath = "/fckeditor/" ;  
34.     oFCKeditor.ToolbarSet = 'Default'; 
35.     oFCKeditor.ReplaceTextarea() ;   
36. });

 

  • 大小: 78.5 KB
分享到:
评论

相关推荐

    php中使用fckeditor编辑器

    通过POST方式获取编辑器中的数据也非常简单,在`check.php`文件中使用如下代码即可: ```php $fckeditorValue = $_POST['FCKeditor1']; ``` #### 四、FCKeditor的定制化配置 虽然FCKeditor已经安装成功并可以使用...

    ext-fckeditor整合

    2. **创建编辑器组件**:EXT中通过创建一个新的组件来承载FCKeditor。这通常涉及到定义一个EXT的Panel或FieldSet,并在其配置项中设置FCKeditor的初始化代码。 3. **配置FCKeditor**:FCKeditor有很多可配置的选项...

    FCKeditor编辑器hwp363

    FCKeditor编辑器hwp363FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363

    最新FCKeditor_2.6 版本 FCKeditor编辑器和控件

    在页面中使用FCKeditor 有两种方式。 (1)手工编码 在页面中加入ASP.NET指令: 然后在需要的地方加入FCKeditor控件: <FCKeditorV2:FCKeditor id="FCKeditor1" runat="server" /> (2)集成到Visual Studio...

    FCKeditor 网页在线编辑器的使用方法

    FCKeditor是一个支持所见即所得(WYSIWYG,即What You See ...在使用FCKeditor时,开发者应确保遵循官方文档,以及利用官方网站上提供的资源和工具箱,确保编辑器能够被正确地集成到网站中,并提供用户良好的编辑体验。

    FCKEditor与ext结合使用

    - **增强编辑体验**:FCKEditor的富文本功能可以弥补EXT在编辑方面的不足,让内容创建更加灵活。 - **定制化**:两者都支持高度定制,可以根据项目需求自定义编辑器外观和功能。 - **提高效率**:通过EXT的组件化,...

    fckeditor编辑器文件及dll打包

    fckeditor编辑器文件及dll打包 fckeditor编辑器文件及dll打包 fckeditor编辑器文件及dll打包

    jsp程序中使用fckeditor编辑器

    综上所述,JSP程序中使用FCKeditor编辑器涉及到前端JavaScript的使用、后端数据的处理、安全性的考量以及可能的自定义扩展。理解并掌握这些知识点,将有助于在实际开发中更好地利用FCKeditor提升用户体验。

    fckeditor 与ext 集成使用

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

    fckeditor编辑器 (已配置好)

    这款编辑器在Web开发中被广泛应用,尤其是在内容管理系统(CMS)和论坛系统中,为用户提供了一种方便的方式来创建和编辑网页内容。 **配置过程详解** FCKeditor的配置主要涉及到以下几个方面: 1. **安装与下载**...

    fckeditor文档编辑器插件

    要在Web项目中使用fckeditor,首先需要在服务器上部署相关文件,通常这些文件包含JavaScript库、CSS样式表和必要的图像资源。在HTML页面中,通过引用fckeditor的JavaScript文件并配置编辑器实例,就可以在指定的...

    FCKeditor编辑器2.63(解决无法上传文件)

    版本2.63针对之前版本中的上传文件问题进行了修复,确保用户可以顺畅地在编辑器中上传各种文件,如图片、文档等,这对于网站内容管理和用户交互具有重要意义。 在FCKeditor 2.63中,上传文件功能的优化解决了困扰...

    fckeditor编辑器插件

    通过在fckeditor的配置文件中注册这个按钮,就能在编辑器工具栏上看到并使用它。 接下来,我们来讨论如何实现fckeditor的弹出页面功能。弹出页面常用于提供更复杂的编辑选项或输入字段,例如上传文件、选择颜色等。...

    fckeditor编辑器上传文件(含视频音频)详细配置

    2. 在页面中使用FCKeditor 有两种方式。 (1)手工编码 在页面中加入ASP.NET指令: 然后在需要的地方加入FCKeditor控件: <FCKeditorV2:FCKeditor ID="FCKeditor1" BasePath="fckeditor/" runat="server" Height=...

    fckeditor在线编辑器

    FCKeditor的图片上传功能允许用户在编辑器中直接插入本地图片,通过服务器端的Servlet处理文件上传请求,将图片保存到服务器的指定位置,并返回相应的URL供编辑器显示。这种功能极大地提升了用户在网页编辑时的便利...

    ThinkPHP中FCKeditor编辑器的使用

    ThinkPHP中FCKeditor编辑器的使用 前段时间一直为TP寻找好用的在线编辑器而苦恼,经过多次尝试与修改后,终于成功地将编辑器集成到Thinkphp里面。 而且可以用直接上传和ajax两种方式处理内容。为了给一些还没能成功...

    fckeditor 编辑器 和使用说明

    - **图片上传**:用户可以直接在编辑器内上传图片,并进行位置调整、大小修改等操作。 - **表格编辑**:创建、编辑表格,包括行、列的添加与删除,单元格合并等。 - **多媒体支持**:嵌入音频、视频内容,提升...

    FCKeditor编辑器

    2. 在网页中引入FCKeditor,通常需要通过HTML代码或者JavaScript函数来初始化编辑器实例。例如,你可以在页面中指定一个ID为"FCKeditorInstance"的textarea元素,然后通过JavaScript调用FCKeditor的API进行初始化。 ...

Global site tag (gtag.js) - Google Analytics