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>

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