在线html网页编辑器ckeditor的使用与配置

来源:互联网 发布:安卓运行php 编辑:程序博客网 时间:2024/03/29 20:12

在项目中用到了 ckeditor 网页编辑器,现在整理记录下其使用心得,一来希望帮助有需要的朋友,二来留个笔记。

此处介绍的是当时用到的最新版ckeditor_3.6.4

一、ckeditor的基本套用

1、下载ckeditor控件

如果已经下载好了就省略此步,如果没有可以到这里下载我是用的版本http://download.csdn.net/detail/zcyhappy1314/5121538,

最新版的可以到这里下载http://ckeditor.com/download

2、在系统中引入控件

解压后将ckeditor文件夹放到项目WebRoot或WebContent(eclipse)目录下,在需要使用的页面中引入一下js文件

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

注:网上有人说这样引入不好用<script type="text/javascript" src="ckeditor/ckeditor.js"/>,自己没测试。

3、控件的套用

在网页中添加一下内容即可,textarea下面的脚本用来替换指定name文本域的,这里name='content'

 <textarea name="content">${record.content}</textarea>
  <script type="text/javascript">
             CKEDITOR.replace('content');
  </script>

当然这段脚本可以放到head标签之间,但要放到文档加载完成就触发的方法中,如window.onload()=function(){......}.

至此运行网页就可以看到ckeditor的效果了。

二、ckeditor的配置

1、配置ckeditor使其可以调整行高

下载一个ckeditor的插件即可,其名称为lineheight,可以到这里下载http://download.csdn.net/detail/zcyhappy1314/5121970

下载解压后将其放到ckeditor下的plugins目下即可

2、配置ckeditor使其可以设置中文字体

这个忘了当时是怎么配置的了,好像很容易的,在网上找的,想起来了再补上来吧

3、配置ckeditor使其可以上传图片

a、把上面提到的<script type="text/javascript">
                              CKEDITOR.replace('content');
                       </script>替换为如下

  <script type="text/javascript">
             CKEDITOR.replace('content', {
              filebrowserUploadUrl : 'ckeditor/uploader?Type=File',
              filebrowserImageUploadUrl : 'ckeditor/uploader?Type=Image',
              filebrowserFlashUploadUrl : 'ckeditor/uploader?Type=Flash'
             });
  </script>

b、下载处理上传操作的java类(Servlet),地址http://download.csdn.net/my

下载解压后将文件夹放到src根目录下并在web.xml中注册Servlet

路径可以修改,但要保持和脚本中指定的一致。至此点击ckeditor编辑器的上传图片的图标应该就可以上传图片了,

至于上传路径,在java文件中自己修改了。

4.其它配置

还有好多其它的配置,如定制工具条等等,今个写不下去了,有机会再补吧。如果你见过关于ckeditor的更详细更全面的blog,可以给我留个地。

这个只是我的笔记,觉得不好的,可以看看这篇,写的挺全乎的http://www.cnblogs.com/Fskjb/archive/2009/11/16/1603461.html

原创粉丝点击