Drag drop на WYSIWYG редатор и вставка в него текста. Как???

Ar2r · №1

Друзья, мне нужен помощь коллективного разума.

Хочу реализовать в своем плагине отлов перетаскивания файла на визуальный редактор. План сейчас умеет отлавливать перетаскивание на textarea. А визуальный редактор никак не поддается.

Возьмем за основу редакторы:
# TinyMCE
# FCKeditor

Есть картинка на рабочем столе с именем 1.jpg.
Есть визуальный редактор в яндекс.блогах или в ЖЖ.

Когда редактор переключен в визуальный режим, то перетаскивание картинки влечет за собой добавление кода:

Выделить код

Код:

<img src="file://...../1.jpg">

И евент drop какак не отлавливается? Куда копать? 500 рублей на мобилу (Любой оператор, который можно пополнить через вебмани) тому, кто найдет решение.

любой WYSIWYG представляет из себя frame... значит нужно ловить event и как-то проверить, что event.target находится внутри нужного фрейма с именем подходящим под один из двух редакторов (у них стандартно назыаются имена фреймов и текстарий)

Отредактировано Ar2r (12-08-2010 11:58:16)

Shutnik · №2

а в чём проблема? ставите ondragenter/ondragover/ondrop обработчики на нужную область и перехватываете

Ar2r · №3

Shutnik пишет

а в чём проблема? ставите ondragenter/ondragover/ondrop обработчики на нужную область и перехватываете

Сложность в том, что WYSIWYG редактор это НЕ textarea.
Это Iframe котоырй содержит <body>, <p>, <img> и другие теги. Сейчас у меня глобальный евент на уровне window повешен. поэтому нужно определить где был дропнут файл. Допустим человек его перетащил на параграф внутри визуального редактора. Значит нужно как-то проверить, что этот параграф внутри визуального редактора, еще нужно определить объект body в который добавлять новый текст со ссылкой на картинку.
Обходить рекурсивно все элементы не хочу. Ибо изначально визуальный редактор может быть выключен. А по таймеру обходить все теги рекурсивно - не хорошо.

Shutnik · №4

всё равно не вижу проблемы.
«параграф внутри визуального редактора» — это кнопка создания параграфа? у неё нет id?

Выделить код

Код:

function drop(event)
{
    ...
}

document.getElementById(<кнопка>).addEventListener("drop", drop, false);

Ar2r · №5

Shutnik пишет

всё равно не вижу проблемы.
«параграф внутри визуального редактора» — это кнопка создания параграфа? у неё нет id?

Параграф (<p>Пример текста</p>) это не кнопка. Это вообще любой текст, который написан в визуальном редакторе. При этом еще очень возможен такой вариант, что параграфов может и не быть вообще.

Вот пример визуального редактора http://tinymce.moxiecode.com/examples/full.php

Сомневаюсь, что это будет очень правильным если я поставлю таймер 1 секунду на поиск Iframe-ов на странице (getelementbytagname('iframe'), потом проверка id по маске )...

Shutnik · №6

как-то так?

Выделить код

Код:

<div id="droper" style="background:red;text-align:center;width:200px;height:200px;margin:100px">
<p>DROP HERE</p>
<p>Paragraph 0</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>

<script>
function stop(event)
{
    event.stopPropagation();
    event.preventDefault();

    return true;
}

function drop(event)
{
    if(event.originalTarget.nodeName == "P") // FIXME: проверить вверх по нодам
        event.originalTarget.innerHTML = event.dataTransfer.files[0].name;

    return stop(event);
}

document.body.addEventListener("drop", stop, false);
document.body.addEventListener("dragenter", stop, false);
document.body.addEventListener("dragover", stop, false);

document.getElementById("droper").addEventListener("drop", drop, false);
</script>

Ar2r · №7

А не подскажите, как через event.target / event.originalTarget обойти все элементы родителей до тега Body? event.originalTarget.originalTarget.originalTarget.originalTarget? :-)

Shutnik · №8

наверено, как-то так (работоспособность не проверял):

Выделить код

Код:

var target = event.originalTarget,
    parent = document.body; // конечный элемент

while(target && target != parent)
{
    if(target.nodeName == "P")
    {
        parent = null;
        break;
    }
    target = target.parentNode || false;
}

if(parent == null)
    target.innerHTML = event.dataTransfer.files[0].name;

Ar2r · №9

Shutnik, благодарю
PS: Номер мобилы можно в личку кинуть Все равно никто больше ничего не пишет Дома попробую покавырять код.

Покавырял код...

Забавно получается.

Логика такая - ивент на бросок. Поочередно смотри тег который поймал ивент и рекурсивно ищет по родителям вниз до тега BODY. Если дошли до тега HTML - GetElementByTagName('BODY').

У редактора TinyMCE тег Body id="tinymce".

У Яндекс редактора такого нет. Какой либо атрибут, который говорит, что это визуальный редактор не удалось вычислить...

Есть идеи как можно определить является ли тот самый объект документа визуальным редактором?

Отредактировано Ar2r (13-08-2010 12:24:15)

Shutnik · №10

а где пример можно посмотреть?

Полезная информация

№112-08-2010 11:35:26