FCKeditor_ For_Java_Web编辑器_使用详解

合集下载

Java-Web-Office-文档在线编辑

Java-Web-Office-文档在线编辑

Java-Web-Office-文档在线编辑在当今移动化和云化的时代,办公文档的在线编辑和共享已经成为商业世界的基础要求。

在此背景下,Java Web Office文档在线编辑成为了一个广泛使用的技术。

在本文档中,我们将讨论Java Web Office文档在线编辑的基本原理和使用。

什么是Java Web Office文档在线编辑?Java Web Office文档在线编辑是一种基于Java Web技术和Office文档格式的在线编辑工具。

它允许用户在线编辑各种类型的Office文档,如Word文档、Excel表格、PowerPoint演示等。

它还可以将编辑的结果存储在云端,以便用户可以方便地实现文档的共享和协作编辑。

Java Web Office文档在线编辑的基本原理Java Web Office文档在线编辑的基本原理是将用户编辑的Office文档在服务器端转换为HTML格式,并在用户的浏览器中显示为可编辑网页。

当用户在网页上进行编辑操作时,服务器会将编辑内容保存在数据库中,以便用户之后可以打开文档并继续编辑。

用户还可以方便地阅读、打印和下载文档。

Java Web Office文档在线编辑通常包括以下主要功能:•文字处理:允许用户输入、编辑和格式化文本。

•图片处理:允许用户插入、调整和删除图片。

•文档存储:允许用户将文档存储在云端,以便共享和协作编辑。

•用户管理:允许管理员在网站上注册用户,并管理用户权限。

Java Web Office文档在线编辑的使用Java Web Office文档在线编辑通常可以在网站上直接使用,也可以通过API连接到其他系统中。

在使用Java Web Office文档在线编辑时,用户需要进行以下步骤:步骤1:登录用户需要在网站上注册账户并登录后才能使用Java Web Office文档在线编辑。

登录后,用户可以在网站上找到编辑文档的选项。

步骤2:选择文档用户可以从自己的本地计算机或者从网站上选择需要编辑的文档。

javascript中的iframe基本用法

javascript中的iframe基本用法

javascript中的iframe基本用法iframe是HTML中的一种元素,它可以嵌入其他网页内容到一个网页中,提供了一种简单的方式来展示其他网页的内容。

在JavaScript中,我们可以使用iframe来加载和操作iframe中的内容,从而实现一些特殊的功能和效果。

一、基本用法1.创建iframe元素:在HTML代码中,可以使用<iframe>标签来创建一个iframe元素。

例如:```html<iframesrc="other_page.html"width="500"height="300"></ifr ame>```上面的代码创建了一个宽为500像素、高为300像素的iframe元素,并指定了其内容为“other_page.html”。

2.获取iframe元素:在JavaScript中,可以使用document对象的getElementById()方法或getElementsByTagName()方法来获取iframe元素。

例如:```javascriptvariframe=document.getElementById("myIframe");```上面的代码获取了一个id为“myIframe”的iframe元素。

3.操作iframe内容:可以通过改变iframe元素的src属性来加载不同的页面,也可以通过读取iframe元素的内容来获取iframe中的数据。

例如:```javascript//加载其他页面iframe.src="other_page.html";//读取iframe中的数据variframeContent=iframe.contentWindow.document.body.inner HTML;```上面的代码分别加载了其他页面并读取了iframe中的HTML内容。

FCKeditor(JAVA版)配置详解

FCKeditor(JAVA版)配置详解
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>调试时设为true
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
---images(editor使用到的图片)
---js
---lang (存放用于支持多语言的js文件)
---plugins(扩展插件)
---skins(editor皮肤,2.3.1版有default、office 2003和silvers三种)
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>

FCKeditor编辑器漏洞利用

FCKeditor编辑器漏洞利用

FCKeditor编辑器页/查看编辑器版本/查看文件上传路径FCKeditor编辑器页FCKeditor/_samples/default.html查看编辑器版本FCKeditor/_whatsnew.html查看文件上传路径fckeditor/editor/filemanager/browser/default/connectors/asp/connector.asp?Command=GetFoldersAndFiles&Type=Image&CurrentFolder=/XML页面中第二行 “url=/xxx”的部分就是默认基准上传路径Note:[Hell1]截至2010年02月15日最新版本为FCKeditor v2.6.6 [Hell2]记得修改其中两处asp为FCKeditor实际使用的脚本语言FCKeditor被动限制策略所导致的过滤不严问题影响版本: FCKeditor x.x <= FCKeditor v2.4.3脆弱描述:FCKeditor v2.4.3中File类别默认拒绝上传类型:html|htm|php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi|htaccess|asis|sh|shtml|shtm|phtmFckeditor 2.0 <= 2.2允许上传asa、cer、php2、php4、inc、pwml、pht后缀的文件上传后 它保存的文件直接用的¥sFilePath = ¥sServerDir . ¥sFileName,而没有使用¥sExtension为后缀直接导致在win下在上传文件后面加个.来突破[未测试]而在apache下,因为"Apache文件名解析缺陷漏洞"也可以利用之,详见"附录A"另建议其他上传漏洞中定义TYPE变量时使用File类别来上传文件,根据FCKeditor的代码,其限制最为狭隘。

基于Java Web的HTML在线文本编辑器解决方案

基于Java Web的HTML在线文本编辑器解决方案

基于Java Web的HTML在线文本编辑器解决方案摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国内外开发者的亲睐。

在Java Web开发中使用FCKeditor可以实现类似微软Word桌面文本编辑器的许多强大功能,因此掌握FckEditor在Java Web开发环境下的配置过程也是开发者必备的技能之一。

关键词:Jsp;FckEditor;HTML;在线文本编辑器2基于Java Web 的HTML在线编辑器解决方案著名的开源网页编辑软件FCKEditor在09年发布至现在已经更新到3.0版本,FckEditor由于其资源轻量化、配置简单、免费开源、文本编辑功能齐全、支持多浏览器、支持PHP、JavaScript、ASP、、ColdFusion、Java、以及ABAP等不同的编程语言的强大优势,受到众多开发者亲睐。

目前,众多的Java Web 项目中FckEditor成为开发者对在线编辑器的首选,为网络文本交互提供文本样式编辑、图片上传下载和附件上传下载的功能。

3FckEditor编辑器在Java Web开发中的配置3.1开发环境和FckEditor配置文件(1)开发环境:MyEclipse7.5 ,JDK1.6 ,tomcat6.0;(2)FckEditor配置文件:FckEditor2.6.6,FckEditor java demo 2.6;3.2FckEditor在Java Web中的基本配置(1)在MyExclipse文件下建设Java Web项目FckEditor。

(2)解压FckEditor_2.6.6.zip文件,将解压后的根目录下的FckEditor文件夹拷贝到SSH框架项目下的WebRoot目录里;(3)将下载FckEditor java demo 2.6文件解压后,把根目录下Web INF中的lib里5个.jar文件:commons fileupload 1.2.1.jar、commons io 1.3.2.jar、FckEditor java core 2.4.jar、slf4j api 1.5.2.jar及slf4j simple 1.5.2.jar 拷贝到SSH框架项目下的Web INF目录中的lib目录里。

FCKeditor使用方法详解

FCKeditor使用方法详解

FCKeditor使用方法详解目录一、FCKeditor简介 (2)1.1 FCKeditor是什么 (2)1.2 FCKeditor的特点 (3)二、安装与配置FCKeditor (5)三、基本功能使用方法 (6)3.1 文本格式化 (7)3.2 段落和列表操作 (9)3.3 图片和表格插入 (10)3.4 表单字段 (11)3.5 样式和脚本 (12)四、高级功能使用方法 (13)4.1 可视编辑器 (14)4.2 自动排版 (16)4.3 批量导入/导出 (17)4.4 国际化支持 (18)4.5 客户端存储 (20)五、自定义插件与扩展 (21)5.1 如何安装插件 (22)5.2 插件的使用方法 (24)5.3 开发自定义插件 (25)六、常见问题与解决方案 (27)6.1 常见问题列表 (28)6.2 问题解决步骤 (29)七、实例演示 (30)7.1 创建一个简单的HTML页面 (31)7.2 在页面中添加FCKeditor (32)7.3 配置和使用FCKeditor的各种功能 (34)八、FCKeditor在主流开发框架中的应用 (35)8.1 PHP+MySQL环境下的应用 (36)8.2 环境下的应用 (37)8.3 Java/Spring环境下的应用 (39)九、总结与展望 (39)9.1 FCKeditor的优点 (40)9.2 FCKeditor的局限性与未来发展趋势 (41)一、FCKeditor简介FCKeditor是一款由德国Maxthon公司开发的强大的网页文本编辑器,它具有丰富的功能、高度的可定制性和易用性,被广泛应用于各种Web应用中,如论坛、博客、新闻发布等。

FCKeditor不仅提供了基本的文本编辑功能,还支持图像、表格、超链接等元素的插入和编辑,以及自定义插件和宏,可以满足用户的各种编辑需求。

FCKeditor采用了基于JavaScript的富文本编辑技术,具有高效的性能和较小的体积,可以轻松地集成到各种Web应用中。

eclipse java web项目反编译

eclipse java web项目反编译

文章标题:深入探讨eclipse中Java Web项目反编译的方法与重要性在当今数字化时代,软件开发已经成为不可或缺的一部分。

Java作为一种流行的编程语言,在企业级应用开发中被广泛应用。

而在Java开发过程中,反编译在项目维护和安全性检查中扮演着至关重要的角色。

本文将从深度和广度两个方面对eclipse中Java Web项目反编译的方法与重要性进行全面评估,并提供有价值的观点和理解。

一、eclipse中Java Web项目的反编译方法1. 导入反编译工具:在eclipse中,可以通过导入各种反编译工具来实现对Java Web项目的反编译。

常用的工具包括JD-GUI、Procyon 等,它们能够将.class文件转换为易于阅读的源代码,帮助开发者更好地理解和维护项目。

2. 设置反编译快捷键:在eclipse的设置中,可以为反编译工具设置快捷键,便于开发者在需要时快速进行反编译操作。

这样可以提高效率,减少开发过程中出现的问题。

3. 调试和修复:通过反编译工具,开发者可以方便地进行调试和修复工作,及时解决项目中的bug和错误。

这也是保障项目质量的关键步骤。

二、eclipse中Java Web项目反编译的重要性1. 代码安全性检查:反编译工具可以帮助开发者检查项目代码的安全性,避免出现潜在的漏洞和安全隐患。

通过查看反编译后的源代码,可以及时发现并修复可能存在的安全问题。

2. 项目维护与升级:在项目维护和升级过程中,使用反编译工具可以更好地理解现有的代码结构和逻辑,有助于进行代码重构和优化。

这对于提升项目的可维护性和可扩展性非常重要。

3. 知识学习和技术共享:通过反编译工具,开发者还可以学习他人的优秀代码和技术经验,提高自身的编程能力和水平。

也可以共享自己的代码给他人学习,促进技术交流和共同进步。

个人观点与理解对我个人而言,eclipse中Java Web项目反编译不仅是一项必需的技能,更是一种重要的态度和责任。

FCKeditor (jsp在线编辑器)配置总结

FCKeditor (jsp在线编辑器)配置总结

FCKeditor (jsp在线编辑器)配置总结折腾了两天,从eWebEditor到CKeditor再到FCKeditor真是费足了劲了!本人比较喜欢开源的,在网上狂搜一通最后被CKeditor强大的功能和华丽的界面吸引的五体投地~~,高高兴兴的下载了CKeditor,花费了半天的时间终于把CKeditor配置好了,结果一点图片发现连个上传图片的按钮都没有(~~~~(>_<)~~~~ ),原来还需要一个CKfinder插件。

于是又兴冲冲的跑到官网上找CKfinder,找到最后却发现就是没有java版的!!!而且这个插件好像是要收费的,哎~真是郁闷死了。

不能用CKeditor那就用FCKeditor吧,呵呵,下面牢骚归正传:一、首先到官网下载最新版本的FCKeditor 2.6.5下载地址:/project/downloading.php?group_id=75348&filename=FCKeditor_2.6.5.zip FCKeditor.Java 2.6 要下的有fckeditor-java-demo-2.6.war (示例,我觉得下载这一个就够了)fckeditor-java-2.6-src.zip (源文件,如果你想看就下吧)fckeditor-java-2.6-bin.zip (我下了,但没有上)二、(1)、把FCKeditor 2.6.5解压到WebRoot下(2)、解压fckeditor-java-2.6-bin.zip,把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar包拷贝到你的web程序的lib中,fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去(注意:slf4j-api和slf4j-simple的版本一定要一致)。

如果你觉得麻烦,那么就从fckeditor-java-demo-2.5.war 中直接将lib文件夹下的所有jar包复制到项目的lib中,我就是这么做的。

JS开发富文本编辑器TinyMCE详解

JS开发富文本编辑器TinyMCE详解

JS开发富⽂本编辑器TinyMCE详解⼀、题外话最近负责了⼀个cms⽹站的运维,⾥⾯存在很多和编辑器有关的问题,⽐如编辑⼀些新闻博客,论⽂模块。

系统采⽤的是FCKEditor,⾃我感觉不是很好,如下图特别是在⽤户想插⼊⼀个图⽚的话,就很⿇烦,所有⽤户共享⼀个⽂件⽬录,这样就不好了,于是便想到了TinyMCE编辑器,博客园默认的也是这个编辑器,接下来,我们开始吧⼆、TinyMCE编辑器集成步骤2.1:下载相关⽂件(1)下载TinyMCE插件包,如下图所⽰,下载开发版(2)下载其他功能包包括中⽂语⾔包zh_CN.js,图⽚上传操作需要的plugin.min.js和jquery.form.js这⼀点很重要,很重要,很重要哦下载完成后如下图所⽰2.2:操作步骤(1):复制TinyMCE到项⽬中解压下载到的tinymce_4.6.4_dev.zip,解压后会有⼀个tinymce⽂件夹,将整个⽂件夹放到WebContent⽬录下,⽬录结构如下图所⽰(2):页⾯集成TinyMCE在页⾯的JS标签中初始化TinyMCE编辑器,代码如下所⽰<script type="text/javascript">tinymce.init({selector: "textarea",upload_image_url: './upload', //配置的上传图⽚的路由height: 400,language:'zh_CN',plugins: ['advlist autolink lists link charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',image_advtab: true,templates: [{ title: 'Test template 1', content: 'Test 1' },{ title: 'Test template 2', content: 'Test 2' }],menubar: false});</script>运⾏如下图所⽰,基本的集成已经完毕三、TinyMCE编辑器本地上传图⽚功能注:默认的TinyMCE是没有上传本地图⽚到服务器的功能的,所以这⾥我们需要⾃⼰实现,下⾯我们就说⼀说具体的实现步骤3.1:集成uploadimage插件在./tinymce/js/tinymce/plugins⽬录下新建⼀个uploadimage⽬录,放⼊下载的plugin.min.js,⽬录结构如下图所⽰3.2:在TinyMCE初始化中添加上传图⽚按钮tinymce.init({selector: "textarea",upload_image_url: './upload', //配置的上传图⽚的路由height: 400,language:'zh_CN',plugins: ['advlist autolink lists link charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help uploadimage'],toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help uploadimage',image_advtab: true,templates: [{ title: 'Test template 1', content: 'Test 1' },{ title: 'Test template 2', content: 'Test 2' }],menubar: false});再次运⾏,发现在编辑器的菜单栏多了⼀个图⽚的按钮就是上传图⽚了(TinyMCE默认有⼀个image,可以去掉,因为那个image只可以给⽹络图⽚的URL),总这⾥plugins⾥⾯已经把默认的image去掉了,如下图3.3:实现上传本地图⽚到服务器的功能前提:需要先⽤java实现⼀个upload⼯具类,此⼯具类可以完成本地图⽚上传到服务器,并返回图⽚的URL给ajax,ajax在success的⽅法中接收URL并向TinyMCE中插⼊⼀个image标签JS核⼼代码如下,已包含在plugin.min.js⽂件中,这⾥注意TinyMCE的版本不⽤命令可能会有差异success: function (data) {//alert('2222');//alert(data);if (data!=null) {//alert('4444');editor.focus();//tinyMCE 4.X版本的插⼊对象tinyMCE.activeEditor.insertContent('<img src="'+data+'"></img>');// editor.selection.setContent(dom.createHTML('img', {src: src}));// data.file_path.forEach(function (src) {// editor.selection.setContent(dom.createHTML('img', {src: src}));// })}ajax提交form表单的操作中还⽤到了form.ajaxSubmit,所以需要在编辑器的页⾯引⼊jquery.form.js 包,整体如下所⽰<script type="text/javascript" src="./tinymce/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="./tinymce/js/tinymce/tinymce.min.js"></script><script type="text/javascript" src="./tinymce/js/tinymce/jquery.tinymce.min.js"></script><script type="text/javascript" src="./tinymce/js/jquery.form.js"></script>实现效果,点击图⽚上传可以从本地选择图⽚⽂件,确定后ajax异步上传,并且返回图⽚的URL,让TinyMCE执⾏插⼊img标签的操作四:演⽰⼀个编辑器发布⽹页内容的例⼦4.1:添加发布按钮在编辑器页⾯下⾯添加⼀个发布⽂章的按钮,定义onclick事件为GetTinyMceContent()function GetTinyMceContent(){// <!--// http request⽅式b_content的参数不能太长,太长会截断,这⾥只是做演⽰编辑器,真实情况是获取到内容到数据库然后// 展⽰的时候在页⾯遍历数据库字段content的内容// -->//alert('11');window.location.href="blog.jsp?b_content="+tinyMCE.activeEditor.getContent();}4.2:添加⽂章显⽰页⾯如下图所⽰<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>⽂章内容-HTML</title></head><body><h2 align="center">我的第⼀篇博⽂</h2><%= request.getParameter("b_content") %></body></html>4.3:运⾏效果在编辑器输⼊⼀些内容,并上传⼀个图⽚,如下图⽰点击发布⽂章的按钮,如下图所⽰,发布成功可以在⽹页查看⽂章的输出格式,⼤功已经告成!4.4:总结在真实的环境中TinyMCE的内容不会通过在Request请求的后⾯以?参数名=参数值,然后在页⾯<%= request.getParameter("b_content") %>的形式处理,这⾥只是做⼀个流程的演⽰就没涉及数据库内容。

FCKeditor使用方法详解

FCKeditor使用方法详解

FCKeditor使用方法技术详解作者:深蓝色QQ:76863715本文PHPChina论坛首发本文特为《PHP5和MySQL5 Web开发技术详解》一书编写1、概述FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。

具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。

它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。

本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。

FCKeditor官方网站:/FCKeditor Wiki:/2、下载FCKeditor登录FCKeditor官方站(),点击网站右上角“Download”链接。

笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。

如图1所示:图1:下载FCKeditor 2.4.3(最新稳定版)注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到网站上自动下载。

如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。

3、安装FCKeditor解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。

目录结构如下图所示:图2:网站目录结构图fckeditor目录包含FCKeditor2.4.3程序文件。

check.php用于处理表单数据。

add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。

3.1、用PHP调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件。

Java实现在线协作文档编辑

Java实现在线协作文档编辑

Java实现在线协作⽂档编辑⼤家在⼯作和学习中时常会遇到多⼈编辑⼀个⽂件的情况,⽽多⼈在线协作⽂档编辑器则是⼀个很实⽤、常⽤的⼯具,适合⼩组内的⽂档编辑。

例如可⽤于⼩团队内部进⾏实时编写和收集周报等。

这个项⽬介绍了如何设计实现该功能,使⽤java编写代码,应⽤⾮常流⾏的spring mvc框架,引⼊ckeditor插件,并加⼊localStorage缓存技术,最终利⽤Eclipse完成该实验。

⾮常适合Java 学习者⽤于练⼿。

项⽬涉及知识点:重点掌握 CKEditor重点掌握 LocalStorage 的使⽤了解 Java Web ⽅向的 SpringMVC 框架开发技巧了解 Java Web ⽅向的 Spring JDBCTemplate 开发技巧了解如何在 MySQL 中创建数据、创建表项⽬效果截图:代码开发完成后的效果图,如下:打开应⽤保存⾼清⼤图此处输⼊图⽚的描述实验原理:待实现的功能需求技术调研在线协作编辑实现多⼈在线编辑的功能,可⾃⾏开发web编辑器插件,但是实现成本较⾼,经调研⽬前已经有很多在线编辑器插件可以调⽤,请参考: HTML编辑器-HTML⽹页表单可视化在线编辑器插件⼤全其中,CKEditor(原FCKEditor)是⼀个现成的使⽤旨在简化Web内容创建HTML⽂本编辑器。

是国外⽐较流⾏的⽹页⽂本在线编辑器,早期DEDECMS管理后台发布内容地⽅使⽤此编辑器,这是⼀个所见即所得的编辑器,带来了共同的⽂字处理器的功能,直接到您的⽹页。

最后,因为 CKEditor 免费开源、完全可定制、⾼标准的质量等优点,该课程选择该插件作为前端的输⼊。

实时⾃动保存Web 缓存技术,涉及内容较多。

可参考:Web前后端缓存技术简谈常⽤缓存技术HTML5本地存储 localStorage 、sessionStorage、WebSQL、indexedDB最终,为了兼顾数据保存的简单⾼效和安全,我们选⽤ sessionStorage作为前端存储,因为sessionStorage的优点就是⽅便⾼效;同时为了保证数据的安全不丢失,我们在⽤户确认编写信息⽆误后,通过触发按钮的⽅式将数据提交后台,交由服务器进⾏存储,因为服务器存储数据安全性⾼。

FCKEditor控件的配置使用

FCKEditor控件的配置使用

网站项目:Fckeditor使用Step-By-Step最近项目中要用到在线编辑器,网搜下下,一箩筐,众说纷纭,介绍下Fckeditor使用手记。

一.下载FCKeditor V2.*.*.官网地址:/project/showfiles.php?group_id=75348FCKeditor2.*.*.zip :Click Here.zip :Click HereFckeditorV2.*.*解压后里面文件很多,只需保留几个重要的文件,具体如下(二)。

解压后里面Bin文件夹下,有Debug和Release两个文件夹,用哪个文件夹里面的FredCK.FCKeditorV2.dll都行。

(下载不同的版本,Fckeditor文件夹里面有的有这两个文件夹,有的只有一个,关键的是要将Fckeditor和FredCK.FCKeditorV2.dll的版本号控制好,不然以后会报“未能加载未能加载类型FredCK.FCKeditorV2.Uploader”或“未能加载类型FredCK.FCKeditorV2.FileBrowser.Connector”或“未能加载类型FredCK.FCKeditorV2.Config”,当然要是遇到这种情况,只需要点击下面的错误提示,跳转到相应页面,改page指令里面的:将FredCK.FCKeditorV2.Connector改为FredCK.FCKeditorV2.FileBrowser.Connector )二. 精简文件:1.进入FCKeditor文件夹,把所有“_”开头的文件和文件夹删掉,这些都是一些范例,只保留editor文件夹、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了;2.进入editor文件夹,删掉“_source”文件夹,里面放的同样是源文件;ng里面放的是语言包,如果只是用简体中文,那么只保留zh-cn.js就行,建议也保留en.js(英文)、zh.js(繁体中文)两个文件三.修改配置:1.注入FredCK.FCKeditorV2.dll:一般网上介绍的是将Bin文件夹下的FredCK.FCKeditorV2.dll作为第三方控件,导入工具箱中,其实也没那个必要,只需将它添加引用到网站的Bin里面就行了。

PHP中使用FCKeditor编辑器

PHP中使用FCKeditor编辑器

PHP中使用FCKeditor编辑器1、概述FCKeditor 是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。

具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。

它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。

本文将通过与 PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。

FCKeditor官方网站:/FCKeditor Wiki:/2、下载FCKeditor登录FCKeditor官方站(),点击网站右上角“Download”链接。

注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到网站上自动下载。

如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。

3、安装FCKeditor解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。

fckeditor 目录包含FCKeditor2.4.3程序文件。

check.php用于处理表单数据。

add_article.php和 add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。

3.1、用PHP调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件。

具体代码如下。

PHP代码:<?phpinclude("fckeditor/fckeditor.php") ; // 用于载入FCKeditor类文件?>接下来,我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。

具体代码如下所示(代码一般放在表单内)。

PHP代码:<?php$oFCKeditor = new FCKeditor('FCKeditor1') ; // 创建FCKeditor实例$oFCKeditor->BasePath = './fckeditor/'; // 设置FCKeditor目录地址$FCKeditor->Width='100%'; //设置显示宽度$FCKeditor->Height='300px'; //设置显示高度的高度$oFCKeditor->Create() ; // 创建编辑器?>下面是笔者创建好的实例代码,您可将代码保存为add_article.php通过浏览里打开http://127.0.0.1/add_article.php 查看FCKeditor安装效果。

PHP在线编辑器

PHP在线编辑器

Fckeditor的配置
知知不如好知,好知不如乐知
• 1、工具按钮设置
EditSource 显示HTML源代码 StrikeThrough 删除线 Save 保存 NewPage 新建空白页面 Superscript 上标 Subscript 下标 Preview 预览 JustifyLeft 左对齐 Cut 剪切 Copy 复制 Paste 粘贴 …….
常见在线编辑器
知知不如好知,好知不如乐知
常见在线编辑器
知知不如好知,好知不如乐知
• 4、TinyMCE
也是一个开源的富文本编辑器,不过名气没有FCKEditor大,功能还是不
常见在线编辑器
知知不如好知,好知不如乐知
• 5、KindEditor
一个国人开发的富文本编辑器,貌似还不错,没有深入研究
常见在线编辑器
知知不如好知,好知不如乐知
常见在线编辑器
常见在线编辑器
知知不如好知,好知不如乐知
• 1、FreeTextBox
一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是 免费的,但是不开源,上传图片上传附件等功能没有,扩展性差。
常见在线编辑器
知知不如好知,好知不如乐知
• 2、CuteEditor
常见在线编辑器
知知不如好知,好知不如乐知
• 7、新浪博客编辑器(SinaEditor)
常见在线编辑器
知知不如好知,好知不如乐知
FckEditor的配置及使用
Fckeditor的配置和使用
知知不如好知,好知不如乐知
• 假设网站的虚目录
Fckeditor的配置和使用
知知不如好知,好知不如乐知
• 调用FCKeditor 的两种方法

FCK的使用

FCK的使用

呵呵,相信FCK大家都不陌生,但是对于新手来说可能比较陌生了!下面就让偶带领新人,畅游FCK!下边介绍一下FCKeditor2.6.3在PHP程序中的安装配置方法,首先到FCKeditor官方网站上下载FCKeditor的最新版本FCKeditor2.6.3多国语言版下载完成了之后解压到网站的根目录就算是安装了吧:一、使用实例首先就是观看_samples里的例子,查找自己最想要的样式!然后直接复制文件到到自己想要的位置重命名即可:下面以fckeditor/_samples/phpsample01.php为例1、将修改成正确的路径include("../../fckeditor.php") ;我的是include("./fckeditor/fckeditor.php");2、把$oFCKeditor->BasePath = $sBasePath ;改为$oFCKeditor->BasePath ='/fckeditor/' ;fckeditor为你FCKeditor所在位置然后删除或者注视$sBasePath = $_SERVER['PHP_SELF'] ;$sBasePath = substr( $sBasePath, 0, strpos( $sBasePath, "_samples" ) ) ; 其实这时候你的编辑器已经可以浏览了!3、拷贝压缩包里的fckeditor/_samples/sampleposteddata.php$postedValue就是编辑器了值,直接付给变量,插入数据即可二、启用中文语言包;用Editplus打开FCKeditor目录下的fckconfig.js,修改第62行FCKConfig.DefaultLanguage = ‘en’ ;将en改为zh-cn,即FCKConfig.DefaultLanguage = ‘zh-cn’ ;启用中文包;注:在FCKeditor2.6.3中,默认的支持的语言即为PHP,所以不用修改第276,277行。

基于Java Web的HTML在线文本编辑器解决方案——以FckEditor在线编辑器为例

基于Java Web的HTML在线文本编辑器解决方案——以FckEditor在线编辑器为例
第 1 R 第2 0 期
V 1 O . o . NO2 1
F b. Ol e 2 1
基 于 J v e a aW b的 H TM 线 文 本 L在 编 辑 器 解 决 方 案
以 F k i r 线 编 辑 器 为 例 c Edt 在 o
于梅 英 , 姜 波 , 张 珂
( 州 大 学 网络 教 育 学 院 , 肃 兰 州 7 0 0 ) 兰 甘 3 0 0
ior t 。
( ) 压 F k dtr2 6 6 z 2解 c E i 一 . . .i 件 , 解 压 后 的根 目 o p文 将
的 HT ML在线 编 辑器 也是 千 差 万别 , 中大 多数 都支 持 常 其
用 的 we b开 发 语 言 , AS P 、 NE 等 语 言 。 然 而 , 如 P、 HP . T 随 着 Jp技 术 的 成 熟 和 发 展 , 部 分 不 支 持 J p编 辑 器 已 不 能 s 一 s
2 基于 Jv b的 H ML在线编辑器解 决方案 aaWe T
著 名 的 开 源 网 页 编 辑 软 件 F KEdtr在 O C i o 9年 发 布 至 现 在 已经 更 新 到 3 0版 本 , c E i r由 于 其 资 源 轻 量 化 、 . F k dt o 配 置 简单 、 费 开 源 、 本 编 辑 功 能 齐 全 、 持 多 浏 览 器 、 免 文 支 支持 P HP、a a cit AS 、 P NE C lF s n J v 、 Jv S r 、 P AS . T、 od u i 、a a p o
上 传 文 件或 附 件 的 路 径及 存 放 文 件 的文 件 夹 名 , 根 可
据 项 目 需 要 自行 设 定
33 实 现文本样 式编辑 、 . 图片 上 传 和 附 件 上 传 下 载

最强悍的FckEditor下载安装配置使用全攻略中文教程

最强悍的FckEditor下载安装配置使用全攻略中文教程

最强悍的FckEditor下载安装配置使用全攻略中文教程FckEditor配置手册中文教程详细说明性能首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在开启编辑器时需要装载太多的文件.比如CUTEEDITOR,虽然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JAVASCRIPT功力,集易用性与强大的功能与一体..与编辑器相关的所有图像,脚本以及调用页.语言文件.编辑器的皮肤文件.工具样的贴图等这些将导致在服务器和客户端间产生相当的流量.如果有许多文件被调用,那么即便每个文件很小.也会让用户等得不耐烦.装载顺序从2.0版开始,编辑器按以下步骤装载资源:.基本页(就是编辑器所在页)以及装入编辑器的JS脚本.用来建立编辑器的脚本.编辑器的语言和皮肤..建立编辑器..载入预置的编辑文档内容..从现在开始,用户可以阅读和编辑文档了,不过,拖拽支持以及工具栏都是不可用的.载入编辑器引擎脚本.建立工具栏,并且可用.从现在开始,编辑器的所有功能都已经完整.载入工具栏图标脚本压缩在打包任何新版本时,编辑器的JS脚本将会进行预处理.预处理步骤如下:.移除所有代码注释.移除所有无用的空白字符..将脚本合并成几个文件使用上面的方法,我们可以将脚本文件的大小压缩到原来的50%.压缩后,原始的代码仍然存在于一个名为_Source的文件夹中如何打包?编辑器已经自带了打包程序,它位于FCKEDITOR的根文件夹中_PACKAGER文件夹中,名为Fckeditor.Packager.exe,将其复制到FCKEDITOR根文件夹中并运行,即可自动将JS 脚本打包并压缩需要注意的是该程序是一个.NET程序,必须安装.NET FRAMEWORK才能使用想要获取支持?如果你捐赠15000欧元,你就可以获得1年的免费技术支持(比较贵的说,相当于人民币15万,不过西欧的费用相当惊人)如何安装?1.下载最新版的FCKEDITOR2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置)3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问:http://&lt;your-site&gt;/FCKeditor/_samples/default.html注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示:oFckeditor.BasePath="/Components/fckeditor/";另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的如何将FCKEDITOR整合进我的页面?由于目前的版本提供的FCKEDITOR仅提供了JAVASCRIPT式的整合,因此,这里仅讲述如何应用JAVASCRIPT来整合FCKEDITOR到站点中,当然,其他各种语言的整合,你可以参考_samples文件夹中的例子来完成1,假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如:&lt;script type="text/javascript"src="/fckeditor/fckeditor.js"&gt;&lt;/script&gt;其中路径是可更改的2,现在,FCKEDITOR类已经可以使用了.有两个方法在页面中建立一个FCKEDITOR编辑器:方法1:内联方式(建议使用):在页面的FORM标记内需要插入编辑器的地方置入以下代码:script type="text/javascript"&gt;var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.Create() ;&lt;/script&gt;方法2:TEXTAREA标记替换法(不建议使用):在页面的ONLOAD事件中,添加以下代码以替换一个已经存在的TEXTAREA标记&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;window.onload = function(){var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; oFCKeditor.ReplaceTextarea() ;}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;textarea id="MyTextarea" name="MyTextarea"&gt;This is &lt;b&gt;the&lt;/b&gt; initial value.&lt;/textarea&gt;&lt;/body&gt;&lt;/html&gt;3.现在,编辑器可以使用了FCKEDITOR类参考:下面是用来在页面中建立编辑器的FCKEDITOR类的说明构造器:FCKeditor( instanceName[, width, height, toolbarSet, value] )instanceName:编辑器的唯一名称(相当于ID)WIDTH:宽度HEIGHT:高度toolbarSet:工具条集合的名称value:编辑器初始化内容属性:instanceName:编辑器实例名width:宽度,默认值为100%height:高度,默认值是200ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Defaultvalue:初始化编辑器的HTML代码,默认值为空BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为trueDisplayErrors:是否显示提示错误,默为true;集合:Config[Key]=value;这个集合用于更改配置中某一项的值,如oFckeditor.Config["DefaultLanguage"]="pt-br";方法: Create()建立并输出编辑器RepaceTextArea(TextAreaName)用编辑器来替换对应的文本框如何配置FCKEDITOR? FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVASCRIPT语法.修改后,在建立编辑器时,可以使用以下语法:var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.Config['CustomConfigurationsPath'] ='/myconfig.js' ;oFCKeditor.Create() ;提醒:当你修改配置后,请清空浏览器缓存以查看效果配置选项:AutoDetectLanguage=true/false 自动检测语言BaseHref="" _fcksavedurl="""" 相对链接的基地址ContentLangDirection="ltr/rtl" 默认文字方向ContextMenu=字符串数组,右键菜单的内容CustomConfigurationsPath="" 自定义配置文件路径和名称Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容DefaultLanguage="" 缺省语言EditorAreaCss="" 编辑区的样式表文件EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML EnableXHTML=true/false 是否允许使用XHTML取代HTMLFillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代FontColors="" 设置显示颜色拾取器时文字颜色列表FontFormats="" 设置显示在文字格式列表中的命名FontNames="" 字体列表中的字体名FontSizes="" 字体大小中的字号列表ForcePasteAsPlainText=true/false 强制粘贴为纯文本ForceSimpleAmpersand=true/false 是否不把&amp;符号转换为XML实体FormatIndentator="" 当在源码格式下缩进代码使用的字符FormatOutput=true/false 当输出内容时是否自动格式化代码FormatSource=true/false 在切换到代码视图时是否自动格式化代码FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U 标记IeSpellDownloadUrl=""下载拼写检查器的网址ImageBrowser=true/false 是否允许浏览服务器功能ImageBrowserURL="" 浏览服务器时运行的URL ImageBrowserWindowHeight="" 图像浏览器窗口高度ImageBrowserWindowWidth="" 图像浏览器窗口宽度LinkBrowser=true/false 是否允许在插入链接时浏览服务器LinkBrowserURL="" 插入链接时浏览服务器的URL LinkBrowserWindowHeight=""链接目标浏览器窗口高度LinkBrowserWindowWidth=""链接目标浏览器窗口宽度Plugins=object 注册插件PluginsPath="" 插件文件夹ShowBorders=true/false 合并边框SkinPath="" 皮肤文件夹位置SmileyColumns=12 图符窗列数SmileyImages=字符数组图符窗中图片文件名数组SmileyPath="" 图符文件夹路径SmileyWindowHeight 图符窗口高度SmileyWindowWidth 图符窗口宽度SpellChecker="ieSpell/Spellerpages" 设置拼写检查器StartupFocus=true/false 开启时FOCUS到编辑器StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置TabSpaces=4 TAB键产生的空格字符数ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏ToolbarSets=object 允许使用TOOLBAR集合ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开UseBROnCarriageReturn=true/false 当回车时是产生BR 标记还是P或者DIV标记如何自定义样式列表呢?FCKEDITOR的样式工具栏中提供了预定义的样式,样式是通过XML文件定义的,默认的XML样式文件存在于FCkEditor根文件夹下的FckStyls.xml文件中这个XML文件的结构分析如下:&lt;?xml version="1.0" encoding="utf-8" ?&gt;&lt;Styles &gt;&lt;Style name="My Image" element="img"&gt;&lt;Attribute name="style" value="padding: 5px" /&gt;&lt;Attribute name="border" value="2" /&gt;&lt;/Style &gt;&lt;Style name="Italic" element="em" /&gt;&lt;Style name="Title" element="span"&gt;&lt;Attribute name="class" value="Title" /&gt;&lt;/Style &gt;&lt;Style name="Title H3" element="h3" /&gt;&lt;/Styles&gt;每一个STYLE标记定义一种样式,NAME是显示在下拉列表中的样式名,ELEMENT属性指定此样式所适用的对象,因为FCKEDITOR中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式拼写检查FCKEDITOR带了两种拼写检查工具,一种是ieSpell,默认情况下使用这种,使用这种方式的拼写检查,要求客户下载并安装iespell这个小软件,另外,也提供SpellPager的方式来进行拼写检查,不过,由于SPELLPAGER是由PHP编写的服务器端脚本,因此,要求你的WEB服务器必须支持PHP脚本语言方可更改拼写检查器的方式请参见有关配置文件的详细说明压缩脚本为了提供脚本载入的效率,FCKEDITOR采用以下方法对脚本尽量压缩以减少脚本尺寸:1,移除掉脚本中的注释2.移除掉脚本中所有无意义的空白另外,FCKEDITOR还提供了一个专门用于压缩脚本的工具以便你在发布时能减小文件尺寸,你可以将_Packager文件夹中的Fckeditor.Packager.exe复制到FCKEDITOR根文件夹来运行并压缩脚本本地化FCKEDITOR如果FCKEDITOR没有提供您所需要的语言(实际上全有了),你也可以自行制作新的语言,你只需要复制出EN.JS,然后在其基础上进行翻译.另外,语言名称与对应的脚本文件名必须遵循RFC 3066标准,但是,需要小写,例如:Portuguess Language对应的脚本文件名必须为pt.js如果需要针对某个国家的某种语系,则可以在语系缩写后加上横线及国家缩写即可在使用时,系统会自动侦测客户端语系及国别而运用适当的界面语言.当建立一种新的语言后,你必须在"Edit/lang/fcklanguagemanager.js"中为其建立一个条目,如下所示:FCKLanguageManager.AvailableLanguages ={en : 'English',pt : 'Portuguese'} 需要提醒的是,文件必须保存为UTF-8格式如何与服务器端脚本进行交互?请查看例子以得到相关内容另外,在中以以下步骤使用1.把FCKEDITOR添中到工具箱2.托拽FCKEDITOR控件到页面3.为其指定名称4.FCKEDITOR类的所有属性不光可以在代码中使用,而且可以作为FCKEDITOR控件的属性直接使用,例如,要改变皮肤,可以在UI页面中指定SkinPath="/fckeditor/editor/skins/office2003"即可,其实FCKEDITOR的版本可以做得更好,你可以找到FCKEDITOR 2.1的源文件,然后修改该控件的设计,为其暴露更多有用的属性,重新编译即可5,POSTBACK后的数据,使用FCKEDITOR控件的value属性获得6.由于默认状态下,不允许提交含有HTML及JAVASCRIPT的内容,因此,你必须将使用FCKEDITOR的页面的ValidateRequest设为false.(&lt;%@page validteRequest="false" %&gt;即可)附:一、如何设置上传文件语言把FCKeditor根目录下面的fckconfig.js文件里var_FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php这两行中改成您所需要调用的编辑器语言,如用则改为aspx;二、解决中文的问题:在web.config中加入:&lt;globalization requestEncoding="GB2312" responseEncoding="GB2312"/&gt;这样设置后可以显示中文的文件,但URL地址也是中文的;如果服务器对中文地址的解析不好,可能导致图片无法浏览;所以修改:editor\filemanager\browser\default\frmresourceslist.html中的OpenFile函数,把window.top.opener.SetUrl( fileUrl ) ;修改为:window.top.opener.SetUrl( escape(fileUrl) ) ;三.设置上传的目录:1:在web.config中设置:&lt;appSettings&gt;&lt;add key="FCKeditor:UserFilesPath"value="/fck/UpLoad/" /&gt;&lt;/appSettings&gt;2:在Session中设置:在editor\filemanager\browser\default\connectors\aspx\conne ctor.aspx中加入以下代码:&lt;script runat="server" language="C#"&gt;protected override void OnInit(EventArgs e){Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";}&lt;/script&gt;如何在中动态设置上传图片的路径?1.在javascript中修改FCKConfig.ImageBrowserURL的值,修改方式如下:FCKConfig.ImageBrowserURL += "?Path=要上传的文件路径";如:要把文件上传到站点根目录的UploadFile文件夹中,则设置为:FCKConfig.ImageBrowserURL += "?Path=/UploadFile"; 2.在"editor\filemanager\browser\default\connectors\aspx\conn ector.aspx"文件最后中增加以下程序:&lt;script runat="server" language="C#"&gt;protected override void OnInit(EventArgs e){if( Request.QueryString["Path"]==null ){Session["FCKeditor:UserFilesPath"] = "/UpLoadFiles/"; //设置默认值}else{Session["FCKeditor:UserFilesPath"] =Request.QueryString["Path"];}}&lt;/script&gt;多环境下的配置和使用技巧在fckeditor中添加右键菜单现在网上介绍FCKEditor如何配置,如何精简的例子非常之多,如有需要可以google一下,此处不必赘述。

FCKeditor编辑器在Java中的应用

FCKeditor编辑器在Java中的应用
F e o 编辑器在J v 中的应用 CK dt r i aa
■ 中国人 民银 行上饶 市 中心支行 朱 勇士
在Jv的We应用开发 中, aa b 大量文本输入往往因缺

< e ve > s r lt
乏像MSwod r一样 的版面编辑功能, 页面输 出显得不够
漂亮。 最近几年虽然出现多款支持J a a 的在线编辑器 , v

自 项 目的/ b otF 将fk dt -aa 24z 解压 建 We R o厂 。 ce i rjv 一 .. p o i
三 、 C e io 的应 用 FK d r t
完成 以上配置以后, 就可以在项 目中使用F K d o C e ir t
编辑器。
( ) 用 F K dtr 一 调 C ei o
< cit y e ” x/ v sr t r : / k dtr sr p = t t aa ci ”sc ” c e i / p t e j p f o f eirs> / r t c d o.” < ci > k tj s p
s 4—i pe 1 .. r l js l . 2 a类包 复制到 自 项 目的/ b o t f m 一5 j 建 We R o /
WE — N / b ̄o B I Fl / i
调用 F K d o的方 式 主 要 有三 种。 C eir t
另 外 , 需 要 在 官 网 中下 载 f k d t r i v — 还 c e io — a a d mo 24w r 件 。 其发 布 在t mc t 然 后把 e 一 . .a文 将 o a 中,
/c e i re i rflma a e/o n cos fk dt /d t / e n g rc n e tr/ o o i <ulp t r > / r- at n e < s rlt ma pn > /e ve— p ig

FCKeditor_2.6.3使用说明

FCKeditor_2.6.3使用说明

FCK在MVC和中的配置和使用收藏FCK在MVC和中的配置和使用一:FCK配置1. 下载FCKeditor_2.6.3.zip(核心文件)_2.6.3.zip(。

Net Control)(下载地址:FCKeditor 的压缩包/sourceforge/fckeditor/FCKeditor_2.4.3.zipFCKeditor 的.net 2.0核心库/sourceforge/fckeditor/_2.2.zip)(或者直接到我的资源/source/1859109中去下载,里面有使用的例子,结合下面内容一看就会)2. 部署到.NET网站中FCKeditor_2.6.3.zip解压后将fck根目录改名为fckeditor,放到网站根目录下。

网站根目录下创建一个文件夹uploadfiles,用于存放上传的文件在网站中引用_2.6.3.zip中的“FredCK.FCKeditorV2.dll”(注意:在IIS6.0下,上传图片的时候,会出现JS没有权限的错误,解决方法是,更改FredCK.FCKeditorV2.dll的源码,找到FileBrowser/FileWorkerBase.cs 文件代码124 行Response.Write( @"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();" );把try 中的document.domain=d; 删除即可.然后重新生成FredCK.FCKeditorV2.dll即可)3. 简化fck配置删除所有以_开始的文件和文件夹,在filemanager中的connector中除aspx以外的文件夹4. 修改fck的语言fckeditor中的fckconfig.js61~63行FCKConfig.AutoDetectLanguage = false ;FCKConfig.DefaultLanguage = 'zh-cn' ;FCKConfig.ContentLangDirection = 'ltr' ;5. 修改上传和浏览文件的程序语言类型fckeditor中的fckconfig.js276~277行var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py6. 上传权限设置fckeditor2.6.3默认已经在fckconfig.js中允许被授权的连接上传和浏览文件了,但是默认情况下有将所有的连接都设为了未授权状态。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

FCKeditor使用详解JAVA版(一)1、概述FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。

具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。

它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。

FCKeditor官方网站:/FCKeditor Wiki:/2、下载FCKeditor登录FCKeditor官方站(),点击网站右上角“Download”链接。

目前最新版本为2.6.4如图1所示:FCKeditor使用详解JAVA版(二)3、安装FCKeditor解压“FCKeditor_2.6.4.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。

fckeditor目录包含FCKeditor_2.6.4程序文件。

1、解压FCKeditor_2.2.zip,(FCKeditor主文件),将FCKeditor目录复制到网站根目录下,2、解压FCKeditor-2.3.zip,(JSP,FCKeditor整合包),作用:This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.3、将FCKeditor-2.3/web/WEB-INF/web.xml中的两个servlet,servlet-mapping定义复制到自已项目的web.xml文件中,修改1.<servlet-mapping>2.<servlet-name>Connector</servlet-name>3.<url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector4.</url-pattern>5.</servlet-mapping>6.7.<servlet-mapping>8.<servlet-name>SimpleUploader</servlet-name>9.<url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>10.</servlet-mapping>为11.<servlet-mapping>12.<servlet-name>Connector</servlet-name>13.<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>14.</servlet-mapping>15.16.<servlet-mapping>17.<servlet-name>SimpleUploader</servlet-name>18.<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>19.</servlet-mapping>4、将FCKeditor-2.3/web/WEB-INF/lib目录下文件复制到自已项目的lib文件夹中5、在需JSP使用FCKeditor的界面中加入:20.// 文件开头处加入21.<%@ taglib uri="/tags-fckeditor"prefix="FCK" %>22.//要使用的地方加入23.<FCK:editor id="content"basePath="/FCKeditor/"24.imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"25.linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"26.flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"27.imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"28.linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"29.flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">30.this is default content :)31.</FCK:editor>3.1、在JSP中使用Fckeditor调用FCKeditor必须先载入FCKeditor js文件。

具体代码如下。

<script type="text/javascript" src="/path/fckeditor/fckeditor.js"></script>创建编辑器有三种方法,这里只介绍渲染<textarea>和用Javascript创建编辑器的方法:第一种:渲染<textarea>先在JSP或者HTML页面中创建一个<textarea rows=”10” cols=”20” name=”content”>,指定它的名字,比如我们这个<textarea>的名字是:content。

然后在<head></head>中间加上:<script type="text/javascript">window.onload = function(){var oFCKeditor = new FCKeditor('content') ;oFCKeditor.BasePath = "/path/fckeditor/";oFCKeditor.Width="100%";oFCKeditor.Height="430";oFCKeditor.ReplaceTextarea() ;}</script>第二种:使用JavaScript创建编辑器:在你希望编辑器出现的位置,加上:<script type="text/javascript">var oFCKeditor = new FCKeditor('content');oFCKeditor.BasePath = "/ path/fckeditor/";oFCKeditor.ToolbarSet = "Default";oFCKeditor.Width="100%";oFCKeditor.Height="430";oFCKeditor.Create();</script>这样,我们的编辑器就创建好了。

但是为了更好的使用Fckeditor,我们还需要对它进行一些配置.FCKeditor使用详解JAVA版(三)3.2、配置篇:首先,我们创建自己的配置文件,在fckeditor目录下,我们创建一个myconfig.js,和fckeditor.js 处于同级目录下。

1. Fckeditor默认语言是英文的,所以,我们第一件事情就是把它改成中文的。

我们在自己的配置文件中,加入下面两句话:FCKConfig.AutoDetectLanguage = false ;FCKConfig.DefaultLanguage = 'zh-cn' ;第一句话的意思是说,不要让Fckeditor自动检测语言,第二句话就是把默认语言改成中文。

2. 我们再来定义皮肤;Fckeditor默认的皮肤很难看,最起码我个人就不喜欢它的默认风格,所以我要把它改掉。

在Fckeditor中定义了一套office2003的皮肤,我们就用它。

在我们的配置文件中加入:FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/';3. Fckeditor中,按Shift+Enter默认是换行,按Enter默认是一个段落,这显然不符合我们的操作习惯,我们也来改一下,还是在我们的配置文件中,加入下面这两句话:FCKConfig.EnterMode = 'br';FCKConfig.ShiftEnterMode = 'p';4. 下来定义字体,Fckeditor默认没有中文字体,我们来加几个常用字体:FCKConfig.FontNames = '宋体;幼圆;隶书;楷体_GB2312;黑体;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;' ;5. 字体大小,加入下面这句话:FCKConfig.FontSizes = '12px;14px;16px;18px;24px;26px;28px;32px;' ;FCKeditor使用详解JAVA版(四)6. 自定义表情:将fckeditor/editor/ fck_image.html中的<body>改成<body scroll="no"style="overflow: hidden">,然后在fckeditor/images/smiley/下建立一个表情目录,比如我建立一个叫taobao的目录,然后将自己的表情加进去。

相关文档
最新文档