如何在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
分享到:
相关推荐
fckeditor编辑器使用方法欢迎大家及时下载使用
FCKeditor编辑器hwp363FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363
fckeditor编辑器文件及dll打包 fckeditor编辑器文件及dll打包 fckeditor编辑器文件及dll打包
Asp.Net FCKeditor编辑器的用法详解
FckEditor在线编辑器FckEditor在线编辑器FckEditor在线编辑器
fckEditor 编辑器源码fckEditor 编辑器源码fckEditor 编辑器源码fckEditor 编辑器源码fckEditor 编辑器源码fckEditor 编辑器源码
在页面中,使用的是FCKeditor控件,该控件需要知道FCKeditor编辑器文件组的路径。有两种配置方法。 (1)配置web.config 在appSettings配置节中加入 <add key="FCKeditor:BasePath" value="~/PathOfFCKeditor/" ...
fckeditor 编辑器,有使用说明,一款强大的网页编辑器,支持上传附件等
ThinkPHP中FCKeditor编辑器的使用 前段时间一直为TP寻找好用的在线编辑器而苦恼,经过多次尝试与修改后,终于成功地将编辑器集成到Thinkphp里面。 而且可以用直接上传和ajax两种方式处理内容。为了给一些还没能成功...
fckeditor编辑器自定义按钮,弹出页面,返回数据添加到fck编辑器
免费的FCKeditor编辑器2.63(解决无法上传文件)asp.net在线编辑器! 已经解决无法上传文件(停留在上传过程的进度条问题)!!
fckeditor编辑器添加swfupload功能
HTML 文本编辑器FCKeditorHTML 文本编辑器FCKeditorHTML 文本编辑器FCKeditor
fckeditor在线编辑器,可以直接使用
fckeditor 用于web页面开发的文档编辑插件,非常方便使用。
fckeditor在线文本编辑器, 可嵌入javascript中,用于页面文字、表情编辑,上传文件等,方便实用
winform 集成 fckeditor 编辑器 代码方面的精品
phpcms V9 原版fckeditor编辑器 切换为 kindeditor 编辑器。 下载附件,解压后,覆盖即可。
FCKeditor在线文本编辑器使用(pdf文件)
FCKeditor编辑器FCKeditor编辑器