文档章节

FCKeditor在线文本编辑器初级应用

藍色的海
 藍色的海
发布于 2011/11/26 10:48
字数 581
阅读 327
收藏 1

      首先从FCKeditor的官网( http://www.fckeditor.net/)下载该编辑器,我下载的版本是FCKeditor_2.6.6,然后新建一JavaWeb项目,命名为5.3。然后把解压后的fckeditor文件夹复制到项目的WebContent目录下。至此,完成对FCKeditor在线文本编辑器环境的配置。

      1.用JavaScript语言直接调用FCKeditor.新建一名为test1的jsp文件,代码如下:

      

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="fckeditor/fckeditor.js">
</script>
</head>
<body>
     <script type="text/javascript">
         var editor=new FCKeditor('editor');        //新建一个名为editor的FCKeditor对象
         editor.BasePath="/5.3/fckeditor/"; //设置在线文本编程器的基准路径,也就是fckeditro.js的目录
         editor.Create();                   //通过Create()方法来创建和输出一个文本编辑器
     </script>
</body>
</html>

重启Tomcat服务器,在IE窗口中查看效果,如下:

 

2.标签<textarea>调用FCKeditor,代码如下:

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
     <script type="text/javascript" src="fckeditor/fckeditor.js">
     </script>
     <script type="text/javascript">
        window.onload=function(){
        var editor=new FCKeditor('textarea'); //创建一个名为editor的FCKeditor对象,并且实例名必须和文本域名一致
        editor.BasePath="fckeditor/";         //设置在线文本编辑器的基准路径,此处设置的是相对路径   
        editor.ReplaceTextarea();             //通过ReplaceTextarea()方法替代<textarea>元素 
        }                                      
     </script>
</head>
<body>      
       <textarea name="textarea">FCKeditor</textarea>   
</body>       
</html>

3.利用JSP标签调用FCKeditor在线文本编辑器

1)首先把fckeditor-java-2.6\lib目录下的3个jar文件:commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、slf4j-api-1.5.8.jar和fckeditor-java-2.6目录下的fckeditor-java-core-2.6.jar,引入Java Web项目。再把fckeditor-java-demo-2.6.war文件解压,从其目录fckeditor-java-demo-2.6.war\WEB-INF\lib中找到slf4j-simple-1.5.8.jar,也引用Java Web项目。

2)在JSP页面中自定义标签来对FCKeditor在线文本编辑器进行调用。代码如下:

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FCKeditor</title>
    <script type="text/javascript" src="fckeditor/fckeditor.js"> 
     </script>
  </head>
<body>      
      <FCK:editor  instanceName="editor"  basePath="/fckeditor"  value="测试代码"></FCK:editor>
</body>       
</html>

© 著作权归作者所有

藍色的海
粉丝 3
博文 19
码字总数 7205
作品 0
广州
其他
私信 提问
ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 【月儿原创】

ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.4.9 FCKeditor是目前最好的html文本编辑器,如果还不明白的话看了下图就知道了...

晨曦之光
2012/03/09
84
0
fckeditor_for_java的用法

在很多时候都需要使用网页编辑器,包括在文章发布的时候或是在表单设计的时候。下面为fckeditor的使用。 以javascript方法调用 方法(一) 将fckeditor.jar包拷贝到webroot目录下,新建一html文...

xinlll
2012/11/18
0
0
FCKeditor在freemarker中怎么用

我下载了FCKeditor解压到我的Webroot目录下,然后再我的网页上使用 然后在body里面写 为什么总是不能显示编辑栏呢? 路径也没有写错吧!很郁闷,求大神帮忙 目录结构是: -----+WebRoot ----...

黛提拿骚
2014/04/21
952
3
php --- fckeditor

在php中使用fckeditor时: 在./fckeditor/editor/filemanager/connectors/php/config.php中 修该$SESSION['username']中username值和$Config['UserFilesPath'] =$root_path.'Attachments/'.$......

gaoyanlei
2010/06/14
0
0
添加 FCKeditor编辑器

1、进入后台: 管理-》内容写作-》Wysiwyg profiles-》Installation instructions 2、下载FCKeditor: 找到-》FCKeditor,点击下载; 3、根据提示信息,将FCKeditor放到下面指定的目录中: ...

jackguo
2013/04/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

东芝停电13分钟 6000000TB硬盘没了

导读 当地时间6月15日下午6点25分,位于日本四日市的东芝5座NAND闪存晶圆厂发生断电事故,停电13分钟后恢复供电,但是生产线停工了5天,21日才恢复部分工厂运转,但Fab 2、Fab 3及Fab 4晶圆厂...

问题终结者
12分钟前
0
0
Python爬虫新手教程:爬取了6574篇文章,告诉你产品经理在看什么!

作为互联网界的两个对立的物种,产品汪与程序猿似乎就像一对天生的死对头;但是在产品开发链条上紧密合作的双方,只有通力合作,才能更好地推动项目发展。那么产品经理平日里面都在看那些文章...

计算机编程
21分钟前
0
0
简单了解 mvc 、mvp 与 MVVM 区别

mvc - 划分三个角色: 用户操作 view 层与 controller 层 mvp view 与 model 不发生联系,用户直接操作 p 层 mvvm view 与 model 双向绑定 react 中 v = f(s) 状态 到 视图的映射。改变状态就...

lemos
35分钟前
2
0
巨杉Talk | 拒绝数据碎片化,原生分布式数据库灵活应对数据管理需求

2019年7月19-20日,以“运筹帷幄,数揽未来”为主题的DAMS中国数据智能管理峰会在上海青浦区成功举办。在DAMS峰会上,巨杉数据库为大家带来了题为“云架构下的分布式数据库设计与实践”的主题...

巨杉数据库
43分钟前
1
0
北京课工场教育科技公司喜获第八届中国软件杯企业突出贡献奖

百舸争流,奋楫者先;千帆竞发,勇进者胜。7月18 日, 第八届“中国软件杯” 大学生软件设计大赛决赛(简称“大赛”) 及颁奖典礼在江苏南京软件谷科创城圆满落下帷幕。课工场作为赛事支持单...

IFTNews
56分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部