富文本编辑器CHEDITOR的使用与配置

CKEDITOR使用与配置

安装：

　　下载CKEDITOR的文件，解压后复制到工程的WEBROOT目录下就OK！

引用CKEDITOR的JS文件：

　　新建JSP页面，添加其JS文件

　　注意：1.src的路径。

　　　　　2.不要写成<script type="text/javascript" src="ckeditor/ckeditor.js />样式，在现有的3.0.1版本中会出现CKEDITOR未定义的脚本错误提示，致使不能生成编辑器。


替换TEXTAREA标签：

<textarea rows="30" cols="50" name="editor01">请输入.</textarea>
<script type="text/javascript">CKEDITOR.replace('editor01');</script>

注意：要在textarea后面加入javascript.如果要在HEAD区写javasript,那么采用如下代码：

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

好了到此一个默认的CKEDITOR就配置完毕了，可以去页面看看它的模样了。

当然还有一个方法CKEDITOR.appendTo(elementOrId, config) 它可以在特定的dom对象中创建CKEDITOR

<div id="editorSpace"><:/div>

CKEDITOR.appendTo( 'editorSpace' );

可参考：http://www.cnblogs.com/Fskjb/archive/2009/11/16/1603461.html


项目调用示例：

       
        //将textarea替换成富文本
        CKEDITOR.replace( "demo", {
              toolbar : 'Basic'
          });

       // ......
       //获取富文本框中的值
       var demo2=CKEDITOR.instances.demo.getData();
       
       //如果存在中文乱码问题，需要对文本信息进行两次编码
        	demo2=encodeURIComponent(demo2);
	        demo2=encodeURIComponent(demo2);

String demo = StringUtils.getParameter(request, "demo2");
       //后台再通过解码获得中文
try {
	      demo = URLDecoder.decode(demo, "UTF-8");
	} catch (Exception e) {
			e.printStackTrace();
	}