我正在构建一个自定义的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' ]
} ); }
如果您查看代码的最后几行，我会尝试调用copyright和watermark，但由于它们是在函数中定义的，因此显然存在问题。
我已从两者中删除了var，但没有成功，所以我们非常感谢任何支持。
答案 0 :(得分：3)
对话框未更新的问题是由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
} )
} );
}
在创建xmlhttp.onreadystatechange和copyright后，您应该在watermark处理程序中调用上述功能。
同时检查dialog guide in docs。
答案 1 :(得分：1)
在询问了CKFinder背后的人是否有这样的插件的先例之后，他们的反应是“不”，所以我很乐意分享我的代码。
作为一个起点，我在Github上使用了“自定义对话框”示例代码并从那里开始工作。
https://github.com/ckfinder/ckfinder-docs-samples/blob/master/CustomDialog/CustomDialog.js
我的最终结果（如下所示）会在选择图像后为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 );
}
};} );
同样，这不是我将作为官方插件维护的东西，但可以随意使用。