成功上传后,自定义块添加新元素

时间:2019-05-22 09:41:08

标签: wordpress

我为post wordpress创建了一个自定义块。
上传成功后,我无法显示和保存元素iframe。

我要在上传完成后添加iframe代码,然后显示并保存在帖子中。
现在,上传完成后,我无法添加iframe代码

registerBlockType:

title: i18n.__('Upload'), // The title of our block.
description: i18n.__('A custom block for upload.'), // The description of our block.
icon: 'upload', // Dashicon icon for our block. Custom icons can be added using inline SVGs.
category: 'common', // The category of the block.
attributes: {
mediaID: {
       type: 'number'
},
mediaURL: {
       type: 'string',
       source: 'attribute',
       selector: 'iframe',
       attribute: 'src'
},

编辑功能:

edit: function (props) {
            var attributes = props.attributes;

            var uploadVideo = function (media) {
                var form_data = new FormData();
                form_data.append('file', media.target.files[0]);
                $.ajax({
                    type: "POST",
                    contentType: false,
                    processData: false,
                    url: myScript.pluginsUrl + '/file.php',
                    data: form_data,
                    success: function (result) {
                        var data = JSON.parse(result);
                        return props.setAttributes({
                            mediaURL: data.url,
                            mediaID: data.id
                        });
                    }
                });
            };
            return [
                el('div', {className: props.className},
                    el('div', {className: 'form-input'},
                        el('input', {
                            onChange: uploadVideo,
                            type: 'file',
                            render: function () {
                                return el('iframe', {src: attributes.mediaURL})
                            }
                        })
                    ),
                )
            ]
        },

保存功能:

save: function (props) {
            var attributes = props.attributes;

            return [
                el('div', {className: props.className},
                    el('iframe', {
                            src: attributes.mediaURL
                        },
                    )
                )
            ]
        }

0 个答案:

没有答案