Django-- text editor

In the preparation of the project, if you need a lightweight online editor, the editor may choose KindEditor this article to introduce

The following is an introduction to kindeditor, and the method of introducing the editor in Django:

 1.kindeditor Profile

KindEditor is an open source online HTML editor, mainly for WYSIWYG editor allows users to get results on the site, developers can put traditional multi-line text input box (textarea) replaced with a visual rich text input KindEditor frame. KindEditor written in JavaScript, you can seamlessly integrate with Java, .NET, PHP, ASP and other procedures, more suitable for use in the CMS, store, forum, blog, Wiki, e-mail and other Internet applications.

main feature:

• Fast: small size, fast loading speed
• Open source: open source, high-level, high-quality
• Bottom: Custom Built DOM library, precise operation DOM
• Extended: design plug-in-based, all functions are plug-in function according to changes in demand
• Style: style is very easy to modify the editor, just modify a CSS file
• Compatibility: supports most major browsers, such as IE, Firefox, Safari, Chrome, Opera

 Official Download: http://kindeditor.net/down.php

In 2.Django introduced kindeditor

2.1 templates Code:

<div class = " Content-form Group " > 
    <label for = "" > content (Kindeditor editor does not support drag and drop / paste upload pictures) </ label> 
    <div> 
        <the TextArea name = " Content " the above mentioned id = " article_content " cols = " 30 " rows = " 10 " > </ TextArea> 
    </ div> 
</ div> 

<INPUT type = " Submit "  class = " BTN-BTN Primary "= value ' Submit ' >


<script src="/static/js/jquery-3.3.1.min.js"></script>
   <script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>

    <script>
            KindEditor.ready(function(K) {
                    window.editor = K.create('#article_content',{
                        width:"100%",
                        height:"600",
                        resizeType:0,
                        uploadJson:"/upload/",
                        extraFileUploadParams:{
                            csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                        },
                        filePostName:"upload_img"


                    });
            });
    </script>

 

2.2 Effects show:

                       

This completes the initial introduction of the introduction of kindeditor editor in django in.

If you want to get the text content by jQuery, you need to add a statement in the acquisition function:

$ ( ' .Primary-BTN ' ) .click (function () { 
            editor.sync ();        # Add this method, see the official documents 
            var Content = $ ( ' #article_content ' ) .val (); 
            the console.log ( Content); 
            })