django之前端富文本編輯器（Meditor）

一、簡要說明

　　在博客、新聞編輯等頁面經常需要進行內容編輯，最后還要展示，因此不可能像在TEXT文檔里面編輯一樣（只是純文字內容，沒有人任何的樣式），所以就需要富文本編輯器，通過快捷鍵或者是固定的語法在編輯器中使用自己想要的樣式，使自己編輯的內容條理更清晰，賞心悅目。從展示的方式上可以分為兩種：第一種，在后台使用表單工具，編寫相應的表單類，然后在后台將代碼渲染成相應的表單再傳輸到前端（django-tinymce、django-ckeditor、django-ueditor等）；第二種，返回一個包含一些簡單配置的前端頁面，當瀏覽器在解析頁面時，就會請求相應的js、css文件並渲染成一個表單（Meditor）。這兩種方式，我更偏向於第二種，相對於第一種，后台做的工作更少一些，不用做一些額外的操作，更加的簡單。

二、Meditor

　　 1.根據頁面展示，你可以判斷是否符合你的口味：https://pandao.github.io/editor.md/

　　 2.Meditor使用（markdown語法）

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
    <textarea style="display:none;">### 關於 Editor.md

**Editor.md** 是一款開源的、可嵌入的 Markdown 在線編輯器（組件），基於 CodeMirror、jQuery 和 Marked 構建。
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

上述代碼是官網給的使用格式，千萬不要以為只要有代碼中的三個文件（editormd.css、jquery.min.js、editormd.min.js）就萬事大吉了，還需要有path參數（editormd/lib/里面的文件），如果還不能運行，就對照前端渲染后傳遞的js、css、font等文件一個一個提取，構建對應的目錄；要是嫌麻煩，包里面的所有文件都不動（稍微有一點大）。

　　 3.配置項介紹

<script type="text/javascript">
    var testEditor;

    $(function() {

        $.get('test.md', function(md){
            testEditor = editormd("test-editormd", {
                width: "90%",
                height: 740,
　　　　　　　　　 # 依賴包的路徑，按自己的司機配置
                path : '../lib/',
　　　　　　　　　 # 主題顏色
                theme : "dark",
                previewTheme : "dark",
                editorTheme : "pastel-on-dark",
                markdown : md,
                codeFold : true,
                //syncScrolling : false,
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                //watch : false,                // 關閉實時預覽
                htmlDecode : "style,script,iframe|on*",            // 開啟 HTML 標簽解析，為了安全性，默認不開啟
                //toolbar  : false,             //關閉工具欄
                //previewCodeHighlight : false, // 關閉預覽 HTML 的代碼塊高亮，默認開啟
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 開啟科學公式TeX語言支持，默認關閉
                flowChart : true,             // 開啟流程圖支持，默認關閉
                sequenceDiagram : true,       // 開啟時序/序列圖支持，默認關閉,
                //dialogLockScreen : false,   // 設置彈出層對話框不鎖屏，全局通用，默認為true
                //dialogShowMask : false,     // 設置彈出層對話框顯示透明遮罩層，全局通用，默認為true
                //dialogDraggable : false,    // 設置彈出層對話框不可拖動，全局通用，默認為true
                //dialogMaskOpacity : 0.4,    // 設置透明遮罩層的透明度，全局通用，默認值為0.1
                //dialogMaskBgColor : "#000", // 設置透明遮罩層的背景顏色，全局通用，默認為#fff

　　　　　　　　　 # 下面上個配置項，是上傳圖片的配合項，點擊上傳圖片時，不用自己編寫代碼，就直接可以提交，但要將imageUploadURL設置為自己的上傳URL，而且要記得在后端圖片上傳的
　　　　　　　　　 # 獲取對象的鍵名：editormd-image-file，必須要使用這個鍵名獲取，否則獲取不到

                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "./php/upload.php",
                onload : function() {
                    console.log('onload', this);
                    //this.fullscreen();
                    //this.unwatch();
                    //this.watch().fullscreen();

                    //this.setMarkdown("#PHP");
                    //this.width("100%");
                    //this.height(480);
                    //this.resize("100%", 640);
                }
            });
        });
    });
</script>

　　 4、圖片上傳簡要說明

 

 

 只要配置好了，點擊上傳，選擇圖片文件，就會自動發送上傳請求給配置項中的imageUploadURL，不用自己手寫。