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

Общайтесь со знакомыми и друзьями в нашей группе в Контакте.

№112-08-2010 11:35:26

Ar2r
Участник
 
Группа: Members
Зарегистрирован: 27-01-2010
Сообщений: 22
UA: Firefox 3.6

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

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

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

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

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

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

Выделить код

Код:

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

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

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

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

Отсутствует

 

№212-08-2010 12:17:49

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785
UA: Firefox 3.6

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

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

Отсутствует

 

№312-08-2010 12:23:53

Ar2r
Участник
 
Группа: Members
Зарегистрирован: 27-01-2010
Сообщений: 22
UA: Firefox 3.6

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

Shutnik пишет

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

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

Отсутствует

 

№412-08-2010 12:31:00

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785
UA: Firefox 3.6

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

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

Выделить код

Код:

function drop(event)
{
    ...
}

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

Отсутствует

 

№512-08-2010 12:37:41

Ar2r
Участник
 
Группа: Members
Зарегистрирован: 27-01-2010
Сообщений: 22
UA: Firefox 3.6

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

Shutnik пишет

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

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

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

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

Отсутствует

 

№612-08-2010 12:45:38

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785
UA: Firefox 3.6

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

как-то так?

Выделить код

Код:

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

Отсутствует

 

№712-08-2010 15:05:49

Ar2r
Участник
 
Группа: Members
Зарегистрирован: 27-01-2010
Сообщений: 22
UA: Firefox 3.6

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

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

Отсутствует

 

№812-08-2010 16:12:03

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785
UA: Firefox 3.6

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

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

Выделить код

Код:

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;

Отсутствует

 

№912-08-2010 16:13:54

Ar2r
Участник
 
Группа: Members
Зарегистрирован: 27-01-2010
Сообщений: 22
UA: Firefox 3.6

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

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

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

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

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

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

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

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

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

Отсутствует

 

№1013-08-2010 22:41:46

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785
UA: Firefox 3.6

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

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

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]