`

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

    博客分类:
  • Java
 
阅读更多

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

 

 

 

分享到:
评论

相关推荐

    fckeditor学习笔记

    fckeditor学习笔记 FCKEditor的调用: 方法一:通过javascript调用(前提是在head里要引入&lt;script type="text/javascript" src="fckeditor/fckeditor.js"&gt;文件) 1.创建并输出一个编辑器(参见fckeditortest项目test1...

    FCKeditor 学习笔记

    FCKeditor 学习笔记

    FCKEDITOR学习笔记资料.pdf

    - 保留必要的配置文件,如fckconfig.js、fckeditor.js、fckstyles.xml、fcktempletes.xml、fckpackager.xml以及fckeditor文件夹,并删除所有以“_”开头的文件和文件夹,因为它们通常是测试或示例文件。 4. **编辑...

    传智播客 fckeditor 笔记

    在本笔记中,我们将深入探讨FCKeditor的使用、配置及常见问题的解决方法。 ### 一、FCKeditor的基本使用 1. **安装与引入**:首先,你需要从官方网站下载FCKeditor的源码包,解压后将文件上传至服务器。在HTML页面...

    Fckeditor学习研究整理笔记

    这个"**Fckeditor学习研究整理笔记**"可能是某位开发者或博主对其深入研究后整理的一份详细资料,旨在帮助其他人更好地理解和使用FCKeditor。虽然具体的笔记内容无法直接查看,但从标题和标签我们可以推测其主要涵盖...

    FCKEditor 笔记

    这篇学习笔记将详细介绍如何在项目中集成和配置FCKEditor,以及解决在使用过程中可能遇到的问题。 首先,引入FCKEditor到J2EE项目中,你需要在JSP页面中添加相应的标签库引用。例如,添加以下代码: ```jsp ...

    fck学习笔记一些相关实例

    本学习笔记包含了FCKeditor的一些实际使用案例,旨在帮助开发者更好地理解和运用这款工具。 首先,我们要了解FCKeditor的基本结构和配置。FCKeditor由JavaScript编写,可以通过简单的HTML代码引入到页面中。它的...

    JavaEE学习实战笔记心得

    ### JavaEE学习实战笔记心得 #### JavaSE基础要点 - **环境配置**: - **JDK下载与安装**:确保下载与操作系统相匹配的JDK版本,完成安装。 - **环境变量设置**: - **JAVA_HOME**: 指向JDK的安装目录。 - **...

    Java学习笔记,spring,hibernate,struts

    Java学习笔记涵盖了多个核心的Java开发技术,包括Spring、Hibernate和Struts,这些都是Java Web开发中的重要框架。让我们深入探讨一下这些技术。 首先,Java是一种广泛使用的编程语言,以其跨平台性和面向对象的...

    faceditor 精简版 最流行的在线编辑器

    在开始使用FCKeditor之前,建议参考“在线编辑器fckeditor学习”的学习笔记,其中可能会包含安装步骤、配置方法以及常见问题的解决策略。这将帮助用户更好地理解和掌握FCKeditor的使用,从而提高工作效率。 总的来...

    博客系统笔记以及源码

    中科院java培训的案例—博客系统,主要用jsp和servlet实现,其中涉及DButils,mysql数据库连接池,FCKeditor,PowerDesigner,startUML等的使用。很值得学习。

    asp网站后台源码

    1. **ASP基础概念**: - ASP是Microsoft IIS(Internet Information Services)的一部分,用于创建交互式的动态网页。 - 它使用VBScript或JScript作为编程语言,可以在服务器端执行代码并返回HTML到客户端浏览器。...

    第14章 项目实训:个人笔记系统笔记管理模块的实现.ppt

    Java Web基础与实例教程的PPT,自己制作的PPT,将近400页,免费分享,童鞋们努力学习吧。

    第12章 项目实训:个人笔记系统首页模块的设计与实现.ppt

    Java Web基础与实例教程的PPT,自己制作的PPT,将近400页,免费分享,童鞋们努力学习吧。

Global site tag (gtag.js) - Google Analytics