LINUX.ORG.RU

Как проверить фокус для <div contenteditable=«true»>?

 , , ,


0

2

DIV в роли визуального редактора. На него я тяну картинку с десктопа. Вставка происходит не куда я попал картинкой, а туда где стояла каретка. Вставка идет не дефолтным действием браузера, а через exec('код_картинки_как_мне_надо').

<div ondrop="su_upload_img(event)" contenteditable="true" style="overflow:hidden">Контент</div>
И функция под это дело
function su_upload_img(event){
	event.stopPropagation() //редирект на картинку не надо
	event.preventDefault() //дефолтные действия браузера не надо
	var obj=event.dataTransfer.files[0] //перетянутый объект в переменную

//пока проверяю фокус вставкой картинки через exec, которая не сработала бы без фокуса
//но вот в чем отстой: картинка вставляется до аплоада и в Chrome я получаю отвалившуюся картинку
//Opera и FireFox пока справляются (на локалке)
	if(!document.execCommand('InsertHTML',false,'<img src="http://'+document.domain+'/images/'+obj.name+'">')){
			alert('Редактор вне фокуса!') //ругаемся, что редактор не в фокусе
			return false //и на выход
		}
//надо как-то иначе проверить фокус на DIV'е редактора

		//а если вставилось, то готовим на отправку
		var up=new FormData()
		up.append('type','img')
		up.append('file',obj)
	}
	//отправка
	$.ajax({
		type:'POST', //метод пост
		name:'uploadfile',
		url:'/script-upload.php', //кто на сервере принимает
		data:up, //данные
		processData:false, //мониторинг аплоада
		contentType:false, //пока х.з. и false
			//успех
			success:function(data){
			console.log(data)
			alert('успех')
			},
			//ошибка
			error:function(data){
			console.log(data)
			alert('провал')
			}
	})
}

Ну и php-приемник на сервере (файл script-upload.php)

<?php
move_uploaded_file($_FILES['file']['tmp_name'], '/images/'.basename($_FILES['file']['name']));
?>


а если вначале вставить туда пустой div? если не вставится - ошибка, вставится - считаем за ОК и удаляем его по id/class

stevejobs ★★★★☆ ()
Ответ на: комментарий от stevejobs

После вставки по document.execCommand() фокус снимается. Второй раз экзекнуть не получается.

Разве что так: Воткнуть времянку <!--future-img--> черех document.execCommand(), а потом взять .html() из div'а, заменить коммент кодом картинки и .html()'нуть отбратно... Работает, но браузеру это определенно не нравится (на секунду тупняк наступает если текста много).

k0ttee ()
Ответ на: комментарий от stevejobs

Условие всегда выполняется

if (!$('#editor').is(':focus')) {
    alert('!отрицание фокуса')
}

k0ttee ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.