fckeditor - 集成(2)

最新推荐文章于 2024-07-20 11:26:48 发布

iteye_2722

最新推荐文章于 2024-07-20 11:26:48 发布

阅读量126

点赞数

分类专栏： fckeditor 文章标签： fckeditor

本文链接：https://blog.csdn.net/iteye_2722/article/details/82089354

版权

fckeditor 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

来自： http://sktoo.iteye.com
集成javascript步骤

参考文档：http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/JavaScript

1.将JavaScript集成模块脚本放入<head>标签中

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

2.创建fckeditor
方法一：（内联）
在<body>标签适当位置放入如下代码（通常放在标签中）

<script> 
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "fckeditor/"; 
oFCKeditor.Create(); 
</script>

方法二：（替代<textarea>）
在<head>标签中添加onload方法

<script> 
window.onload = function() 
{ 
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; 
oFCKeditor.BasePath = "fckeditor/" ; 
oFCKeditor.ReplaceTextarea() ; 
} 
</script>

在<body>标签中添加以下代码

<textarea id="MyTextarea" name="MyTextarea"> 
This is <b>the</b> initial value.
</textarea>

方法三：（动态生成）

在<head>标签中定义 createFckeditor()方法

<script> 
function createFckeditor()
{ 
var div = document.getElementById("myFCKeditorDiv"); 
var fck = new FCKeditor("myFCKeditor"); 
fck.BasePath = "fckeditor/" ; 
div.innerHTML = fck.CreateHtml(); 
} 
</script>

在中div中动态显示fckeditor

<a href="javascript:void(0);" onclick="createFckeditor();"> 动态创建fckeditor </a> 
<div id="myFCKeditorDiv"> </div>

fckeditor对象属性
[table]
|属性名 | 描述 | 默认值 |
|Width |宽度| 100%|
|Height |高度 |200 |
|Value| 编辑器初始化内容| 空字符串 |
|ToolbarSet| 工具条集合的名称(Default，Basic，或自定义) |Default|
|BathPath |编辑器的基路径,BasePath要正确设置，以“/”结尾
| /fckeditor|
[/table]

例如：

var oFCKeditor = new FCKeditor( 'MyFckeditor' ) ;
oFCKeditor.BasePath = "fckeditor/" ;
oFCKeditor.Width="80%";
oFCKeditor.Height="200";
oFCKeditor.Value="ok";
oFCKeditor.ToolbarSet="Basic";
fckeditor构造器

var fckeditor=function(instanceName,width,height,toolbarSet,value) ; instanceName:编辑器输出的textarea元素的name属性或id属性的值，必须指定
其他参数会赋给同名属性

例如:

var oFCKeditor = new FCKeditor( 'MyFckeditor' ,'80%','300','Basic','ok') ;

集成java步骤

1.载入jar包

将fckeditor-java-demo-2.4.war放入运行中的tomcat安装目录下的webapps文件夹中让其解压，从解压后的fckeditor-java-demo-2.4\WEB-INF\lib下拷贝所有的jar文件，加入web工程的classpath中（可以拷贝到WebRoot\WEB-INF\lib文件夹下）
jar文件包括：

fckeditor-java-core-2.4.jar
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
slf4j-api-1.5.2.jar
slf4j-simple-1.5.2.jar

2.在jsp页面中加入tablib指令和fck标签
参看fckeditor-java-core-2.4.jar/META-INF/FCKeditor.tld

<short-name>FCK</short-name>
<uri>http://java.fckeditor.net</uri>在jsp页面中加入tablib指令

<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%> 在<body>中加入自定义标签

<FCK:editor instanceName="fck1" basePath="/fckeditor" value=" "></FCK:editor>注意：basePath以"/"开头代表工程的根路径而非web服务器的根路径，一定要指定value属性，而且值不能为空字符串"",否则会抛NullPointException。