`
春之竹
  • 浏览: 23619 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
文章分类
社区版块
存档分类
最新评论

FCKeditor编辑器的使用

阅读更多

如何在textarea上添加一个编辑器。

新建一个web项目,从:http://ckeditor.com/download网站上下载一个FCKeditor(或者下载我上传的文件,我这个文件删除了一些不必要的文件,有效地提高了加载速度。并且还设置了自动换行,使用中文字体等。我是在eclipse下使用2.6.6版本的)粘贴在WebContent目录下

然后在一个jsp页面中添加以下代码,就能添加一个编辑器(关键是在new FCKeditor中的参数要与textarea的name属性相同,fck.BasePath要写上项目名)


写道
<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%> <%@include file="validate.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <script type="text/javascript" src="fckeditor/fckeditor.js"></script> <script LANGUAGE="JavaScript"> window.onload=function(){ var fck=new FCKeditor('content'); fck.BasePath="/myblog1/fckeditor/"; fck.Height=400; fck.ToolbarSet='MyToolBar'; fck.ReplaceTextarea(); } </script> <title>FCKeditor的使用</title> </head> <body> <textarea id="content" name="content" ></textarea > </body> </html>
 

  添加了编辑器之后会发现有各种各样的问题,现在就我遇到的问题提供一些解决方法

 

问题一:我将FCKeditor粘贴到指定目录下,报错了(有些不会)

解决方法:这里报错并不会影响程序的运行。其实eclipse报错是因为他没有识别FCkeditor中自带的html标签,想要它不报错,在项目处右键打开properties/validation/HTML Syntax然后做相应的修改就可以(比如我报的错误是:the tag not closed。我就将unclosed start tag后面的选项改成Ignore)

 

问题二:默认编辑器中有些功能我不想要。我只想要这个编辑器中的某些功能

解决方法:打开FCKeditor目录下的fckconfig.js在121行添加以下代码

FCKConfig.ToolbarSets["MyToolBar"] = [
['Undo','Redo','Find','Replace','RemoveFormat'],
['Bold','Italic','Underline','Subscript','Superscript'],
['OrderedList','UnorderedList','Outdent','Indent','Link'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Image','Table','Rule','Smiley','SpecialChar'],
['TextColor','BGColor','FitWindow'],
['FontFormat','FontName','FontSize'],
] ;

然后在上面的var fck=new FCKeditor('content');下面添加这个代码

fck.ToolbarSet='MyToolBar';

使用参数MyToolBar的效果图如下:


 

FCKeditor的ToolBarSet本来有两个的参数一个是Default一个是Basic

使用Default的效果图如下:


 

使用Basic的效果图如下:


 

问题三:FCkeditor不能自动换行

解决方法:打开FCKeditor/editor/css/中的fck_editorarea.css文件在body,td {}中添加以下代码

word-break:break-all;

修改后的内容如下所示

body,td {
font-family: Arial, Verdana, sans-serif;
font-size: 15px;
word-break:break-all;
}
 

你可以在这里修改fckeditor的默认设置(如背景图片,字体大小等)

问题四:想换个皮肤???

将fckconfig.js第四十五行相应代码改成

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;

这里的参数silver还有其他两种:参数的名字在fckeditor/editor/skin目录下可以找到

 

 问题五:如何设置FCKeditor的宽与高(height默认是200,width默认是100%)???

解决方法:在fck.BasePath="/项目名/fckeditor/";下添加代码

fck.Height=500;
fck.Width='80%';


问题六:字体设置中没有中文,字体大小设置我想改成px形式???

解决方法:在fckconfig.js中第一百五六十行左右找到FCKConfig.FontNames跟FCKConfig.FontSizes将这两行改成如下代码

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
FCKConfig.FontSizes= '9/9px;11/11px;13/13px;15/15px;17/17px;19/19px;21/21px;23/23px;25/25px;27/27px';

下面是效果图:

  • 大小: 5.5 KB
  • 大小: 2.2 KB
  • 大小: 12.7 KB
  • 大小: 4.7 KB
  • 大小: 4.2 KB
4
6
分享到:
评论
1 楼 贾懂凯 2011-02-22  

相关推荐

Global site tag (gtag.js) - Google Analytics