FCKeditor 1

最新推荐文章于 2021-03-11 03:27:14 发布

最新推荐文章于 2021-03-11 03:27:14 发布 · 160 阅读

文章标签：

#fckeditor #JavaScript #JSP #配置管理 #HTML #ViewUI

本文介绍FCKeditor文本编辑器插件的使用方法，包括在HTML和JSP文件中的应用及自定义表情设置。

FCKeditor
简介
FCKeditor是一种通用的文本编辑器插件。
使用FCKeditor插件准备工作
第一步：导入FCKeditor插件文件

第二步：加入的JAR包，如下图所示

在页面中使用FCKeditor插件
做好以上准备工作后，我们就要分别在HTML文件和JSP文件中调用FCKeditor插件，把文本编辑器使用在我们的项目中。
如何在HTML文件中使用FCKeditor
在HTML文件中插入FCKeditor插件有2种方式：
1．在<head></head>部分中导入fckeditor.js文件，在<body></body>部分使用<script></script>标签
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>//导入fckeditor.js文件
</head>
<body>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1'); //新建FCKeditor对象名称FCKeditor1
oFCKeditor.BasePath = "/fckeditor/fckeditor/" ; //设置基准路径
oFCKeditor.Value = "initial value";
oFCKeditor.Toolbarset = "Default"; //引用工具集类型
oFCKeditor.Create(); //调用Create方法创建并且输出一个文本框输出
</script>
</body>

2．在<body></body>部分编写<textarea></textarea>标签，标签中的name表示调用FCKeditor对象名称，在<head></head>部分中首先导入fckeditor.js文件，然后编写Fckedirot对象。
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function(){ //网页文档加载完后执行下列代码
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; //创建FCKeditor对象
oFCKeditor.BasePath = "/fckeditor/fckeditor/" ; //fckeditor文件目录
oFCKeditor.Width = "80%"; //设置文本编辑器长度
oFCKeditor.Height = "50%"; //设置文本编辑器宽度
oFCKeditor.Value = "this is FCKeditor value"; //文本编辑器初始内容
oFCKeditor.ToolbarSet = "Default"; //工具集名称
oFCKeditor.ReplaceTextarea();
</script>
</head>
<body>
<textarea rows="4" cols="60" name="MyTextarea">this is myFCKeditor</textarea><!—name 要调用FCKeditor对象名称 -->
</body>
如何在JSP文件中使用FCKeditor
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %> //在JSP文件中加入FCKeditor标签库
<body>
<FCK:editor instanceName="EditorDefault" toolbarSet="Default" value="this is myFckeditor"></FCK:editor> 
</body>
自定义
//自定义表情
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/mygimss/' ; //表情图片所在的路径是一个文件夹
FCKConfig.SmileyImages = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif'] ; //配置要显示上面文件夹里的哪些图片
FCKConfig.SmileyColumns = 5 ; //每行显示几个图片
FCKConfig.SmileyWindowWidth = 640 ; //显示表情图片的宽度
FCKConfig.SmileyWindowHeight = 320 ; //显示表情图片的高度
通过自定义表情图片我们会发现表情图片框的大小总是不合适而我们自己定义的宽高貌似也不起作用，下面我们介绍如何使用自定义表情图片框大小。如下图所示：

我们根据页面属性找到路径fckeditor文件夹下editor文件家中dialog文件夹下的fck_smiley.html文件，fck_smiley.html就是管理表情图片样式的文件，但我们如何修改了就可以让我们逞心如意了呢？那么我们就来解决第一个问题，无法显示我们自定义的宽高问题：
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;

//dialog.SetAutoSize( true ) ; //默认会以页面大小自动显示表情图片框大小
}
从页面上我们终于可以显示自定义表情图片的宽高了，而我们发现我们把表情图片框的高度调到我们满意的尺寸，而里面的图片又不满意了，有些图片无法完全显示了，我们这是就想到了滚动条：
<body style="overflow: auto"> 
……….
………..
</body>
自此，我们的自定义表情图片算是大功告成了！鼓鼓掌，呵呵~~~