Fckeditor使用宝典

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量1.1k 收藏
点赞数
分类专栏： js、html 文章标签： fckeditor jsp function import div html

Fckeditor的使用（一）：Fckeditor安装与例子

url:http://liss.javaeye.com/blog/578761

文章分类:Web前端

1.安装

        把FCKeditor_2.6.3.zip解压后的内容拷到WebRoot下。

2.使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
      <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
      <script type="text/javascript">
        var oFCKeditor = new FCKeditor('FCKeditor1');
        oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
        oFCKeditor.Create();
    </script>
    <script type="text/javascript">
        window.onload = function() {
            var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
            oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
            oFCKeditor.ReplaceTextarea() ;
        }
    </script>
   
     
  <body>
    This is my JSP page. <br>
    <textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
  </body>
</html>

 

修改

三种方法：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
      <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
     
      <script type="text/javascript">
          //第一种方法
        var oFCKeditor = new FCKeditor('FCKeditor1');
        oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
        oFCKeditor.Width = "70%";
        oFCKeditor.Height = "150";
        oFCKeditor.Value = "default"
        oFCKeditor.Create();
    </script>
   
    <script type="text/javascript">
       
        window.onload = function() {
            //第二种方法
            var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
            oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
            oFCKeditor.ReplaceTextarea() ;
            //第三种方法
            var div = document.getElementById("myFCKeditor");
            var fck = new FCKeditor("myFCKeditor");
            fck.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
            div.innerHTML = fck.CreateHtml();
        }
    </script>
   
  <body>
      <br/>Method 2<br/>
    <textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
     <br/>Method 3  <br>
     <div id="myFCKeditor">
     </div>
  </body>
</html>

 

 

Fckeditor的使用（二）：Fckeditor对象的属性

文章分类:Web前端

 Fckeditor对象的属性
属性名 默认值 描述
Width宽度100%
Height高度200
Value编辑器初始化的内容（空字符串）
ToolBarSet工具条集合的名称（内置有Default和Basic,也可以自己定制）Default
BasePath编辑器的基路径/fckeditor/

 

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
      <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
      <script type="text/javascript">
        var oFCKeditor = new FCKeditor('FCKeditor1');
        oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
        oFCKeditor.Width = "400";
        oFCKeditor.Height = "50%";
        oFCKeditor.Value = "default"
        oFCKeditor.Create();
    </script>
    <script type="text/javascript">
        window.onload = function() {
            var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
            oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
            oFCKeditor.ReplaceTextarea() ;
        }
    </script>
   
     
  <body>
    This is my JSP page. <br>
    <textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
  </body>
</html>

 

 

 

Fckeditor的使用（三）：Fckeditor对象的构造器

文章分类:Web前端

构造器

var FCKeditor = function( instanceName, width, height, toolbarSet, value )
{
    // Properties
    this.InstanceName    = instanceName ;
    this.Width            = width            || '100%' ;
    this.Height            = height        || '200' ;
    this.ToolbarSet        = toolbarSet    || 'Default' ;
    this.Value            = value            || '' ;
    this.BasePath        = FCKeditor.BasePath ;
    this.CheckBrowser    = true ;
    this.DisplayErrors    = true ;

    this.Config            = new Object() ;

    // Events
    this.OnError        = null ;    // function( source, errorNumber, errorDescription )
}

instanceName: 编辑器输出的textarea元素的name属性的值，必需指定。

参数会赋值给同保属性

Fckeditor的使用（四）：用JSP自定义标签输出Fckeditor

文章分类:Web前端

添加jar包：

fckeditor-java-2.4.1/fckeditor-java-core-2.4.1.jar

fckeditor-java-2.4.1/lib/commons-fileupload-1.2.1.jar

fckeditor-java-2.4.1/lib/commons-io-1.3.2.jar

fckeditor-java-2.4.1/lib/slf4j-api-1.5.2.jar

sfckeditor-java-demo-2.4.1.war/WEB-INF/lib/slf4j-simple-1.5.2.jar

注：fckeditor-java-2.4.1/lib/slf4j-api-1.5.2.jar这个包只是个接口类，必需有实现类。我用的是sfckeditor-java-demo-2.4.1.war下WEB-INF/lib/slf4j-simple-1.5.2.jar

 

例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
      <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
     
      <script type="text/javascript">
          //第一种方法
        var oFCKeditor = new FCKeditor('FCKeditor1');
        oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
        oFCKeditor.Width = "70%";
        oFCKeditor.Height = "150";
        oFCKeditor.Value = "default"
        oFCKeditor.Create();
    </script>
   
    <script type="text/javascript">
       
        window.onload = function() {
            //第二种方法
            var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
            oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
            oFCKeditor.ReplaceTextarea() ;
            //第三种方法
            var div = document.getElementById("myFCKeditor");
            var fck = new FCKeditor("myFCKeditor");
            fck.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
            div.innerHTML = fck.CreateHtml();
        }
    </script>
   
  <body>
      t<br/>Method 2<br/>
    <textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
     <br/>Method 3  <br>
     <div id="myFCKeditor"> </div>
     <br/>Method 4  用JSP自定义标签输出Fckeditor<br>
     <FCK:editor instanceName="myDditor" basePath="/fckeditor" value="default"/>
  </body>
</html>

 

 

 

Fckeditor的使用（五）：配置语言

文章分类:Web前端

１.创建myconfig.js

内容：

FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = "en" ;

注：语言设为英文，默认是中文的。

２.配置myconfig.js

方法一 ：修改WebRoot/fckeditor/fckconfig.js中的FCKConfig.CustomConfigurationsPath = '' ;为FCKConfig.CustomConfigurationsPath = '项目名/myconfig.js' ;

方 法二 ：

<script type="text/javascript">
          //第一种方法
        var oFCKeditor = new FCKeditor('FCKeditor1');
        oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
        oFCKeditor.Width = "70%";
        oFCKeditor.Height = "150";
        oFCKeditor.Value = "default"

        //此处设置配置
        oFCKeditor.Config["CustomConfigurationsPath"] = "<%=request.getContextPath()%>/myconfig.js"  ;
        oFCKeditor.Create();
    </script>

 

 

Fckeditor的使用（六）：常用配置

文章分类:Web前端

１.Toolbar的配置

在fckconfig.js中添加

FCKConfig.ToolbarSets["style"] = [
    ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
]
自定义的工具集。

使用：

<script type="text/javascript">
          //第一种方法
        var oFCKeditor = new FCKeditor('FCKeditor1');
        oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
        oFCKeditor.Width = "70%";
        oFCKeditor.Height = "150";
        oFCKeditor.Value = "default"
        oFCKeditor.Config["CustomConfigurationsPath"] = "<%=request.getContextPath()%>/myconfig.js"  ;
        oFCKeditor.ToolbarSet = "style";
        oFCKeditor.Create();
    </script

２.添加常用字体

在fckconfig.js中的

FCKConfig.FontNames        = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

修改为

FCKConfig.FontNames        = '宋体;楷体_GB2312;黑体;隶书;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

３.修改Enter和shift + Enter的换行行为

在fckconfig.js中的

FCKConfig.EnterMode = 'p' ;            // p | div | br
FCKConfig.ShiftEnterMode = 'br' ;    // p | div | br

改为：

FCKConfig.EnterMode = 'br' ;            // p | div | br
FCKConfig.ShiftEnterMode = 'p' ;    // p | div | br

此时效果：Enter换行，Shift +　Enter新段落

 

 

 

 

fckeditor-java-2.5给上传图片添加水印文章分类:Web前端

net.fckeditor.connector.Dispatcher类的

方法UploadResponse doPost(final HttpServletRequest request) {
        logger.debug("Entering Dispatcher#doPost");

添加加水印的操作便可

if ("image".equals(type.getName().toLowerCase())) {
                    String tempName = fileName;
                    if (newName != null) {
                        tempName = newName;
                    }
                    String targetPath = PropertiesUtils.getCmsProperty("path");
                    ImageUtils.pressImage(targetPath
                            + PropertiesUtils.getCmsProperty("waterMarker"),
                            targetPath
                                    + PropertiesUtils
                                            .getCmsProperty("upload_file_path")
                                    + tempName, Integer
                                    .parseInt(PropertiesUtils
                                            .getCmsProperty("warterMarkerX")),
                            Integer.parseInt(PropertiesUtils
                                    .getCmsProperty("warterMarkerY")));
                }

 

 

 

 

 

jackpk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FckEditor中文配置手册详细说明
zsczyhua的专栏
02-18 1006
javascript调用方式： －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ var FCKeditor = new FCKeditor(”content”); oFCKeditor.BasePath = “FCKeditor/”; oFCKeditor.Height = 400; oFCKeditor.ToolbarSet = “Default”; oFCKe
FCKEDITOR 使用说明
04-06
**FCKEditor 使用详解** FCKEditor是一款曾经非常流行的开源HTML文本编辑器，它使得在网页上创建富文本内容变得更加简单。尽管现在已经被CKEditor所取代，但FCKEditor在许多旧项目中仍然广泛使用，因此理解其工作...
宝典：第三式 FCKeditor插件实现富文本编辑
sayid21的专栏
04-23 101
首先下载 [code="RUBY"]ruby script/plugin install svn://rubyforge.org/var/svn/fckeditorp/trunk/fckeditor[/code] 其他说明： (1)FCKeditor安装在项目根目录下的vendor/plugins/fckeditor 里， (2)README文件代有使用说明 在你要使用是视图上添...
fckeditor编辑器改造示例：增加PRE，CODE控件
大剑师兰特的GIS世界
12-17 328
fckeditor是一个好用的编辑器，为了更好用，我们可以通过修改文件来个性化这个编辑器。
网络编程资源大集合(包含前端、java、linux、安卓、github开源项目、开发工具等)
sym的博客
03-14 9639
以下内容来自转载（非常感谢此文第一作者）：1.安卓各组件介绍一、ListView二、ActionBar三、Menu四、ViewPager 、Gallery五、GridView六、ImageView七、ProgressBar八、其他2.GitHub上优秀Android开源项目3. Android开发神器1.Xabber客户端2.oschina客户端3.手机安全管家4.星座连萌5.玲闹铃6.魔乐盒7....
史上最全Java学习视频下载地址分享
徐刘根的博客
10-02 2万+
1.Java基础视频  《张孝祥JAVA视频教程》完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播客) 张孝祥2010年贺岁视频：Java高新技术(传智播客) Java多线程与并发库高级应用(传智播客) 尚学堂JAVA视频下载大全(持续更新中...请关注！)(尚学堂) 《动力节点,王勇JAVA系列视频教程》(东西网)
分享一百多套开发视频教程的下载地址
徐刘根的博客
10-02 1万+
1. 北京圣思Java培训教学视频(资源共享网) 2.Lucene/WebService/SVN/Ant/SpringMVC视频(学习资料库网) 3.JUnit和Ant视频教程(VeryCD社区) 4.《张孝祥JAVA视频教程》完整版[RMVB](东西网) 5.历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播客) 6.30天轻松掌握JavaWeb视频(传
【Android 应用开发】GitHub 优秀的 Android 开源项目
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
01-09 8万+
文章转载自 : http://blog.csdn.net/zhixiang2010/article/details/18032871 作者 : Elysee2014 主要介绍那些不错个性化的View，包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar及其他如Dialog、Toast、Ed
Java自学视频整理(持续更新中...)
AlienTech for better life!~
12-06 2681
1.Java基础视频  《张孝祥JAVA视频教程》完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播客) 张孝祥2010年贺岁视频：Java高新技术(传智播客) Java多线程与并发库高级应用(传智播客) 尚学堂JAVA视频下载大全(持续更新中...请关注！)(尚学堂) 《动力节点,王勇JAVA系列视频教程》(东西网) 张孝祥Java高新技术
全国(大学)高等教育各学科视频教学全集
AlienTech for better life!~
11-10 8344
为了方便已就业的朋友再学学习，提供一篇覆盖的教程有计算机类全部，机械类，土木建筑类，财经管类 ，电气类，法学类 ，广告类，医学，心理学，大学英语，大学物理，高等数学，大学化学，哲学 应有尽有。常言道："书山有路勤为径，学海无涯苦作舟。"无止境地学习，是每一个智者所必需的。人要想不断地进步，就得活到老、学到老。这是我无意中看到的收藏了，欢迎有兴趣的朋友学习。   企业级项目实战(带源码升
FCKeditor使用详解.doc
01-12
FCKeditor 使用详解 FCKeditor 是一个功能强大、支持所见即所得功能的文本编辑器，可以为用户提供微软 Office 软件一样的在线文档编辑服务。它不需要安装任何形式的客户端，兼容绝大多数主流浏览器，支持 ASP.Net、...
FCKEditor使用方法
03-16
**FCKEditor使用方法** FCKEditor是一款曾经非常流行的开源HTML文本编辑器，它允许用户在Web页面上创建和编辑富文本内容。FCKeditor以其强大的功能和易用性，被广泛应用于各种网站的后台管理系统中，使得非编程人员...
fckeditor使用手册
05-30
**FCKeditor 使用手册** FCKeditor 是一款强大的开源富文本编辑器，广泛应用于网站内容管理系统，允许用户在网页上创建、编辑和格式化文本。本文档将详细介绍如何安装、配置、集成和优化 FCKeditor。 ### 安装 ...
通过 tomcat 让手机访问到电脑写的 html 网页
m0_75138009的博客
07-10 688
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1653
title>充电效果
HTML(29)——立体呈现
m0_74386799的博客
07-09 591
作用：设置元素的子元素是位于3D空间中还是平面中。将两个盒子分开，添加一个旋转的效果使其更明显。属性名：transform-style。为了更好的视觉效果我又添加了视距。原则给它们定位，最后。
HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子
forevercui的博客
07-09 1267
弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式align-items：flex-start | flex-end | center | baseline | stretch （单行）
初识HTML
Dxito_的博客
07-09 922
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值