Catalog

Usage method

Just bind events directly to the input box. Note that the introduction of js is a little different. Add more coding methods.

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>


KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });   //Add rich text edit menu bar


K.create('Text input box to bind events id',{Here are the preliminary data})

K.create has two parameters, i.e. the id value of the label to be bound, parameter 2, initialization parameter.

    KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id',
            {
                width: '100%',        //Width support% and px style
                items: [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor'
                ]
            })
        ;
    }); 

Official website

Rich text editor official website http://kindeditor.net/docs/option.html#items

Picture upload and download example

View processing

def up_img(request,):
    img_obj = request.FILES.get("imgFile",None)
    # The name of the picture is imgFile by default
    
    path=os.path.join(settings.MEDIA_ROOT,"article_img",img_obj.name)# Get the path of file upload and save it in the media file for easy access
    # The default name is imgFile
    with open(path,"wb") as f:
        for i in img_obj:
            f.write(i)
    print(path)
    data={
        "error":0,                                   # Return upload results to editor
        "url":"/media/article_img/"+img_obj.name     # Return to the image path, and the editor accesses the browser to retrieve data.
    }
    return HttpResponse(json.dumps(data))

js incident

    KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id',
            {
                width: '100%',
                uploadJson:"/up_img/",                      
                extraFileUploadParams:{       //data equivalent to ajax
                              csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                }
            })
        ;
    });   //Add rich text edit menu bar

filePostName specifies the upload file form name.

Data type: String

Default: imgFile

Menu bar function filter

 items: [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor'
                ],