CKFinder 3 (не с CKEditor) Как я могу заставить пользователя в область редактирования изображения с определенными размерами при выборе или загрузке изображения

Question

CKFinder 3 (не с CKEditor) Как я могу заставить пользователя в область редактирования изображения с определенными размерами при выборе или загрузке изображения

Я просмотрел все вопросы с тегами 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>

4

ckfinder crop dimensions php

Решение

По вопросам рекламы [email protected]

Accepted Answer

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

0

Другие решения

Других решений пока нет …

Источник