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="/editor/kindeditor.js"></script>
   <script>
           KE.show({
                   id : ‘editor_id‘
           });
   </script>
3. 獲取編輯器的內容

   //取得HTML內容
   html = KE.html(‘editor_id‘);
   
   //同步數據後可以直接取得textarea的value
   KE.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="/login/">登錄</a> | <a href="/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="/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 = request.GET.get(‘comment‘,None)
       article_id = request.GET.get(‘article_id‘,None)
       user_id = request.GET.get(‘user_id‘,None)
       models.Comment.objects.create(content=data,article_id =article_id,user_id=user_id )
       return HttpResponse(‘OK‘)

   

   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的使用