CKEditor的安装与基本使用(JSP)

CKEditor的安装与基本使用(JSP)

 

一、下载CKEditor

       1. 直接下载地址,当前最新版本为3.5:

       http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip

       2. 或者可直接到官方网站下载:

       http://ckeditor.com/download

 

二、安装CKEditor

       解压ckeditor_3.5.zip,得到ckeditor文件夹,将ckeditor整个文件夹复制到项目工程的根目录下,即WebRoot下

 

三、验证CKEditor是否安装成功

       部署运行项目,访问: http://localhost/项目名称/ckeditor/_samples/index.html

       则可出现 “CKEditor Samples List” 的Demo页面,说明CKeditor已安装成功

 

四、应用CKEditor

       1. 导入JS文件

<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>

       2. 创建和使用CKEditor

<textarea class="ckeditor" cols="80" id="content" name="content" rows="10">  
      CKEditor Test......(此处的内容会在编辑器中显示)  
</textarea>  
  
<script type="text/javascript">  
//<![CDATA[  
    CKEDITOR.replace('content',{toolbar:'Full', skin : 'kama'});  
//]]>  
</script>  

        说明:

         1) textarea属性值 name="content": 名字可随意定义,但必须与下面的CKEDITOR.replace('content');匹配

         2) CKEDITOR.replace('content');是最基本的写法,表示使用CKEditor的JavaScript API创建的编辑器实例,

替换上面的textarea

若要为CKEditor增加一些属性设置,则其属性必须写在{}花括号内,

如上{toolbar:'Full', skin : 'kama'},

具体的属性网上很多文章均可搜索到,这里不累述了。

        3) 上面的textarea后面的“CKEDITOR.replace('content');”脚本也可以写在<head></head>标签内

<script type="text/javascript">  
    window.onload = function(){  
        CKEDITOR.replace('content');  
    }  
</script>  

五、获取编辑器里的数据

      有时在提交表单时,需要判断下编辑器里的内容是否为空,这时可使用CKEditor的JavaScript API:

      CKEDITOR.instances.content.getData() 

function test() {  
    var editor_data = CKEDITOR.instances.content.getData();  
    if(editor_data==null || editor_data==""){  
        alert("请填写内容!");  
        return false;  
    }  
}  

       注意:如果你在编辑器里打了一堆的空格,内容是不为空的,因为编辑器会把你打的空格都转换成&nbsp;

至此,CKEdiotr编辑器即可在页面上显示与使用。

补充说明:如果你的项目中使用struts2等框架,也可根据上面textarea的属性name="content"来获取编辑器里的内容,最好使用BLOB来存储。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值