富文本编辑框 kindeditor

kindeditor 是一个插件

1 下载地址:

http://kindeditor.net/down.php

2 文件夹说明:

 3 基本使用:

  　　

<textarea name="content" id="content"></textarea>
 
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
    $(function () {
        initKindEditor();
    });
 
    function initKindEditor() {
        var kind = KindEditor.create('#content', {
             '100%',       // 文本框宽度(可以百分比或像素)
            height: '300px',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小宽度（数字）
            minHeight: 400      // 最小高度（数字）
        });
    }
</script>

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

4 上传图片实例

{% block js %}
    <script charset="utf-8" src="/static/plugin/kindeditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="/static/plugin/kindeditor/lang/zh_CN.js"></script>
    <script charset="utf-8" src="/static/js/csrf.js"></script>
    <script>
        var editor;
        KindEditor.ready(function (K) {
            editor = K.create('textarea[name="content"]', {
                resizeType: 1,
                allowPreviewEmoticons: false,
                allowImageUpload: true,
                items: [
                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                    'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
                uploadJson:'/sakula/img/',
                filePostName:'ci',
                extraFileUploadParams: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            });
        });


        $('#comnent_submit').click(function () {

            $.ajax({

                url:'/add_coment/{{ blog.stite }}/{{ article.id }}/1/',
                type:'get',
                dataType:'json',

                data:{'a':'a1','b':editor.html()},
                success:function (arg) {
                    console.log(arg);
                }
            })
        })
    </script>

{% endblock %}

class AddComent(View):
    def get(self,request,**kwargs):
        user=request.session.get('userinfo',None)
        if not user:
            return redirect('/login/')

        uerinfo=models.UserInfo.objects.filter(name=user.get('name')).first()
        coment_detail=models.Comment.objects.create(article_id=kwargs.get('sid'),user=uerinfo,content=request.GET.get('b'))
        response={'status':True,'error':None,'userinfo':uerinfo.nick_name,'coment_detail':coment_detail.content}
        return HttpResponse(json.dumps(response))
class ComentImg(View):
    def get(self,request):
        return render(request,'tweb/asdsadsd.html')
    def post(self,request):
        img_file = request.FILES.get('ci')
        img_file_path = 'static/img/comment/%s' % (img_file.name)
        with open(img_file_path, 'wb') as f:
            for line in img_file.chunks():
                f.write(line)
        dic = {
            'error': 0,
            'url': "/"+img_file_path,
            'message': '错误了...'
        }
        return HttpResponse(json.dumps(dic))