php – CKFinder 3(不适用于CKEditor)在选择或上传图像时,如何强

发布时间：2020-12-13 22:26:45 所属栏目：PHP教程来源：网络整理

导读：我查看了所有Ckfinder标记的问题,似乎没有任何帮助.这是关于新的CKFinder 3. 我们有一个cms(PHP).在常规内容页面上,ckeditor和ckfinder可以很好地协同工作.我不在乎他们使用什么尺寸. 我们还为用户提供了在单独页面上上传滑块图像的功能.这些图像应该是特定

我查看了所有Ckfinder标记的问题,似乎没有任何帮助.这是关于新的CKFinder 3.

我们有一个cms(PHP).在常规内容页面上,ckeditor和ckfinder可以很好地协同工作.我不在乎他们使用什么尺寸.

我们还为用户提供了在单独页面上上传滑块图像的功能.这些图像应该是特定的宽度和高度.这就是我被困住的地方.一旦用户上传或选择了图像,我想自动将图像放在图像编辑区域中并设置裁剪尺寸.

我正在使用弹出窗口示例.我注意到提供的代码只能使用表单标记之外的按钮.只要我在表单中移动它,它就不会输出文件名.

<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,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!