javascript - 为编辑器保存块内容

Question

我有一个自定义的 WordPress 块，在编辑中我添加了一个 window.onload = function() 我正在使用 JavaScript 插件向图像添加多边形，在编辑器中它看起来很好并且可以在控制台中看到数据，但我无法存储这些数据如何保存。

edit: function( props ) {       

        function onChangeTitle(newTitle)
        {
            props.setAttributes({ title: newTitle.target.value })
        }
        function onChangeMediaURL(mediaURL)
        {
            props.setAttributes({ mediaURL: mediaURL.target.value });
        }
        return wp.element.createElement( 
            wp.element.Fragment, 
            null,
            wp.element.createElement(
                    InspectorControls,
                    null,
                    wp.element.createElement(PanelBody, {
                        title:'Panel Title',
                        initialOpen: true
                    },
                    wp.element.createElement
                    (
                            "p",
                            null,
                            "Add Title"
                     ),   
                    wp.element.createElement
                    (
                            "input", { type: "text", 
                            value: props.attributes.title, 
                            onChange: onChangeTitle }
                    ),
                    wp.element.createElement
                    (
                            "p",
                            "Add Image URL"
                     ),
                    wp.element.createElement
                    (
                            "input", { type: "text", 
                            value: props.attributes.mediaURL, 
                            onChange: onChangeMediaURL }
                    ),
                    )
                ),
            wp.element.createElement( 
                    wp.blockEditor.RichText.Content, {
                    tagName: 'h2',
                    className: props.className,
                    value: props.attributes.title,
                } 
            ),
wp.element.createElement('img', {id:"annoimg",src: props.attributes.mediaURL, style: {display:"block"}}),
      

            window.onload = function() {

                var formatter = function(annotation) {
                var contributors = [];

                      annotation.bodies.forEach(function(body) {
                        if (body.creator)
                          contributors.push(body.creator.id);
                      });

                      if (contributors.length > 1) {
                        return {
                          'data-users': contributors.join(', '),
                          'style': 'stroke-width:2; stroke: red'
                        }
                      }
                    }
                    var anno = Annotorious.init({
                      image: document.getElementById('annoimg'),
                      locale: 'auto',
                      formatter: formatter
                    });
                    anno.on('createAnnotation', function(annotation) {
                        console.log(annotation); //Data Needed
                        anno.saveSelected(annotation);
                      });
            },
  
        );
    },

我发送到控制台的注释是我需要的数据，我试图将它保存到像标题这样的属性图像但不工作，我将如何保存这些数据。

标签： javascriptwordpress-gutenberg