[英]CKFinder 3 (not with CKEditor) How can I force a user to the Image Edit area with specific dimensions when choose or upload an image
I have looked through all the Ckfinder tagged questions and nothing seems to help. 我查看了所有Ckfinder标记的问题,似乎没有任何帮助。 This is about the new CKFinder 3.
这是关于新的CKFinder 3。
We have a cms (PHP). 我们有一个cms(PHP)。 On regular content pages ckeditor and ckfinder work well together.
在常规内容页面上,ckeditor和ckfinder可以很好地协同工作。 I don't care what dimensions they use.
我不在乎他们使用什么尺寸。
We also give the user the ability to upload images for a slider on a separate page. 我们还为用户提供了在单独页面上上传滑块图像的功能。 These images should be a specific width and height.
这些图像应该是特定的宽度和高度。 This is where I'm stuck.
这就是我被困住的地方。 Once a user has uploaded or selected an image I would like to automatically bring the image up in the Image Edit Area with the crop dimensions set.
一旦用户上传或选择了图像,我想自动将图像放在图像编辑区域中并设置裁剪尺寸。
I'm using the popup example. 我正在使用弹出窗口示例。 I did notice that the code supplied only worked with the button outside the form tag.
我注意到提供的代码只能使用表单标记之外的按钮。 As soon as I move it in the form it doesn't output the file name.
只要我在表单中移动它,它就不会输出文件名。
<button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button>
<input id="ckfinder-input-1" type="text" name="file1" class="form-control">
<script type="text/javascript">
var button1 = document.getElementById( 'ckfinder-popup-1' );
button1.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-1' );
};
function selectFileWithCKFinder( elementId ) {
CKFinder.popup( {
chooseFiles: true,
width: 800,
height: 600,
dialogMinHeight: 400,
resourceType: 'Images',
plugins: ['StatusBarInfo'],
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var output = document.getElementById( elementId );
output.value = file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var output = document.getElementById( elementId );
output.value = evt.data.resizedUrl;
} );
}
} );
}
</script>
<script src="editor/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="editor/ckfinder/ckfinder.js"></script> <form action="" method="get"> <input id="ckfinder-input-1" name="resimyolu" type="text" style="width:60%"> <button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button> </form> <script> var button1 = document.getElementById( 'ckfinder-popup-1' ); var button2 = document.getElementById( 'ckfinder-popup-2' ); button1.onclick = function() { selectFileWithCKFinder( 'ckfinder-input-1' ); }; button2.onclick = function() { selectFileWithCKFinder( 'ckfinder-input-2' ); }; function selectFileWithCKFinder( elementId ) { CKFinder.popup( { chooseFiles: true, width: 800, height: 600, onInit: function( finder ) { finder.on( 'files:choose', function( evt ) { var file = evt.data.files.first(); var output = document.getElementById( elementId ); output.value = file.getUrl(); } ); finder.on( 'file:choose:resizedImage', function( evt ) { var output = document.getElementById( elementId ); output.value = evt.data.resizedUrl; } ); } } ); } </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.