使Javascript变量在函数外部可用

我正在构建一个定制的CKFinder插件，用于内部CMS，但在“未定义”变量方面遇到了一些问题

我所做的是从数据库中提取上传图像的版权信息——详细信息从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' ]
} ); }

函数文件共享（数据）{
var fileName=data.file.getUrl（）；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var json=json.parse（this.responseText）；
var版权=“”；
var水印=“”；
for（var i=0；i”+
'' +
“用水印保护图像？
”+
“启用水印？”，
按钮：[“确定”、“取消”]
} ); }

如果你看一下代码的最后几行，我试图调用

版权

和

水印

，但是很明显，由于它们是在一个函数中定义的，所以我遇到了问题

---

我已将

var

从两者中删除，但没有成功，因此非常感谢任何支持。

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

正确的方法是使用

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
        } )
    } );
}

函数makeDialog（版权、水印）{
finder.request（'dialog'{
名称：'CopyrightDialog'，
标题：“版权信息”，
模板：“键入版权所有者的名称：
”+
'' +
“用水印保护图像？
”+
“启用水印？”，
按钮：[“确定”、“取消”]，
templateModel:新主干。型号（{
版权所有：版权所有，
水印：水印
} )
} );
}

创建

版权

和

水印

后，应在

xmlhttp.onreadystatechange

处理程序中调用上述函数

---

另请检查。

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

正确的方法是使用

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
        } )
    } );
}

函数makeDialog（版权、水印）{
finder.request（'dialog'{
名称：'CopyrightDialog'，
标题：“版权信息”，
模板：“键入版权所有者的名称：
”+
'' +
“用水印保护图像？
”+
“启用水印？”，
按钮：[“确定”、“取消”]，
templateModel:新主干。型号（{
版权所有：版权所有，
水印：水印
} )
} );
}

创建

版权

和

水印

后，应在

xmlhttp.onreadystatechange

处理程序中调用上述函数

---

另外，请检查。

当询问CKFinder背后的人是否有类似这样的插件的先例时，他们的回答是“否”，因此我很高兴与大家分享我的代码

作为一个起点，我在Github上浏览了他们的“自定义对话框”示例代码，并从中开始工作

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

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

下面是我使用的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 );
        }
    };} );

CKFinder.define（['jquery'，'backbone']，函数（jquery，backbone）{
"严格使用",；
返回{
初始化：函数（查找器）{
//使用白色图标作为默认设置
var icon='copyright white.svg'；
//如果存在.ui alt icon类，请使用黑色图标作为替代
if（jQuery（'body'）.hasClass（'ui-alt-icon'））{
icon='copyright black.svg'；
}
this.addCss（'.ui图标共享：在{background image:url（'+this.path+'icon/'+icon+'）；}）之后）；
//向“主”工具栏添加一个按钮。
打开（'toolbar:reset:Main:file'，函数（evt）{
var file=evt.data.file；
evt.data.toolbar.push（{
名称：'版权'，
标签：“版权”，
优先：105，
图标：“共享”，
行动：功能（）{
请求（'imageCopyright'，{file:file}）；
}
} );
} );
//查找选定图像的各个属性
功能图像版权（数据）{
//检索图像的URL（数据在finder.request中传递）
var path=data.file.getUrl（）；
//定义信用和水印
var信用=“”；
var水印=“”；
//使用AJAX调用检索版权信息
var xmlhttp=new XMLHttpRequest（）；