1、官网下载：点击进入

2、解压后目录说明

├── asp                          asp示例├── asp.net                    asp.net示例├── attached                  空文件夹，放置关联文件attached├── examples                 HTML示例├── jsp                          java示例├── kindeditor-all-min.js   全部JS（压缩）├── kindeditor-all.js        全部JS（未压缩）├── kindeditor-min.js      仅KindEditor JS（压缩）不包含plugins的JS代码├── kindeditor.js            仅KindEditor JS（未压缩）不包含plugins的JS├── lang                        支持语言├── license.txt               License├── php                        PHP示例├── plugins                    KindEditor内部使用的插件└── themes                   KindEditor主题

3、使用样例

1. 页面添加textarea标签

   <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>

2. 在页面添加如下脚本

   <script charset="utf-8" src="http://www.mamicode.com/editor/kindeditor.js"></script><script>        KE.show({                id : ‘editor_id‘        });</script>

3. 获取编辑器的内容
   //取得HTML内容html = KE.html(‘editor_id‘);//同步数据后可以直接取得textarea的valueKE.sync(‘editor_id‘);html = document.getElementById(‘editor_id‘).value;html = $(‘#editor_id‘).val(); //jQuery//设置HTML内容KE.html(‘editor_id‘, ‘HTML内容‘);
4. 自己写的评论使用kindeditor
5. <div class="comment-area">        <div class="replay-comment-user"></div>        <div class="reply-area" style="position: relative;">            {% if not request.session.user %}   //我是将用户信息保存在session里                <div style="text-align:center;line-height:200px;position: absolute;top:0;left:0;right:0;bottom: 0; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>                    您需要登录后才可以回帖 <a href="http://www.mamicode.com/login/">登录</a> | <a href="http://www.mamicode.com/register/">立即注册</a>                </div>            {% endif %}            <textarea id="editor_id" name="content" style="width: 100%;height:200px;"></textarea>        </div>        <div>            <div class="reply-btn">                <span><span>21</span>/255字</span>                <a class="btn btn-primary" onclick="editformsubmit()">发表回复</a>            </div>        </div>    </div>
   <script charset="utf-8" src="http://www.mamicode.com/static/plugins/kindeditor-4.1.10/kindeditor-all.js"></script><script>$(function () {            initKindEditor();        })        function initKindEditor() {            //对#editor_id对象实例化产生一个kindeditor的对象                kindeditor = KindEditor.create(‘#editor_id‘, {                resizeType: 1,  //文本框大小是否可调，0：不可调，1：上下可调，2：上下，斜拉可调                allowPreviewEmoticons: false,  //表情是否会出现预览效果                allowImageUpload: true,           //是否允许上传本地图片                fileManagerJson: ‘/kind/file_manager/‘,                uploadJson:‘/edit_comment_photo.html‘,   //图片上传的url{#                filePostName:‘/edit_comment_img_name‘,#}                extraFileUploadParams: {                        ‘csrfmiddlewaretoken‘: ‘{{ csrf_token }}‘                    },    //避免csrf拦截                items: [                            //在文本框添加一些元素按钮                    ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘,                    ‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,                    ‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘]            })        }        function editformsubmit() { //提交时发送ajax请求            $.ajax({                url:‘/submit_comment.html‘,                type:‘GET‘,                data:{‘comment‘:kindeditor.html(),‘article_id‘:{{ article.id }},‘user_id‘:{{user_obj.id}} },                success:function (args) {                    console.log(args)                    kindeditor.html();                    window.location.reload();                }            })        }    </script>
   def submit_comment(request):    # content = models.CharField(max_length=10240) #评论的内容    # article = models.ForeignKey(‘Article‘,related_name=‘article_coments‘) #评论那篇文章    # user = models.ForeignKey(‘User‘) #哪个用户写的评论    # ctime = models.DateField(auto_created=True) #评论的时间    # parent_comment = models.ForeignKey(‘Comment‘,related_name=‘child_comment‘,null=True,blank=True) #评论是某条评论    data = http://www.mamicode.com/request.GET.get(‘comment‘,None)>
   

   def edit_comment_photo(request):    img = request.FILES.get(‘imgFile‘)  #从request拿到上传的照片    imgdir = os.path.join(‘static‘,‘img‘,‘comment‘,img.name) #拼接相应的路径，为写入服务器做准备    # print(imgdir)    #将照片文件写入相应的路径    with open(imgdir,‘wb‘) as f:        for line in img.chunks():            f.write(line)    #创建字典，将信息返回至前端    dic = {        ‘error‘: 0,        ‘url‘: ‘/static/img/comment/‘ + img.name,        ‘message‘: ‘上传成功！‘    }    return JsonResponse(dic)

在线编辑器KindEditor的使用