富文本编辑框 kindeditor

kindeditor 是一个插件

1 下载地址:

http://kindeditor.net/down.php

2 文件夹说明:

 3 基本使用:

  　　

 1 <textarea name="content" id="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             width: '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>

js的方式使用

4 上传图片实例

 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 %}

html部分

 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))

view部分