在线编辑器KindEditor的使用

Posted 2020-09-19 努力哥-运维自动化

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)