TinyMCE editor, image upload extensions (base64 way), asp.net mvc5

Editor upload pictures are generally the first uploaded to the server, if the user cancels or forget to submit the form to produce a chart in the waste of space inside, over time to produce a lot of useless space of the picture, now try before submitting first with base64, submitted, in background processing editor content <img> tag in src base64 images (saved as an image file and returns the relative address string to replace the original base64 encoded pictures, the new test in TinyMCE editor (Version: 5.0.12 (2019-07-18)) by. browser chrome

Code:

           tinymce.init({
                selector: 'textarea#Content',
                plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help paste emoticons autosave ',
                toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                         styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                         table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen',
                menubar: false,
                height: 500,
                language: 'zh_CN',
                images_upload_handler: function (blobInfo, success, failure) {
                    var reader = new FileReader();
                    reader.readAsDataURL(blobInfo.blob());
                    reader.onload = function () {
                        success(this.result);
                    }
                }
            });

　　plugins toolbar toolbar plug-ins and add their own content deletion, mainly images_upload_handler here, I do not know TinyMCE5.x very powerful version, the browser itself or function, the editor automatically base64 encoding blob: http: // protocol conversion between. You see on the non-base64-encoded source

 

Advanced Usage class background use Regex Replace method: This method has a delegate parameter, this parameter can be passed with a method, which mainly operate in this method (base64 to save space and returns the address of the picture of a quoted string)

Background asp.net (c #) Code:

        SaveBase64ToImageAndOutUrl static String public (the htmlContent String) 
        { 
            // definition of the regular expression to match the tag img src attribute codes base64   
            string strImg = @ "data \: image / (jpeg | png | gif | jpg | bmp); base64 \ ,: * (([A- Za-z0-9 + /] {4}?):? [A-Za-z0-9 + /] {2} == | [A-Za-z0-9 + / ?] = {}. 3) "; 

            String Content = the Regex.Replace (the htmlContent, strImg, new new MatchEvaluator (CorrectString), RegexOptions.Compiled | RegexOptions.IgnoreCase); 
            return Content; 
        } 

        Private static String CorrectString (match match) 
        { 
            String IMGSRC match.Value =; 
            IF (imgSrc.Substring (0, 10) =! "Data: Image") 
                return IMGSRC;

            double size = imgSrc.Split(',')[1].TrimEnd('=').Length * .75;
                 
            if (size > Config.SiteConfig.ImageUploadSize * 1048576)
                    throw new Exception("内容中有些图片过大！");


            Response rsp = Upload.Base64ToImageAndSave(imgSrc, "/Upload");
            if (rsp.Code == 0)
                throw new Exception(rsp.Message);

            return rsp.Data;
        }

　　

The above code is related to the class Respones

    the Response class public 
    { 
        /// <Summary> 
        /// failure return code 0-, 1- success. 
        /// </ Summary> 
        public int Code {GET; SET;} 

        /// <Summary> 
        /// Returns message 
        /// </ Summary> 
        public String the Message {GET; SET;} 

        /// <Summary> 
        /// returns data 
        /// </ Summary> 
        public Dynamic the data {GET; SET;} 

        public the Response () 
        { 
            Code = 0; 
        } 
    }

　　

Base64 method to save the image above, please refer to the blog garden other heroes written many, many, I will not Tieshanglai

 

Drawback is that the client will be very slow when viewing the source code, the other to set up in web.config when submitting data multi-picture or picture big time, or not submitted. Here set 6MB, can set the size of the

  <System.Web> 
    <-! form submission process total length (the maxRequestLength) is 6MB -> 
    <the httpRuntime the maxRequestLength = "6291456" /> 
  </system.web>