TinyMCE 업로드 이미지 백엔드 처리 쓰기

쓰기 방법은 두 가지가 있는데, 하나는 그림을 베이스64로 변환한 후에 로컬 해석을 하는 것이다. 이렇게 하면 그림을 HTML 파일에 직접 저장할 수 있다. 만약 그림이 너무 많으면 HTML 파일이 너무 크거나 베이스64로 변환된 그림을 서버에 업로드한 후 서버에 다시 원래 jpg나 png 형식으로 변환할 수 있다.

또 다른 방법은 POST를 통해 사진을 서버에 전송한 후 서버가 다시 사진 주소로 돌아오면 우리가 다시 호출하는 것이다

첫 번째 쓰기 방법은 다음과 같습니다.

    
    
    
    
        tinymce.init({
            selector: '#mytextarea',
            language: 'zh_CN',
            plugins: "image",
            toolbar: "image",
            images_dataimg_filter: function (img) {
                // 
                return img.hasAttribute('internal-blob');
            },
            paste_data_images: true,
            images_upload_handler: function (blobInfo, success, failure) {
                // base64 
                success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
            }
        });
    


    
</code></pre> 
  <h3> base64 HTML ， ：</h3> 
  <pre><code>//NodeJS ：
app.post('/upload', function (req, res) {
    // POST base64
    var imgData = req.body.imgData;
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");     // data:URL
    var dataBuffer = new Buffer(base64Data, 'base64');       
    fs.writeFile("image.png", dataBuffer, function (err) {
        if (err) {
            res.send(err);
        } else {
            res.send(" ！");
        }
    });
});</code></pre> 
  <h2> ， </h2> 
  <pre><code>


    <meta charset="utf-8"/>
    <title>TinyMCE </title>
    <script src="tinymce.min.js"/>
    <script type="text/javascript">
        tinymce.init({
            selector: '#mytextarea',
            language: 'zh_CN',
            plugins: "image",
            toolbar: "image",
            images_upload_base_path: 'dir', // 
            images_upload_url: '/upload',   // 
        });
    </script>


    <textarea id="mytextarea"/>

</code></pre> 
  <h3> ：</h3> 
  <pre><code>var express = require("express");
var app = express();
var server = require("http").createServer(app);
var fs = require('fs');
var path = require('path');
var formidable = require('formidable');

app.use(express.static("public"));
var port = process.env.PORT || 3000;
server.listen(port, function () { console.log("connection") });

app.post('/upload', function (req, res, next) {
    var form = new formidable.IncomingForm();
    form.uploadDir = "./public/dir";
    form.maxFieldsSize = 4 * 1024 * 1024;  // 4M    
    form.keepExtensions = true;        //   
    form.parse(req, function (err, fields, file) {
        res.send({
            location: path.basename(file.file.path) // 
        });
    });
});</code></pre> 
  <p> dir </p> 
 </div> 
</div>
                            </div>
                        </div>