CKEditor的用法

1.首先从CKEditor官方网站上下载CKEditor的最新版本。

2.将下载好的问价解压，把ckeditor.js放到自己的项目下

3.引用

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

4.创建一个文本区域

<textarea id="aa"></textarea>

5.js代码说明

<script type="text/javascript">
    CKEDITOR.replace( 'aa' );
</script>
//上面的脚本块只能包含在网页的<textarea>标签之后。也可以在<head>标签内运行这个替换过程，但是在这种情况下，你必须确定DOM已经载入完毕，通常可以写在window.onload事件里面（这时DOM肯定已经载入完毕啦）

<script type="text/javascript">
    window.onload = function(){
        CKEDITOR.replace( 'aa' );
    };
</script>
//客户端数据处理 一些用应中（如ajax应用）需要在客户端处理完所有的数据，然后用它自己的方式向服务器发送数据，在这些情况下，使用CKEditor API就足以轻松获取编辑器实例中的内容。

<script type="text/javascript">
    var aadata= CKEDITOR.instances.aa.getData();
</script>

6.实例

<form id="editform" method="post" encType="multipart/form-data">
    <table>
        <tr>
            <td style="width: 100px" align="left">文章内容：</td>
            <td align="left" colspan="5">
                <textarea id="content" name="content" style="width: 450px" rows="9"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="save();" id="btn_zc">发布</a>
            </td>
        </tr>
    </table>
</form>

<script>
    CKEDITOR.replace("content");
    function save(){
	var value = CKEDITOR.instances.content.getData();
	$("#content").val(value);
        var theIndex=layer.msg( "保存中...", {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,time:100000}) ;
	$.ajax({
	    url: "提交的接口",
	    type: 'POST',
	    cache: false,
	    data: new FormData($('#editform')[0]),
	    processData: false,
	    contentType: false
	    }).done(function(res) {
		alert("成功!");
		location.href="成功后需要跳转的页面";
		}).fail(function(res) {alert("失败")}).always(function()    {layer.close(theIndex);});
   }
</script>

//保存到数据库的数据将是待着html标签的样式数据，返回数据时如下：
<script>
    $.post("获取数据的接口",{},function(resp){
	if(resp.msg=="OK"){
	    var data=resp.rows;
	    $("#content").val(data.content);
	    CKEDITOR.replace("content");
        }
    }
</script>

猜你喜欢