JavaScript脚本加载fckeditor编辑器

有关upgrading  fckeditor 的更新升级部分,最后在翻译,先翻译与使用相关的部分,因为很多都是js或Php来加载的,所以先讲下js的加载过程。

   The "JavaScript Integration Module" is the client side option to include FCKeditor in your web pages.It is quite easy to use and configure. Just follow these steps.   使用javascript是种网页客户端加载FCKeditor的方式。很容易使用和配置,只需要下面几步。

Configuring step by step  手把手配置

Step 1

The first thing to do is to include the "JavaScript Integration Module" scripts inside the <HEAD> of your page, just like this:

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

第一步:首先要做的就是在<head>标签中加载 fckeditor.js文件,这个文件里面包含了fckeditor所需的类。

Step 2

Now the FCKeditor class is available and ready to use. There are three ways to create an FCKeditor in your page:
第二步:现FCKeditor类可以使用了,有三种方法创建一个FCKeditor。

Method 1 方法1

The inline method (preferred): Go to the body of your page, to the place you want the editor to be (usually inside a form) and place the following script there:  内联方法(推荐方法):在您页面的body部分先确定你要将编辑器放置的位置(通常是在一个form表单里)然后 在这个位置放置下面的代码:

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

上面的代码先用new 创建一个FCKeditor类对象,在给BasePath 属性赋值。BasePath属性就是 FCKeditor在网站中的路径,因为后面要访问该路径下的一些文件,比如fckeditor.html 页面 。 最后使用Create方法创建该编辑器。

Method 2  方法2

The TEXTAREA replacement method:   使用textarea文本域的替换方法:

  • In <HEAD> add the "onload" method:  在<head> 部分加上onload事件的处理函数
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; //参数就是下面的textarea的id值。
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
  • In <BODY> add the below code to replace an existing TEXTAREA in the page: 在body标签部分加上一个textarea ,id与上面的FCKeditor里的参数相对应。
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
Method 3  方法三

The CreateHtml() method (for AJAX): For an AJAX application, you'll be setting the inner html dynamically; for example:

var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
div.innerHTML = fck.CreateHtml();

如果是ajax应用,可以使用 CreateHtml 方法创造出内部的编辑器的html代码 然后 插入到 div 元素中。

Sample code  示例代码
Sample code 1 例子1 用的第一种方法
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Create();
</script>
</form>
</body>
</html>
Sample code 2  例二,用的第二种方法,这两种方法是最常用的。可以看得出fckeditor的安装和使用都很简单。
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>

OK,本章结束,下一章介绍如何使用 php 脚本来 加载 fckeditor 编辑器。

posted @ 2010-09-04 00:53  夜壶  阅读(397)  评论(0编辑  收藏  举报