在线文本编辑器FCKeditor在JSP项目开发中的使用方法

简介: 以下均在tomcat服务器下操作(不是开发环境下的操作)首先下载两个包:FCKeditor_2.6.4.zip,(FCKeditor主文件)FCKeditor-2.3.zip,(jsp,FCKeditor整合包)

以下均在tomcat服务器下操作(不是开发环境下的操作)


首先下载两个包:

FCKeditor_2.6.4.zip,(FCKeditor主文件)

FCKeditor-2.3.zip,(jsp,FCKeditor整合包)


第一步:

解压FCKeditor_2.6.4.zip,(FCKeditor主文件),将fckeditor目录复制到网站根目录下,如果架设一个以bbs为名的网站,把fckeditor目录复


制到bbs目录下(注意是tomcat下面的bbs文件目录,而不是开发环境下的bbs目录)。


第二步:

解压FCKeditor-2.3.zip,(jsp,FCKeditor整合包,在官网上它是属于java文件那个部分),将FCKeditor-2.3/web/WEB-INF/web.xml中的两个


servlet,servlet-mapping定义复制到自已项目的web.xml文件(注意是tomcat下的/bbs/WEB-INF/web.xml的web.xml文件)中

修改自已项目的web.xml文件中的:


<servlet-mapping>  

               <servlet-name> Connector </servlet-name>  

               <url-pattern> /editor/filemanager/browser/default/connectors/jsp/connector </url-pattern>  

       </servlet-mapping>  


       <servlet-mapping>  

               <servlet-name> SimpleUploader </servlet-name>  

               <url-pattern> /editor/filemanager/upload/simpleuploader </url-pattern>  

</servlet-mapping>


 为 :


<servlet-mapping>  

               <servlet-name> Connector </servlet-name>  

               <url-pattern> /fckeditor/editor/filemanager/browser/default/connectors/jsp/connector </url-pattern>  

       </servlet-mapping>  


       <servlet-mapping>  

               <servlet-name> SimpleUploader </servlet-name>  

               <url-pattern> /fckeditor/editor/filemanager/upload/simpleuploader </url-pattern>  

   </servlet-mapping>



将FCKeditor-2.3/web/WEB-INF/lib目录下文件复制到自已项目的lib文件夹(注意是tomcat下的/bbs/WEB-INF/lib文件夹)中,


第三步:

在(bbs下)网站根目录建立一个test.jsp和test1.jsp文件


test.jsp文件的内容是:

<%@ page language="java" import="com.fredck.FCKeditor.*" %>

<form action=test1.jsp method="post">

<%

FCKeditor oFCKeditor ;

oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;

oFCKeditor.setBasePath( request.getContextPath() + "/fckeditor/" ) ;

oFCKeditor.setValue( "This is some <strong> sample text </strong> . You are using <a


href=\"http://www.fredck.com/fckeditor/\"> FCKeditor </a> ." );

out.println(oFCKeditor.create()) ;

%>

<input type="submit" name="Submit" value="提交" onClick="return checkForm()" />

<input type="reset" name="Submit2" value="重置">

</form>



test1.jsp文件的内容是:


<%@ page language="java" import="java.util.*"%>

<%

String contentString = (String)request.getParameter("EditorDefault");

out.println("***************<br>");

out.println("contentString="+contentString);

out.println("***************<br>");

%>


意思是,在test.jsp中创建一个FCKeditor对象,然后在它的初始化方法中把EditorDefault作为属性,并且和request关联起来

然后在test1.jsp里面通过request.getParameter读取属性EditorDefault的值,这个值就是文本编辑器的内容,可以直接存放到数据库中

读出来以后是按html翻译后的,即和编辑时的一模一样。


注意事项:

以下是使用在线编辑器必不可少的

<%@ page language="java" import="com.fredck.FCKeditor.*" %>


<%

FCKeditor oFCKeditor ;

oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;

oFCKeditor.setBasePath( request.getContextPath() + "/fckeditor/" ) ;

out.println(oFCKeditor.create());

%>



精简内容(以下均为摘抄):



最后开始配置工具栏,工具栏的配置主要是对 fckeditor 目录下的 fckconfig.js 进行修改。


可以在网上搜索‘fckconfig.js’或者 ‘FCK 工具栏’,找到一篇文章:FCK编辑器精简工具栏



fckconfig.js    中关于工具栏的设置原始为:


FCKConfig.ToolbarSets["Default"] = [

['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],

'/',

['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

'/',

['Style','FontFormat','FontName','FontSize'],

['TextColor','BGColor'],

['FitWindow','ShowBlocks','-','About'] // No comma for the last row.

] ;



文章里精简为:


//默认编辑器工具栏设置

FCKConfig.ToolbarSets["Default"] = [

['Source'],['PasteText','PasteWord','-'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','ShowBlocks'],

'/',

['Bold','Italic','Underline','StrikeThrough'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['Link','Unlink'],['TextColor','BGColor'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

'/',

['FontFormat','FontName','FontSize'],


] ;



最后我去除了一些功能,精简为:


FCKConfig.ToolbarSets["Default"] = [

['PasteText','PasteWord','-'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent'],

['Link','Unlink'],['TextColor','BGColor'],

['Table','Rule','SpecialChar','PageBreak'],

'/',

['Bold','Italic','Underline','StrikeThrough'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['FontFormat','FontName','FontSize'],

] ;



注意里面可以任意变换顺序, '/', 代表分行, 一个 [] 里的内容为一个集中区域。


相关文章
|
JSON 数据格式
vue-codemirror代码编辑器使用方法
vue-codemirror代码编辑器使用方法
vue-codemirror代码编辑器使用方法
|
8月前
|
uml
CSDN_MARKDOWN编辑器 最新使用方法指南
CSDN_MARKDOWN编辑器 最新使用方法指南
64 0
CSDN_MARKDOWN编辑器 最新使用方法指南
|
Unix Linux 开发工具
Vim编辑器的使用方法
# VIM的使用方法 Vim(Vi[Improved])编辑器是功能强大的跨平台文本文件编辑工具,继承自Unix系统的Vi编辑器,支持Linux/Mac OS X/Windows系统,利用它可以建立、修改文本文件。 使用vim创建文件可以直接输入
154 0
Vim编辑器的使用方法
|
JavaScript API
富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得
富文本编辑器Quill 介绍及在Vue中的使用方法
|
Python
Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
432 0
Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
|
SQL JavaScript 前端开发
DayDayUp:Markdown编辑器的简介、入门、使用方法(Markdown编辑器撰写博客)(一)
DayDayUp:Markdown编辑器的简介、入门、使用方法(Markdown编辑器撰写博客)
|
JavaScript 前端开发 .NET
[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法
   from:http://tangb4c.yo2.cn/archives/633878 04月 22nd, 2008 现在做网页,用FCKEditor用得比较多,它的实现原理是在要加入FCKEditor的地方加入一个iframe,并将其src指向FCKeditor/editor/fckeditor.
1218 0