fckeditor2.6.4使用指南

最新推荐文章于 2020-06-17 17:27:53 发布

在架构师的路上行走

最新推荐文章于 2020-06-17 17:27:53 发布

阅读量170

点赞数

文章标签： fckeditor ASP.net ASP Servlet 浏览器

本文链接：https://blog.csdn.net/zlwgege/article/details/83534698

版权

编辑器FCKeditor使用指南

HTML编辑器FCKeditor使用详解... 1

FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。本文讲述了HTML编辑器FCKeditor的使用方法。

一、简介

　　功能：所见即所得，支持图片和Flash，工具栏可自由配置，使用简单

　　兼容性：IE 5.5+、Firefox 1.5+、Safari 3.0+、Opera 9.50+、Netscape 7.1+、 Camino 1.0+

成熟度：使用广泛，被Baidu、CSDN等选用

二、下载

现在由于一系列因素,FCKEDITOR己经出到3.X系列,并更名为CKEDITOR.在其官网上己经找不到我现在所用版本的引子.我所采用的是2.6.4版本,这个版本比较稳定.至于新版本3系列,目前据说还只能用在测试上,不能正式使用.所以,这个介绍,是针对2.6.4来使用的.

三、部署

第一步：下载fckeditor

fckeditor支持很多语言。

分为两个，一个是公用的包使用版本是2.6.4，里面基本是js和css等语言无关文件，用来生成编辑框。

另一个是和语言有关的，我用的是java 下载java的，最新版式2.4.1

下载fck是没法使用的，会报错。还需要一个s4fj的包 slf4j-simple-1.5.2.jar

第二步建立sample

讲fck的包和那个slf4j的包加入项目路径

fck的包包括 fckeditor-java-core-2.4.1.jar

commons-fileupload-1.2.1.jar

commons-io-1.3.2.jar

slf4j-api-1.5.2.jar

复制fck2.6.4里面的文件夹到工程根目录

在工程目录src/下新建一个文件fckeditor.properties，添加内容：connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

connector.userFilesPath=/upload/UserFiles保存即可。
2)修改web.xml，用来提供上传功能支持，
添加内容：
<servlet>
      <servlet-name>Connector</servlet-name>
        <servlet-class>
          net.fckeditor.connector.ConnectorServlet
      </servlet-class>
      <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
      <servlet-name>Connector</servlet-name>
      <url-pattern>
        /fckeditor/editor/filemanager/connectors/*
      </url-pattern>
    </servlet-mapping>
3）建立sample。jsp

<%@ page contentType="text/html; charset=GBK" %>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<html>
<head>

</head>
<body>
<span>

var oFCKeditor = new FCKeditor('office.content');//传入参数为表单元素（由FCKeditor生成的input或textarea）的name

oFCKeditor.BasePath='<%=request.getContextPath()%>/fckeditor/';//指定FCKeditor根路径，也就是fckeditor.js所在的路径

oFCKeditor.Height='97%';

oFCKeditor.ToolbarSet='Default';//指定工具栏

oFCKeditor.Value="";//默认值

oFCKeditor.Create();

</script>

</span>
</body>
</html>

如些这般就配好了.可以正常始用

　　本例以WebRoot作为应用根路径，部署后的目录结构如下图所示：

从官网上下载的文件有很多是不需要的,本着尽量去掉多余部分,减少项目所占空间的原则,上面是我精简后的部分,可以直接使用.

四FCK具体配置：

1、配置语言

打开fckconfig.js文件(相对FCKeditor文件夹，以下同)，把自动检测语言改为不检测，把默认语言改为简体中文：

FCKConfig.AutoDetectLanguage = false；
FCKConfig.DefaultLanguage = 'zh-cn'；
FCKConfig.TabSpaces = 1；　　//在编辑器中是否可以是否TAB键 0 不可用 1 为可用

2、字体列表：

打开fckconfig.js文件，在字体列表中添加常用的“宋体；黑体；隶书；楷体_GB2312”

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'；
编辑器域内默认的显示字体为12px，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，把body, td下的font-size:14px即可

3、文件上传：

FCKeditor的文件管理程序在filemanager文件夹中，又分为浏览(browser)和上传(upload)两种。浏览是指浏览服务器文件并可以选择，也可以上传本地文件至服务器；上传是指快速上传(QuickUpload)，在窗口中点“上传”选项卡打开就是，跟我们使用的UBB编辑器有点相似，选择本地文件后上传就行。
也就是说FCKeditor中有一个文件浏览，有两个文件上传，而这些设置有些在一个文件中，有的则在多个文件中。比较复杂，改动比较多，我们再分几个小点儿来说。

①打开和关闭文件浏览和上传功能：

fckconfig.js，以下内容设为true为开，false则为关。
文件浏览和浏览中上传功能：