django——文本編輯器

在博客項目中，爲了支持用戶的在線編輯博客，咱們選用了kindeditor這個強大的編輯器。

如下是對kindeditor的簡介，以及在Django中引入這個編輯器的方法:)

1.KindEditor是什麼？

KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上得到所見即所得編輯效果，開發人員能夠用 KindEditor 把傳統的多行文本輸入框(textarea)替換爲可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，能夠無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。

主要特色

• 快速：體積小，加載速度快
• 開源：開放源代碼，高水平，高品質
• 底層：內置自定義 DOM 類庫，精確操做 DOM
• 擴展：基於插件的設計，全部功能都是插件，可根據需求增減功能
• 風格：修改編輯器風格很是容易，只需修改一個 CSS 文件
• 兼容：支持大部分主流瀏覽器，好比 IE、Firefox、Safari、Chrome、Opera

2.Django中引入kindeditor

2.1 templates代碼：

<div class="content form-group">
    <label for="">內容(Kindeditor編輯器，不支持拖放/粘貼上傳圖片) </label>
    <div>
        <textarea name="content" id="article_content" cols="30" rows="10"></textarea>
    </div>
</div>

<input type="submit" class="btn btn-default">


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

上面的html代碼中的textarea將是kindeditor引入的對象

2.2 效果展現：

這樣就完成了初步的在django中引入kindeditor編輯器的引入。