TinyMCE里使用Leancloud上传文件示例

最新推荐文章于 2023-10-20 15:58:52 发布

weixin_34050519

最新推荐文章于 2023-10-20 15:58:52 发布

阅读量129

点赞数

文章标签： json

原文链接：https://segmentfault.com/a/1190000007210757

版权

在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里了。

weixin_34050519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TinyMCE里使用Leancloud上传文件示例

在TinyMCE HTML编辑器里增加一个文件上传功能。<!DOCTYPE html><html><head> <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <script src...
复制链接

扫一扫

TinyMCE里使用Leancloud上传文件示例

Note

“相关推荐”对你有帮助么？