使 Javascript 变量在函数外部可用

Question

我正在构建一个用于内部 CMS 的自定义 CKFinder 插件，但在 'undefined' 变量方面遇到了一些问题。

我正在做的是从数据库中提取上传图片的版权信息——其详细信息是从 JSON 文件中检索的。我已经设法做到了，但我的问题似乎与调用函数内的变量有关。

这是我的代码：

function fileShare( data ) {

var fileName = data.file.getUrl();

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var json = JSON.parse(this.responseText);

        var copyright = '';
        var watermark = '';

        for ( var i = 0; i < json.image.length; i++) {
            if(json.image[i].image_path == fileName) {

                copyright += json.image[i].copyright;

                if(json.image[i].watermark == 1) {
                    watermark += ' checked';
                }
            }
        }
        return false;
    }
};

xmlhttp.open("GET", "copyright.json", true);
xmlhttp.send();

// Dialog Box Content
finder.request( 'dialog', {
    name: 'CopyrightDialog',
    title: 'Copyright Information',
    template: '<p>Type the name of the copyright holder:</p>' +
    '<input type="text" name="copyright" value="' + copyright + '" placeholder="Image Credit...">' +
    '<p>Protect the image with a watermark?</p>' +
    '<label><input type="checkbox" name="watermark" value="watermark"' + watermark + '>Enable Watermark?</label>',
    buttons: [ 'ok', 'cancel' ]
} ); }

如果您查看代码的最后几行，我会尝试调用 copyright 和 watermark，但由于它们是在函数中定义的，因此显然存在问题。

我已经从两者中删除了 var，但没有成功，因此非常感谢您的支持。

Answer 1

对话框不更新的问题是由于CKFinder的模板缓存机制。第一次使用模板会缓存它。

pass data to a dialog's template 的正确方法是 templateModel 属性。

function makeDialog( copyright, watermark ) {
    finder.request( 'dialog', {
        name: 'CopyrightDialog',
        title: 'Copyright Information',
        template: '<p>Type the name of the copyright holder:</p>' +
        '<input type="text" name="copyright" value="{{= it.copyright }}" placeholder="Image Credit...">' +
        '<p>Protect the image with a watermark?</p>' +
        '<label><input type="checkbox" name="watermark" value="watermark" {{= it.watermark }}>Enable Watermark?</label>',
        buttons: [ 'ok', 'cancel' ],
        templateModel: new Backbone.Model( {
            copyright: copyright,
            watermark: watermark
        } )
    } );
}

在创建 copyright 和 watermark 之后，您应该在 xmlhttp.onreadystatechange 处理程序中调用上述函数。

同时检查 dialog guide in docs。

Answer 2

在询问 CKFinder 背后的人是否有这样的插件的先例后，他们的回答是 'no' 所以我很乐意分享我的代码。

作为起点，我深入研究了他们在 Github 上的 'Custom Dialog' 示例代码并从那里开始工作。

https://github.com/ckfinder/ckfinder-docs-samples/blob/master/CustomDialog/CustomDialog.js

我的最终结果发布在下面，一旦选择了图像，就会在 CKFinder 的主工具栏上添加一个额外的按钮。单击后，它会从 JSON 文件（由数据库生成）中收集信息，并将其显示在对话框中。

从这里，我可以编辑信息 - 在我的例子中，版权和水印 - 并通过 AJAX 调用 PHP 脚本直接保存到数据库。

这是我用过的 Javascript 代码。同样，我是 JS 的新手，所以如果有人能够提供任何改进，请随时这样做。

CKFinder.define( [ 'jquery', 'backbone' ], function( jQuery, Backbone ) {
    'use strict';

    return {
        init: function( finder ) {

            // Use the white icon as default
            var icon = 'copyright-white.svg';

            // If the .ui-alt-icon class is present, use the black icon as an alternative
            if ( jQuery( 'body' ).hasClass( 'ui-alt-icon' ) ) {
                icon = 'copyright-black.svg';
            }
            this.addCss( '.ui-icon-share:after { background-image: url(' + this.path + 'icon/' + icon + '); }' );

            // Add a button to the "Main" toolbar.
            finder.on( 'toolbar:reset:Main:file', function( evt ) {
                var file = evt.data.file;
                evt.data.toolbar.push( {
                    name: 'Copyright',
                    label: 'Copyright',
                    priority: 105,
                    icon: 'share',
                    action: function() {
                        finder.request( 'imageCopyright', { file: file } );
                    }
                } );
            } );

            // Find the individual properties of the selected image
            function imageCopyright( data ) {

                // Retrieve the URL of the image (data was passed in finder.request)
                var path = data.file.getUrl();

                // Define credit and watermark
                var credit    = '';
                var watermark = '';

                // Use an AJAX call to retrieve the copyright information
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {

                    // If the request is complete and OK, pull the data for the selected image
                    if (this.readyState == 4 && this.status == 200) {
                        var json = JSON.parse(this.responseText);
                        for ( var i = 0; i < json.img.length; i++) {
                            if(json.img[i].path == path) {

                                // Overwrite the value of credit
                                credit += json.img[i].credit;

                                // If a watermark is required, overwrite the value of watermark
                                if(json.img[i].watermark == 1) {
                                    watermark += ' checked';
                                }
                            }
                        }

                        // Dialog Box Content
                        function makeDialog( credit, path, watermark ) {
                            finder.request( 'dialog', {
                                name: 'CopyrightDialog',
                                title: 'Copyright Information',
                                template: '<p>Type the name of the copyright holder:</p>' +
                                '<input type="text" name="credit" value="{{= it.credit }}" placeholder="Image Credit...">' +
                                '<p>Protect the image with a watermark?</p>' +
                                '<label><input type="checkbox" name="watermark" value="watermark"{{= it.watermark }}>Enable Watermark?</label>' +
                                '<input type="hidden" name="path" value="{{= it.path }}">',
                                buttons: [ 'ok', 'cancel' ],
                                templateModel: new Backbone.Model( {
                                    credit   : credit,
                                    path     : path,
                                    watermark: watermark
                                } )
                            } );
                        }
                        makeDialog( credit, path, watermark );
                    }
                };

                // JSON file in which copyright data is stored
                xmlhttp.open("GET", "path/to/data.json", true);
                xmlhttp.send();

                // Action to take upon 'ok' click
                finder.on( 'dialog:CopyrightDialog:ok', function( evt ) {

                    // Define the value of the copyright credit
                    var credit    = evt.data.view.$el.find( '[name="credit"]' ).val();

                    // Define the value of the image path
                    var path      = evt.data.view.$el.find( '[name="path"]' ).val();

                    // Define whether a watermark has been requested
                    var watermark = evt.data.view.$el.find( '[name="watermark"]' ).is( ':checked' );

                    // Destroy the dialog.
                    finder.request( 'dialog:destroy' );

                    // Determine whether a watermark was requested
                    if ( watermark === true ) {
                        watermark = 1;
                    } else {
                        watermark = 0;
                    }

                    // Send the copyright information to the database via an AJAX request
                    if (window.XMLHttpRequest) {
                        var xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.open("POST", "path/to/database.php", true);
                    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xmlhttp.send("path=" + path + "&watermark=" + watermark + "&credit=" + credit);
                    return false;
                } );
            }

            // Update the handler
            finder.setHandler( 'imageCopyright', imageCopyright, this );
        }
    };} );

同样，这不是我将作为官方插件维护的东西，但您可以随意使用。

使 Javascript 变量在函数外部可用

Make Javascript Variable Available Outside Function

javascript

ckfinder