`
JavaCrazyer
  • 浏览: 3009193 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

快速掌握FCKEditor和CKEditor

阅读更多

其一:FCKEditor
首先上官方网站:www.fckeditor.net
下载FCKeditor_2.6.3.zip,将其中的fckeditor文件夹复制到WebRoot下面,后面可以直接使用
下一步(这一步不是必须的):
找到fckconfig.js文件进行编辑,可参考FCKConfig.ToolbarSets["Default"] =[ ]
[ ]里面的选项可根据自己喜好进行选择,然后取名FCKConfig.ToolbarSets["你取的工具条名称"]
接下来如果想在页面通过标签嵌入方式显示效果的话
必须添加java-core2.4.jar包来获取FCK的相应标签
       <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
        <FCK:editor instanceName="content"  value=" " width="85%" height="300px" toolbarSet="你刚才取的名字">
        <FCK:config SkinPath="skins/silver/" AutoDetectLanguage="true" />
        </FCK:editor>
当然这里面的toolbarSet可以不写就用默认的工具条布局模式
1. 标签方式话代码如下
  <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
  省略中间标签
  <FCK:editor  instanceName="content"  value=" " width="85%" height="300px">
        <FCK:config SkinPath="skins/silver/" AutoDetectLanguage="true" />
   </FCK:editor>
2.JavaScript方式的话不需导入标签库
  <script type="text/javascript">
   window.onload(function(){
   var oFCKeditor=new FCKeditor('MyTextarea');
   oFCKeditor.BasePath="fckeditor/";
    oFCKeditor.ReplaceTextarea();
   });
  </script>
<textarea rows="4" cols="60" name="MyTextarea"></textarea>
其二:CKEditor则更加方便快捷
   首先从官方网站上:www.fckeditor.net
   下载ckeditor_3.2.zip,将其加压,把ckeditor文件夹复制到WebRoot下面
第一种方式:通过设定textarea的类名为ckeditor即可替换:
                                        ...省略导入文件语句
     <textarea class="ckeditor" rows="10"   cols="80" name="editor1"> </textarea>
第二种方式:通过代码替换
     <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
     <script type="text/javascript" src="ckeditor/_samples/sample.js"></script>
      <link rel="stylesheet" type="text/css" href="ckeditor/_samples/sample.css">
               <textarea rows="10" cols="80" name="editor1"> </textarea>
               <script type="text/javascript">
//<![CDATA[

CKEDITOR.replace( 'editor1',
{
fullPage : true
});

//]]>
                </script>
                  其中:,{fullPage:true}可以省略
其三:CKEditor的皮肤更换
     (1)定制皮肤:卡马,office2003,第二版皮肤
      CKEDITOR.replace( 'editor_kama',
{
skin : 'kama'
});
      其中eidor_kama为textera的名称,可以改变。
      skin可选的值有v2,office2003,kama
   (2)用户界面颜色选择器
   CKEDITOR.replace( 'editor1',
{

extraPlugins : 'uicolor',
uiColor: 'yellow',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
});
       其中uiColor的值为初始页面的颜色可以为各种颜色green,yellow,red,blue等等
      ['UIColor']为真正出现的在工具条中的颜色选择器

其他功能如添加语言分类,淘宝网的选择在飞模式。比较麻烦参考下载包中samples中的index.jsp即可
2
0
分享到:
评论

相关推荐

    FCKeditor最新版及使用说明

    这份文档对于开发者来说是至关重要的参考资料,可以帮助他们快速理解和掌握CKeditor的使用。 **ckeditor文件** 这个文件可能包含了CKeditor的核心JavaScript库,它是实际编辑器的主体部分,负责渲染和处理编辑区域...

    FCKeditor_2.6.8.zip

    **FCKeditor 2.6.8:一个强大的在线文本编辑器** FCKeditor是一款开源的、基于Web...虽然现在已经有了更多选择,但了解和掌握FCKeditor的历史和使用方法,对理解现代富文本编辑器的发展历程及其工作原理仍然很有价值。

    5分钟学会FCKEDITOR

    总的来说,学习和掌握FCKeditor并不复杂,只需要基本的HTML和JavaScript知识,你就可以在自己的Web项目中实现专业级的文本编辑功能。通过不断地实践和探索,你会发现更多的定制技巧和高级用法,进一步提升用户体验。

    CKEditor 3.6.2中文文档

    通过本文介绍的知识点,开发者可以快速掌握如何安装、升级以及使用CKEditor的基本方法。无论是对于初次使用者还是希望进一步定制编辑器功能的高级用户来说,这些知识点都提供了必要的指导和支持。

    fckeditor简单实例

    通过学习这个实例,开发者可以快速掌握FCKeditor的使用方法,减少自己摸索的时间,提高开发效率。 需要注意的是,随着技术的发展,FCKeditor已经被其后继者CKEditor所取代,后者拥有更多的功能和更好的性能。然而,...

    FckEditor在线编辑器

    FckEditor是一款强大的开源在线文本编辑器,广泛应用于网站建设和内容管理系统中,为用户提供类似桌面文字处理软件的编辑体验。...通过了解和掌握FckEditor的使用,开发者可以提升用户体验,简化内容管理流程。

    FCKEditor在线编辑器

    FCKEditor是一款强大的开源在线文本编辑器,专为网页开发者设计,用于在Web应用程序中提供类似于桌面文字处理软件的...对于初学者或需要快速实现在线编辑功能的开发者来说,了解和掌握FCKeditor仍然是非常有价值的。

    FCKEditor富文本控件

    然而,随着时间的发展,FCKeditor逐渐被更新的富文本编辑器如CKEditor(FCKeditor的升级版)所取代,因为它在某些方面存在性能和功能上的局限。尽管如此,FCKeditor仍然是一个经典的富文本编辑器,对于学习和理解富...

    fckeditor示例,可以直接导入eclipse部署运行

    **FCKeditor简介** FCKeditor是一款开源的Web富文本编辑器,它允许用户在浏览器端进行文字编辑、格式设置、插入图片、链接...通过深入理解和实践这个示例,你可以更好地掌握FCKeditor的运用,提升Web应用的用户体验。

    ckeditor_3.6.zip

    通过阅读相关文档,开发者可以快速掌握如何在Java环境下使用和配置CKEditor,从而在项目中充分发挥其潜力。对于任何需要在网页上实现高级文本编辑功能的开发者而言,CKEditor 3.6都是一个值得信赖的选择。

    fckeditor2.4.1配置

    **FCKeditor 2.4.1 配置详解** FCKeditor 是一款开源的、基于 JavaScript 的富文本编辑器,广泛应用于Web开发...理解并熟练掌握这些配置,能够帮助我们更好地利用FCKeditor创建和维护富文本编辑功能的网站或应用程序。

    fckeditor格式化工具详解

    **FCKeditor格式化工具详解** ...无论你是初学者还是经验丰富的开发者,掌握FCKeditor的使用将极大提升你的工作效率和内容质量。虽然现在有了更多的选择,但FCKeditor留下的经验和理念依然值得我们借鉴。

    FCKEditor网页编辑器

    **FCKEditor网页编辑器详解** FCKEditor是一款开源的网页文本编辑器,它为用户提供了一个类似Microsoft Word的界面,使得在网页上编辑内容变...了解并掌握FCKEditor,对于网页开发者来说,无疑会提升他们的工作效率。

    FCKeditor_2.6.4.tar.gz

    然而,随着技术的发展,FCKeditor逐渐被更现代的编辑器如CKEditor(FCKeditor的后续版本)和TinyMCE所取代。这些新的编辑器不仅继承了FCKeditor的优点,还在性能、兼容性和用户体验方面进行了大幅提升。 总结来说,...

    CKEditor使用教程

    本教程旨在帮助新手快速上手CKEditor,并掌握其基本用法与常见配置。 #### 二、安装与集成 ##### 2.1 获取CKEditor 访问CKEditor官方网站(http://ckeditor.com/),下载所需版本。本文档中使用的版本为v3.0.1。 ...

    fckeditor java网页在线日志编辑器

    开发者可以参考这个示例来快速理解和部署FCKeditor到自己的Java Web应用中。 总之,FCKeditor作为一个强大的Java网页在线日志编辑器,为Web开发带来了极大的便利。通过熟练掌握其使用和集成方法,开发者可以为用户...

    FckEditor使用积累

    **FCKEditor 使用积累** ...同时,随着技术的发展,FCKeditor已被CKEditor 4和CKEditor 5所取代,虽然新版本提供了更多特性,但老版本的FCKeditor仍有许多网站在使用,因此掌握其使用技巧仍然是有价值的。

    FCKeditor_2.6

    网页编辑器在现代Web开发中扮演着重要角色,FCKeditor 2.6作为一款早期的编辑器,虽然现在已经有了很多更新的替代品,如CKEditor(FCKeditor的后续项目)和TinyMCE,但它依然在许多旧项目中被使用,而且其设计理念和...

    CKeditor for ASP.NET源代码

    4. `CKEditor.NETwithSamples.sln`和`CKEditor.NET.sln`:这是两个Visual Studio解决方案文件,包含了CKeditor for ASP.NET项目的源代码,开发者可以通过这些文件在Visual Studio中打开和编译项目。 5. `使用帮助....

Global site tag (gtag.js) - Google Analytics