Solve editor MD uploads pictures and cannot get the picture address

Editor.md The picture address cannot be obtained by uploading the picture ,Editor.md Image upload iframe Cross domain situation exists , It is not easy to use after several debugging , Finally, take the alternative , There is no cross domain situation yet .

Support in recent projects markdown Editor , At present, there is no one who doesn't know about technology Markdown Of , Because it's so powerful , You only need to know a few simple operations , You can edit very beautiful articles , Include TeX Scientific formula （ be based on KaTeX）、 flow chart Flowchart and Sequence diagram , No longer let you waste time on format adjustment .

background

Is in PC End use , Directly introducing JQuery and Markdown.md Plug in for use

editor.md catalogue

Here we need to explain editor.md Catalog , The version introduced in this article is v1.5.0, Download on the home page , decompression editor.md-master.zip file , You can see the directory structure as shown in the figure below ：

The red box in the figure shows the files and directories we want to reference to the project .

• css You can select... From the directory editormd.min.css Put it in the corresponding item css Directory ;
• js Can choose editormd.min.js Placed in the corresponding item js Directory , It should be noted that at the same time jQuery, Use here jquery.min.js;
• examples Folders are part of the core functions demo, Use the corresponding components or functions in the process of use to open the reference ;
• fonts Need to use fonts , Items can be imported together ;
• images Are some pictures of loading classes ;
• lib yes editor.md Relying on a third party js resources , Such as flow chart js resources ;
• plugins It is mainly the operation function plug-in on the editor , For example, image upload and so on , You can choose to use to load ;

Import to web The contents of the project are as follows ：

Files to be imported in the page , Add other plug-ins as needed

<!--  Add... To the page css -->
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/editormd.css" />  
<!--  Add... To the page div -->
<div id="editormd">
   <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<!--  Add... To the page js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/[email protected]"></script>
<script type="text/javascript" src="js/editormd.min.js"></script>
<script type="text/javascript" src="js/[email protected]"></script>
<script>
var testEditor = editormd("editormd", {
        width: "90%",
        height: 'calc(100vh - 85px)',
        path : './lib/',
        // theme : "dark",
        // previewTheme : "dark",
        // editorTheme : "pastel-on-dark",
        // markdown : content?content:'![](https://img1.446677.xyz/2021/07/04/81903e6c0536ef3a87783a6e7afc3093.jpg) ![](https://img1.446677.xyz/2021/07/08/889db52a8e84a58e9bf63970f3a01e92.jpg)',
        markdown : content,
        codeFold : true,
        //syncScrolling : false,
        saveHTMLToTextarea : true,    //  preservation  HTML  To  Textarea
        searchReplace : true,
        //watch : false,                //  Turn off live preview 
        htmlDecode : "style,script,iframe|on*",            //  Turn on  HTML  Label parsing , For safety reasons , Not on by default     
        //toolbar  : false,             // Close the toolbar 
        //previewCodeHighlight : false, //  Close the preview  HTML  Block of code highlighted , Default on 
        emoji : true,
        taskList : true,
        tocm            : true,         // Using [TOCM]
        tex : true,                   //  Unlock the scientific formula TeX Language support , Off by default 
        flowChart : true,             //  Enable flow chart support , Off by default 
        sequenceDiagram : true,       //  Open the timing / Sequence diagram support , Off by default ,
        //dialogLockScreen : false,   //  Set the pop-up layer dialog box to leave the screen unlocked , The global general , The default is true
        //dialogShowMask : false,     //  Set the pop-up layer dialog box to display the transparent mask layer , The global general , The default is true
        //dialogDraggable : false,    //  The setup pop-up layer dialog box cannot be dragged , The global general , The default is true
        //dialogMaskOpacity : 0.4,    //  Sets the transparency of the transparent mask layer , The global general , The default value is 0.1
        //dialogMaskBgColor : "#000", //  Sets the background color of the transparent mask layer , The global general , The default is #fff
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "https://api.xxxx.com/api/v1/editorMdImgUpload",
        onload : function() {
            /* After uploading pictures successfully, you can do your own processing */
            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>
 Copy code 

id by editormd, hinder js The code needs to use . And this is also used as a prefix in the source code .

adopt form When a form is submitted, the background can pass content-editormd-markdown-doc Get the corresponding markdown Document content . such as Java Pass through request.getParameter(“content-editormd-markdown-doc”) Be careful ： Note here , Whatever you need html The content of the format is still markdown Content of format , You only need to write one textarea. There is a big hole here . Many other tutorials say you need two textarea, Then it will lead to the latter textarea The data obtained in the background is an array , Instead of just HTML Content .

Edit configuration in the editor ： path The path needs to be specified to the corresponding... In the project lib The path of . If the settings are not correct markdown It can't be rendered .

saveHTMLToTextarea Set to true Express , Turn into html The content in the format is also submitted to the background .

good , Here you can see the page effect . as follows ：