markdown(editor.md)編輯器-圖片上傳

點擊下載案例代碼

editor.md網站地址http://pandao.github.io/editor.md/

首先需要引入對應的css跟js文件,jquery一定要在前面引入,大家可以去官網下載editor.md,也可以點擊我上面的案例代碼下載

圖片上傳分爲 同域上傳 跟 跨域上傳,
1,同域上傳簡單理解就是編輯器頁面跟圖片上傳的請求後臺是同一域名內。
2,跨域上傳則相反,比如你編輯器頁面請求是aaa.com/add,而圖片上傳的請求路徑是 bbb.com/img/upload,(aaa.com跟bbb.com分別是兩個域名)

後臺代碼我就不寫了,大家可以去看我寫的文件上傳案例

圖片同域上傳:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>同域圖片上傳示例Demo</title>

        <!--引入樣式文件-->
        <link rel="stylesheet" href="editor.md-master/examples/css/style.css" />
        <link rel="stylesheet" href="editor.md-master/css/editormd.css" />
        <!--引入js文件-->
        <script src="editor.md-master/examples/js/jquery.min.js"></script>
        <script src="editor.md-master/editormd.js"></script>

    </head>

   <body>
            <header>
                <h1>圖片上傳示例</h1>
                <p>Image upload example</p>
            </header>

            <!--編輯器開始-->
            <div id="test-editormd">
                <textarea style="display:none;">初始化數據</textarea>
            </div>  
            <!--編輯器結束-->

        <!--js開始-->
        <script type="text/javascript">
            $(function() {       

                var testEditor = editormd("test-editormd", {
                    width: "90%",//設置寬度
                    height: 640,//設置高度
                    markdown : "",
                    path : 'editor.md-master/lib/',//設置lib目錄
                    //dialogLockScreen : false,   // 設置彈出層對話框不鎖屏,全局通用,默認爲 true
                    //dialogShowMask : false,     // 設置彈出層對話框顯示透明遮罩層,全局通用,默認爲 true
                    //dialogDraggable : false,    // 設置彈出層對話框不可拖動,全局通用,默認爲 true
                    //dialogMaskOpacity : 0.4,    // 設置透明遮罩層的透明度,全局通用,默認值爲 0.1
                    //dialogMaskBgColor : "#000", // 設置透明遮罩層的背景顏色,全局通用,默認爲 #fff
                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "/file/upload.do?test=dfdf",//上傳的請求,需要返回如下格式:

                    /*
                     上傳的後臺只需要返回一個 JSON 數據,結構如下:
                     {
                        success : 0 | 1,           // 0 表示上傳失敗,1 表示上傳成功
                        message : "提示的信息,上傳成功或上傳失敗及錯誤信息等。",
                        url     : "圖片地址"        // 上傳成功時才返回
                     }
                     */
                });
            });
        </script>
        <!--js結束-->
    </body>
</html>

圖片跨域上傳:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>圖片跨域上傳示例Demo</title>

        <!--引入樣式文件-->
        <link rel="stylesheet" href="editor.md-master/examples/css/style.css" />
        <link rel="stylesheet" href="editor.md-master/css/editormd.css" />
        <!--引入js文件-->
        <script src="editor.md-master/examples/js/jquery.min.js"></script>
        <script src="editor.md-master/editormd.js"></script>

    </head>

    <body>
            <header>
                <h1>圖片跨域上傳示例</h1>
                <p>Image cross-domain upload example.</p>
            </header>

            <!--編輯器開始-->
            <div id="test-editormd">
                <textarea style="display:none;">初始化數據</textarea>
            </div>   
            <!--編輯器結束-->

        <script type="text/javascript">
            $(function() {
                var testEditor = editormd("test-editormd", {
                    width             : "90%",//設置寬度
                    height            : 640,//設置高度
                    markdown          : "",
                    path              : 'editor.md-master/lib/',//指定lib目錄
                    imageUpload       : true,
                    imageFormats      : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL    : "http://www.aaa.com/upload?name=aa",//上傳請求的地址
                    crossDomainUpload : true,
                    uploadCallbackURL : "http://localhost/add"//上傳成功後跳轉的地址

                    /*
                     跨域時,上傳的圖片服務器後臺只需要返回一個跳轉 URL 
                     並跳轉到原頁面同域下的 callback 頁面,結構如下:
                     {
                        success   : 0 | 1,   // 0 表示上傳失敗,1 表示上傳成功
                        message   : "提示的信息,上傳成功或上傳失敗及錯誤信息等。",
                        dialog_id : $_GET['dialog_id'],
                        url       : "遠程圖片地址"    //上傳成功時才返回,就是圖片的訪問地址
                     }
                     */
                });
            });
        </script>

    </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章