当前位置: 代码迷 >> Web前端 >> FckEditor学习札记1-配置使用FckEditor
  详细解决方案

FckEditor学习札记1-配置使用FckEditor

热度:121   发布时间:2012-11-04 10:42:42.0
FckEditor学习笔记1-配置使用FckEditor

1.Fckeditor官网:http://ckeditor.com/
2.下载地址: http://ckeditor.com/download
3.文档地址: http://docs.cksource.com

一.将下载后的文件解压并放到WebRoot目录下
二.导入JS文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
三.使用,有四种方法来调用
1.使用JS直接创建

Js代码
  1. <script?type= "text/javascript" > ??
  2. var ?oFCKeditor?=? new ?FCKeditor( 'FCKeditor1' ); ??
  3. //1.BasePath表示fckeditor的目录 ??
  4. //第一个/表示WEBServer的根目录,所以必须加上工程路径 ??
  5. //最后必须以/结尾,否则报错 ??
  6. //2.可以使用相对路径如:?fckeditor/ ??
  7. oFCKeditor.BasePath?=? "/fckeditor/" ; ??
  8. oFCKeditor.Width?=? "100%" ; ??
  9. oFCKeditor.Height?=?400; ??
  10. //默认属性?Width?100% ??
  11. //????????Height?200 ??
  12. //????????Value?"" ??
  13. //????????ToolbarSet?"Default"(Basic或自己定制) ??
  14. //????????BasePath???????/fckeditor/ ??
  15. oFCKeditor.Create(); ??
  16. </script>??
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
//1.BasePath表示fckeditor的目录
//第一个/表示WEBServer的根目录,所以必须加上工程路径
//最后必须以/结尾,否则报错
//2.可以使用相对路径如: fckeditor/
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Width = "100%";
oFCKeditor.Height = 400;
//默认属性 Width 100%
//        Height 200
//        Value ""
//        ToolbarSet "Default"(Basic或自己定制)
//        BasePath       /fckeditor/
oFCKeditor.Create();
</script>

?

?

2.使用JS替换已有的TextArea

Js代码 复制代码 ?收藏代码
  1. <script?type= "text/javascript" > ??
  2. window.onload?=? function () ??
  3. { ??
  4. var ?oFCKeditor?=? new ?FCKeditor(? 'MyTextarea' ?)?; ??
  5. oFCKeditor.BasePath?=? "/fckeditor/" ?; ??
  6. oFCKeditor.ReplaceTextarea()?; ??
  7. } ??
  8. </script>??
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>

?

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

?

3.

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

?

4.使用JSP标签创建

Html代码 复制代码 ?收藏代码
  1. 1.解压fckeditor-java-2.5-bin.zip ??
  2. 2.将解压后的fckeditor-java-core-2.5.jar?以及?lib?目录下所有jar文件拷入WEB-INF\lib目录中 ??
  3. 3.将fckeditor-java-demo-2.5.war解压,在里面找到?slf4j-simple-1.5.8.jar文件放入WEB-INF\lib目录中 ??
  4. 4.在JSP页面中加入? < %@?taglib? uri = "http://java.fckeditor.net" ? prefix = "FCK" ?% > ??
  5. 5.在页面中加入 ??
  6. ??? <!--?这里的basePath前面的/代表的是工程根目录,各个属性如上注释?--> ??
  7. ???? <!--?此处value不能为空,至少为一个空格字符串,否则报错?--> ??
  8. ???? < FCK:editor ? instanceName = "myEditor" ? basePath = "/fckeditor" ? height = "200" ? value = '?' ? width = "100%" > </ FCK:editor > ??
1.解压fckeditor-java-2.5-bin.zip
2.将解压后的fckeditor-java-core-2.5.jar 以及 lib 目录下所有jar文件拷入WEB-INF\lib目录中
3.将fckeditor-java-demo-2.5.war解压,在里面找到 slf4j-simple-1.5.8.jar文件放入WEB-INF\lib目录中
4.在JSP页面中加入 <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
5.在页面中加入
   <!-- 这里的basePath前面的/代表的是工程根目录,各个属性如上注释 -->
    <!-- 此处value不能为空,至少为一个空格字符串,否则报错 -->
    <FCK:editor instanceName="myEditor" basePath="/fckeditor" height="200" value=' ' width="100%"></FCK:edito

?

?

?

  相关解决方案