富文本编辑框 kindeditor

kindeditor 是一个插件

1 下载地址:

http://kindeditor.net/down.php

2 文件夹说明:

富文本编辑框 kindeditor

3 基本使用:

 1 <textarea name="content" ></textarea>
 2  
 3 <script src="/static/jquery-1.12.4.js"></script>
 4 <script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
 5 <script>
 6     $(function () {
 7         initKindEditor();
 8     });
 9  
10     function initKindEditor() {
11         var kind = KindEditor.create('#content', {
12              '100%',       // 文本框宽度(可以百分比或像素)
13             height: '300px',     // 文本框高度(只能像素)
14             minWidth: 200,       // 最小宽度（数字）
15             minHeight: 400      // 最小高度（数字）
16         });
17     }
18 </script>

jquery 的方式使用

1 <script charset="utf-8" src="/static/plugin/kindeditor/kindeditor-min.js"></script> 2 <script charset="utf-8" src="/static/plugin/kindeditor/lang/zh_CN.js"></script> 3 <script> 4 var editor; 5 KindEditor.ready(function (K) { 6 editor = K.create('textarea[name="content"]', { 7 resizeType: 1, 8 allowPreviewEmoticons: false, 9 allowImageUpload: false, 10 items: [ 11 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 12 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 13 'insertunorderedlist', '|', 'emoticons', 'image', 'link'] 14 }); 15 }); 16 </script>

1 {% block js %} 2 <script charset="utf-8" src="/static/plugin/kindeditor/kindeditor-min.js"></script> 3 <script charset="utf-8" src="/static/plugin/kindeditor/lang/zh_CN.js"></script> 4 <script charset="utf-8" src="/static/js/csrf.js"></script> 5 <script> 6 var editor; 7 KindEditor.ready(function (K) { 8 editor = K.create('textarea[name="content"]', { 9 resizeType: 1, 10 allowPreviewEmoticons: false, 11 allowImageUpload: true, 12 items: [ 13 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 14 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 15 'insertunorderedlist', '|', 'emoticons', 'image', 'link'], 16 uploadJson:'/sakula/img/', 17 filePostName:'ci', 18 extraFileUploadParams: { 19 'csrfmiddlewaretoken': '{{ csrf_token }}', 20 }, 21 }); 22 }); 23 24 25 $('#comnent_submit').click(function () { 26 27 $.ajax({ 28 29 url:'/add_coment/{{ blog.stite }}/{{ article.id }}/1/', 30 type:'get', 31 dataType:'json', 32 33 data:{'a':'a1','b':editor.html()}, 34 success:function (arg) { 35 console.log(arg); 36 } 37 }) 38 }) 39 </script> 40 41 {% endblock %}

1 class AddComent(View): 2 def get(self,request,**kwargs): 3 user=request.session.get('userinfo',None) 4 if not user: 5 return redirect('/login/') 6 7 uerinfo=models.UserInfo.objects.filter(name=user.get('name')).first() 8 coment_detail=models.Comment.objects.create(article_id=kwargs.get('sid'),user=uerinfo,content=request.GET.get('b')) 9 response={'status':True,'error':None,'userinfo':uerinfo.nick_name,'coment_detail':coment_detail.content} 10 return HttpResponse(json.dumps(response)) 11 class ComentImg(View): 12 def get(self,request): 13 return render(request,'tweb/asdsadsd.html') 14 def post(self,request): 15 img_file = request.FILES.get('ci') 16 img_file_path = 'static/img/comment/%s' % (img_file.name) 17 with open(img_file_path, 'wb') as f: 18 for line in img_file.chunks(): 19 f.write(line) 20 dic = { 21 'error': 0, 22 'url': "/"+img_file_path, 23 'message': '错误了...' 24 } 25 return HttpResponse(json.dumps(dic))

相关推荐