FCKeditor在线编辑器的使用

任我行0000000

任我行0000000

2016-02-19 20:09

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享FCKeditor在线编辑器的使用吧。


  

试用了一下FCKeditor,根据网上的文章小结一下:
  1.下载
  FCKeditor.Java 2.3 (FCKeditot for java)
  FCKeditor 2.2 (FCKeditor基本文件)

  2.建立项目:tomcat/webapps/TestFCKeditor.

  3.将FCKeditor2.2解压缩,将整个目录FCKeditor复制到项目的根目录下,
  目录结构为:tomcat/webapps/TestFCKeditor/FCKeditor
  然后将FCKeditor-2.3.zip(java)压缩包中webWEB-INFlib目录下的两个jar文件拷到项目的WEB-INFlib目录下。把其中的src目录下的FCKeditor.tld文件copy到TestFCKedit/FCKeitor/WEB-INF/下

  4.将FCKeditor-2.3.zip压缩包中webWEB-INF目录下的web.XML文件合并到项目的WEB-INF目录下的web.xml文件中。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/bianchengyuyan/)

  5. 修改合并后的web.xml文件,将名为SimpleUploader的Servlet的enabled参数值改为true,
  以答应上传功能,Connector Servlet的baseDir参数值用于设置上传文件存放的位置。
  添加标签定义:
  taglib
  taglib-uri/TestFCKeditor/taglib-uri
  taglib-location/WEB-INF/FCKeditor.tld/taglib-location
  /taglib

  运行图:

  

  6. 上面文件中两个servlet的映射分别为:/editor/filemanager/browser/default/connectors/jsp/connector
  和/editor/filemanager/upload/simpleuploader,需要在两个映射前面加上/FCKeditor,
  即改为/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
  /FCKeditor/editor/filemanager/upload/simpleuploader。

  7.进入SKIN文件夹,假如你想使用fckeditor默认的这种奶黄色,
  那就把除了default文件夹外的另两个文件夹直接删除.

  8.删除/FCKeditor/目录下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件以外的所有文件
  删除目录/editor/_source,
  删除/editor/filemanager/browser/default/connectors/下的所有文件
  删除/editor/filemanager/upload/下的所有文件
  删除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四个文件的所有文件

  9.打开/FCKeditor/fckconfig.js
  修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
  把FCKConfig.LinkBrowserURL等的值替换成以下内容:
  FCKConfig.LinkBrowserURL
  = FCKConfig.BasePath + "filemanager/browser/default/browser.Html?Connector=connectors/jsp/connector" ;
  
  FCKConfig.ImageBrowserURL
  = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;
  
  FCKConfig.FlashBrowserURL
  = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

  
  FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
  FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
  FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
  
  

  10.其它
  fckconfig.js总配置文件,可用记录本打开,修改后将文件存为utf-8 编码格式。找到:

  FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/bianchengyuyan/)

  假如你的编辑器还用在网站前台的话,比如说用于留言本或是日记回复时,那就不得不考虑安全了,
  在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,
  也就是基本的toolbar,找到:
  FCKConfig.ToolbarSets["Basic"] = [
  ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
  'Smiley','SpecialChar','Replace','Preview'] ] ;
  这是改过的Basic,把图像功能去掉,把添加链接功能去掉,因为图像和链接和flash和图像按钮添加功能都能让前台
  页直接访问和上传文件, fckeditor还支持编辑域内的鼠标右键功能。
  
  FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
  /*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;
  
  这也是改过的把鼠标右键的“链接、图像,FLASH,图像按钮”功能都去掉。

  找到: FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
  加上几种我们常用的字体
  FCKConfig.FontNames
  = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
  

  7.添加文件 /TestFCKeditor/test.jsp:
  %@ page language="java" import="com.fredck.FCKeditor.*" %
  %@ taglib uri="/TestFCKeditor" prefix="FCK" %
  script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"/script

  %--
  三种方法调用FCKeditor
  1.FCKeditor自定义标签 (必须加头文件 %@ taglib uri="/TestFCKeditor" prefix="FCK" % )
  2.script脚本语言调用 (必须引用 脚本文件 script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"/script )
  3.FCKeditor API 调用 (必须加头文件 %@ page language="java" import="com.fredck.FCKeditor.*" % )
  --%
  
  %--
  form action="show.jsp" method="post" target="_blank"
  FCK:editor id="content" basePath="/TestFCKeditor/FCKeditor/"
  width="700"
  height="500"
  skinPath="/TestFCKeditor/FCKeditor/editor/skins/silver/"
  toolbarSet = "Default"
  
  input
  /FCK:editor
  input type="submit" value="Submit"
  /form
  --%

  form action="show.jsp" method="post" target="_blank"
  table border="0" width="700"trtd
  textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px"input/textarea
  script type="text/javascript"
  var oFCKeditor = new FCKeditor('content') ;
  oFCKeditor.BasePath = "/TestFCKeditor/FCKeditor/" ;
  oFCKeditor.Height = 400;
  oFCKeditor.ToolbarSet = "Default" ;
  oFCKeditor.ReplaceTextarea();
  /script
  input type="submit" value="Submit"
  /td/tr/table
  /form

  %--
  form action="show.jsp" method="post" target="_blank"
  %
  
   FCKeditor oFCKeditor ;
  oFCKeditor = new FCKeditor( request, "content" ) ;
  oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ;
  oFCKeditor.setValue( "input" );
  out.println( oFCKeditor.create() ) ;
  %
  br
  input type="submit" value="Submit"
  /form
  --%
  

  添加文件/TestFCKeditor/show.jsp:
  %
  String content = request.getParameter("content");
  out.print(content);
  %

  8.浏览http://localhost:8080/TestFCKeditor/test.jsp
  ok!
  


展开更多 50%)
分享

猜你喜欢

FCKeditor在线编辑器的使用

编程语言 网络编程
FCKeditor在线编辑器的使用

HTML编辑器FCKeditor使用详解

Web开发
HTML编辑器FCKeditor使用详解

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

FCKeditor编辑器在JAVA中的使用与配置

编程语言 网络编程
FCKeditor编辑器在JAVA中的使用与配置

虾米编辑器如何使用

电脑网络
虾米编辑器如何使用

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何使用135编辑器

电脑网络
如何使用135编辑器

公式编辑器的进阶使用

电脑入门
公式编辑器的进阶使用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

记住 我脾气虽好 但不是没有

记住 我脾气虽好 但不是没有

用C#从IE浏览器中获取HTML文档

用C#从IE浏览器中获取HTML文档
下拉加载更多内容 ↓