Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.09.2009, 08:05
Аватар для mcfly
Интересующийся
Отправить личное сообщение для mcfly Посмотреть профиль Найти все сообщения от mcfly
 
Регистрация: 21.09.2009
Сообщений: 26

Отмена вставки текста из буффера во фрейм wysiwyg-редактора
Клиент захотел сделать мини-wysiwyg редактор, как в одноклассниках. Все функции я сделал (вставку смайликов, размеры, цвет текста, итп), но осталась одна проблема - когда пользователь вставляет текст из буффера он не очищается.

Висивиг находится в iframe, который потом NewTextArea.document.designMode

Первая главная задача, которую я никак не могу выполнить - это как повесить на поле висивига обработчик события вставки, чтобы хотя бы блокировать вставку и выводить сообщение, что встаку нужно выполнять нажатием на кнопку в панели инструментов, которая будет выводить фрейм с текстареа, в которую нужно будет вставить и нажать на кнопку, потом просто этот текст очитситься и вставиться уже в висивиг. Это план минимум, а в идеале, лучше бы автоматически очищать вставленный текст в висивиг

Прошу помощи, хотя бы, в плане-минимум

Заранее благодарствую

Последний раз редактировалось mcfly, 21.09.2009 в 08:24.
Ответить с цитированием
  #2 (permalink)  
Старый 21.09.2009, 10:30
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Насколько я понял, форматированный текст вставляецо только в ИЕ... Если так, то у него есть инструменты для работы с буфером:

Цитата:
Свойство clipboardData
Синтаксис: window.clipboardData
Изменяемое: нет
Значением свойства clipboardData является объект, обеспечивающий доступ к системному буферу сохранения. Буфер сохранения в Windows поддерживает пять форматов хранения данных, которые в DHTML обозначаются так:

Обозначение Описание
"Text" Текстовый формат
"URL" Формат URI
"File" Файловый формат
"HTML" Формат HTML
"Image" Формат графического образа

Этот объект не имеет свойств и поддерживает следующие методы:

Метод Описание
clearData(формат?) Удаляет заданный формат из буфера сохранения. Если формат не задан, то удаляются все форматы.
getData(формат) Извлекает данные из буфера сохранения заданного формата, который может иметь значение "Text" или "URL", и возвращает их в виде строки.
setData(формат, данные) Помещает в буфер сохранения строку данные в заданном формате, который может иметь значение "Text" или "URL". Возвращает true в случае успеха и false в противном случае.

Пример использования clipboardData для вырезания текста на Веб-странице и вставки его в другое место:

<HTML>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<HEAD>
<SCRIPT>

// Выделяем текст, который следует вырезать
function selectText() {
  var r = document.body.createTextRange();
  r.findText(divSource.innerText);
  r.select();
}
// По умолчанию вырезание текста в IE запрещено. Следующая функция его разрешает.
function enableCut() {
  event.returnValue = false;
}
// По умолчанию вставка из буфера в IE запрещена. Следующая функция его разрешает.
function enablePaste() {
  event.returnValue = false;
}
// Вставляем текст из буфера сохранения и сбрасываем returnValue,
// чтобы отменить реакцию обозревателя по умолчанию.
function pasteText() {
  var r = document.selection.createRange();
  r.text = clipboardData.getData("Text");
}

</SCRIPT>
</HEAD>
<BODY onload="selectText()">
<DIV ID="divSource" onbeforecut="enableCut()">Вырежьте этот текст</DIV>
<DIV onbeforepaste="enablePaste()" onpaste="pasteText()">
  Вставьте текст сюда
</DIV>
</BODY>
</HTML>
Ответить с цитированием
  #3 (permalink)  
Старый 21.09.2009, 11:19
Аватар для mcfly
Интересующийся
Отправить личное сообщение для mcfly Посмотреть профиль Найти все сообщения от mcfly
 
Регистрация: 21.09.2009
Сообщений: 26

Сообщение от B~Vladi Посмотреть сообщение
Насколько я понял, форматированный текст вставляецо только в ИЕ...
Работа с буфером не желательна, ибо это поддерживает только ИЕ. Надо сделать функционал максимально удобный для пользователя + чтобы работало в пятерке распространенных браузеров.

Мне вот сейчас какой алгоритм пришел в голову:
1. Пользователь вставляет текст
2. Срабатывает событие onbeforepaste
3. Обработчик на этом событии открывает див с текстареа и ставит туда курсор (в данном случае возможно, что текст туда вставиться?)
4. Если текст туда не вставиться автоматом, то в этом окне указать, что нужно тут вставить текст и нажать на ОК
5. ПРи нажатии на ОК скрипт вставляет этот текст в позицию курсора в висивиге

Это оптимальный алгоритм, если не получится в браузерах, кроме ИЕ, автоматом очистить текст и сразу вставить в висивиг

Вот и возникает главный вопрос: Куда указывать обработчик этого события.

Дополнительная инфа:

Поле висивига находится во фрейме: <iframe id='frm' class='editor_iframe'></iframe>

Инициализация висивига:
var NewTextArea={
  frame:{},
  document:{},
  window:{},
  init:function(frame){
    NewTextArea.frame=frames[frame]?frames[frame]:document.getElementById(frame);//IE, Opera - frames.document, другие - ById.document

    if (!NewTextArea.frame){
      //alert("Ошибка ID");
      return -1;
    }

    //1) получить указатель
    NewTextArea.document=NewTextArea.frame.contentDocument || NewTextArea.frame.document;
    if (!NewTextArea.document){
      //alert("Ошибка iframe");
      return -2;
    }

    NewTextArea.window=NewTextArea.frame.contentWindow || NewTextArea.frame.window;
    if (!NewTextArea.window){
      //alert("window");
      return -2;
    }

    //2) Оформить iframe HTML документ
    var HTML = "<html><head></head>";
    HTML += "<body></body></html>"

    NewTextArea.document.open();
    NewTextArea.document.write(HTML);
    NewTextArea.document.close();

    //3) Установить designMode
    if (NewTextArea.document.designMode){
      NewTextArea.document.designMode='on';
    }else{
      alert("Ошибка designMode");
      return -3;
    }
  }
}


Обязательно прописать в боди: <BODY onload="NewTextArea.init('frm');">

Последний раз редактировалось mcfly, 21.09.2009 в 15:46.
Ответить с цитированием
  #4 (permalink)  
Старый 21.09.2009, 18:01
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

В CKEditor не прбовали посмотреть, как работает?

Предположительно в файле _source\plugins\clipboard\plugin.js функция onKey (line #116).
Ответить с цитированием
  #5 (permalink)  
Старый 22.09.2009, 14:00
Аватар для mcfly
Интересующийся
Отправить личное сообщение для mcfly Посмотреть профиль Найти все сообщения от mcfly
 
Регистрация: 21.09.2009
Сообщений: 26

Сообщение от Octane Посмотреть сообщение
В CKEditor не прбовали посмотреть, как работает?
Там просто обработчик события. А как этот обработчик прописать? Только скажите, плиииз, на моем примере. Просто как сделать так, чтобы хотя бы при вставке текста в поле редактора выполнялось alert("УРААА!!!");

Последний раз редактировалось mcfly, 22.09.2009 в 14:38.
Ответить с цитированием
  #6 (permalink)  
Старый 22.09.2009, 14:37
Аватар для mcfly
Интересующийся
Отправить личное сообщение для mcfly Посмотреть профиль Найти все сообщения от mcfly
 
Регистрация: 21.09.2009
Сообщений: 26

Нашел на форуме тему тема. Там указано как вешать событие на нажатие кнопки в iframe

Вот это:
var iframe = document.getElementById("идентификатор_фрейма");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 
iframeDocument.designMode = "On";
 
iframeDocument.onkeypress = function(e) {
    …
};


Его адаптировал для своего скрипта:
var NewTextArea={
  frame:{},
  document:{},
  window:{},
  init:function(frame){
    NewTextArea.frame=frames[frame]?frames[frame]:document.getElementById(frame);//IE, Opera - frames.document, другие - ById.document

    if (!NewTextArea.frame){
      //alert("Ошибка ID");
      return -1;
    }

    //1) получить указатель
    NewTextArea.document=NewTextArea.frame.contentDocument || NewTextArea.frame.document || NewTextArea.frame.contentWindow.document;
    if (!NewTextArea.document){
      //alert("Ошибка iframe");
      return -2;
    }

    NewTextArea.window=NewTextArea.frame.contentWindow || NewTextArea.frame.window;
    if (!NewTextArea.window){
      //alert("window");
      return -2;
    }

    //2) Оформить iframe HTML документ
    var HTML = "<html><head></head><body>";
    HTML += "</body></html>"

    NewTextArea.document.open();
    NewTextArea.document.write(HTML);
    NewTextArea.document.close();

    //3) Установить designMode
    if (NewTextArea.document.designMode){
      NewTextArea.document.designMode='on';
    }else{
      alert("Ошибка designMode");
      return -3;
    }

    NewTextArea.document.onkeypress = function(e) {
      alert('УРААА!!!');
    };

  }
}


Но все ровно при вводе текста в редактор, "УРААА!!!" не выводится

Что я неправильно делаю?

Последний раз редактировалось mcfly, 22.09.2009 в 14:40.
Ответить с цитированием
  #7 (permalink)  
Старый 23.09.2009, 10:30
Аватар для mcfly
Интересующийся
Отправить личное сообщение для mcfly Посмотреть профиль Найти все сообщения от mcfly
 
Регистрация: 21.09.2009
Сообщений: 26

Вот скрипт. Подскажите, пожалуйста, как указать обработчик события onbeforepast.

Заранее благодарен
Ответить с цитированием
  #8 (permalink)  
Старый 23.09.2009, 10:31
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от mcfly
обработчик события onbeforepast
Такого обработчика нет...
Ответить с цитированием
  #9 (permalink)  
Старый 23.09.2009, 10:43
Аватар для mcfly
Интересующийся
Отправить личное сообщение для mcfly Посмотреть профиль Найти все сообщения от mcfly
 
Регистрация: 21.09.2009
Сообщений: 26

Сообщение от B~Vladi Посмотреть сообщение
Такого обработчика нет...
В смысле вообще нету или нет для данного случая?

Тогда хотя бы на вставку текста или как минимум на нажатие кнопки клавиатуры
Ответить с цитированием
  #10 (permalink)  
Старый 23.09.2009, 10:49
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от mcfly
В смысле вообще нету или нет для данного случая?
В спецификации DOM обработчика с таким названием нет вообще для любых элементов. В ишаке можно такое реализовать.

Сообщение от mcfly
нажатие кнопки клавиатуры
keypress, keydown.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
WYSIWYG редактор текста HTML страницы на javascript Дмитри Чижиков Ваши сайты и скрипты 4 14.09.2009 16:05