TinyMCE里使用Leancloud上传文件示例

在TinyMCE HTML编辑器里增加一个文件上传功能。

<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script src="//cdn1.lncld.net/static/js/av-min-1.5.0.js"></script>
    <script>
        var APP_ID = 'XXX';
        var APP_KEY = 'YYY';
        AV.init({
            appId: APP_ID,
            appKey: APP_KEY
        });
    </script>

    <script>

        tinymce.init({
            selector: 'textarea',
            plugins: ['image'],
            file_browser_callback_types: 'image',
            file_picker_callback: function (callback, value, meta) {
                var fileUploadControl = document.getElementById("photoFileUpload");
                fileUploadControl.click();
                fileUploadControl.onchange = function () {
                    if (fileUploadControl.files.length > 0) {
                        var localFile = fileUploadControl.files[0];
                        var name = localFile.name;
                        var file = new AV.File(name, localFile);
                        file.save().then(function (file) {
                            // File uploaded
                            if (meta.filetype == 'image') {
                                callback(file.url(), {alt: '图片描述'});
                            }
                        }, function (error) {
                            alert("上传失败," + JSON.stringify(error));
                        });
                    } else {
                        alert('请选择文件上传')
                    }
                }
            }
        });


        // 获得编辑框里的HTML
        // console.log(tinyMCE.activeEditor.getContent({format: 'raw'}));

    </script>


</head>
<body>
<input type="file" id="photoFileUpload" style="display: none"/>
<textarea>文件上传</textarea>
</body>
</html>

Note

不大清楚TinyMCE具体是怎么调用picker callback的，所以还是难看把onchange放在callback里了。

TinyMCE里使用Leancloud上传文件示例

Note

fxp

引用和评论

那一半浪费的广告费，找到了！