KindEditor 编辑器之简易使用

        在最近做的项目中，有个提交作业的功能，通过KindEditor 编辑器来实现还是很好用的。下面就先介绍下KindEditor ，KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

        这是官网的下载地址：http://kindeditor.net/down.php

            下载解压好编辑器后，便可以使用了。首先把解压的文件夹放到项目中，包含在项目中。然后在HTML页引用：

<textarea id="content_1" name="content" style="width:940px;height:350px;"></textarea>

         <script type="text/javascript" charset="utf-8" src="../../Scripts/kindeditor-4.1.10/kindeditor.js"></script>
            <script type="text/javascript">
                    var editor;
                    KindEditor.ready(function (K) { editor = K.create('#content_1') })
                    
            </script>

src的路径就是存放的路径。

引用了之后编辑器的效果如图：

 

        引用了之后，要做的就是如何获取textarea中的文本，并提交到后台处理，我在js中的代码：

//提交按钮
function commit1() {
    editor.sync();
    var content = $('#content_1').val();//content就是获取的文本
    if (content == "") {
        alert('不能为空！')
    } else {
        //这里可以写对content的操作，这里我使用ajax与后台交互
	
	$.ajax({
        	type: "POST",
        	async: false,
        	url: "CommitHomework",//提交content，成功则返回true，失败则返回false
        	data: {  "content": content },
        	success: function (data) {
            		if (data == 'True') {
                		alert('提交成功！')
            				} else{ 
				alert('提交失败！')}
            	}
    		});
     }<span style="font-family:Arial, Helvetica, sans-serif;">}</span>

这就是该编辑器的最简单的使用，还有其他更加深入的功能暂不讨论。