Отмена вставки текста из буффера во фрейм wysiwyg-редактора
Клиент захотел сделать мини-wysiwyg редактор, как в одноклассниках. Все функции я сделал (вставку смайликов, размеры, цвет текста, итп), но осталась одна проблема - когда пользователь вставляет текст из буффера он не очищается.
Висивиг находится в iframe, который потом NewTextArea.document.designMode Первая главная задача, которую я никак не могу выполнить - это как повесить на поле висивига обработчик события вставки, чтобы хотя бы блокировать вставку и выводить сообщение, что встаку нужно выполнять нажатием на кнопку в панели инструментов, которая будет выводить фрейм с текстареа, в которую нужно будет вставить и нажать на кнопку, потом просто этот текст очитситься и вставиться уже в висивиг. Это план минимум, а в идеале, лучше бы автоматически очищать вставленный текст в висивиг Прошу помощи, хотя бы, в плане-минимум :) Заранее благодарствую |
Насколько я понял, форматированный текст вставляецо только в ИЕ... Если так, то у него есть инструменты для работы с буфером:
Цитата:
|
Цитата:
Мне вот сейчас какой алгоритм пришел в голову: 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');"> |
В CKEditor не прбовали посмотреть, как работает?
Предположительно в файле _source\plugins\clipboard\plugin.js функция onKey (line #116). |
Цитата:
|
Нашел на форуме тему тема. Там указано как вешать событие на нажатие кнопки в 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('УРААА!!!');
};
}
}
Но все ровно при вводе текста в редактор, "УРААА!!!" не выводится :( Что я неправильно делаю? |
|
Цитата:
|
Цитата:
Тогда хотя бы на вставку текста или как минимум на нажатие кнопки клавиатуры |
Цитата:
Цитата:
|
Цитата:
|
NewTextArea.onkeydown=function(){
...
}
Вобщем, как обычно:) Если фрейм это не схавает, то можно поступить так: Вещаем событие на body, проверяем цель события (target==NewTextArea) и если совпадает - обрабатываем. |
Цитата:
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>";
HTML += "</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.onkeydown=function(){
alert('');
}
}
}
Не работает.. или я тупень? :)))) |
Надеюсь я не сильно наглею, если попрошу на моем примере попробовать вставить? АТо у меня чтот не получается :(
|
Цитата:
|
Тогда будем ждать неленивых специалистов...
|
Мы все здесь ленивые).
|
Цитата:
|
Мы ленимся отвечать людям, которые ленятся сами что-то проверить.
|
Я отвечаю если вопрос мне самому интересен (раз уж для себя разобрался, то почему бы и не ответить) или если ответ займет не более двух - трех минут.
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Тоесть, я представляю как вешаются события на простые элементы дом, но тут фрейм + в designMode :blink:
|
Цитата:
|
В designMode обработчик события можно установить только на document и window фрейма.
|
Я тут поковырялся в коде и нашел для хрома, сафари и фф:
//Chrome, Safary
if(NewTextArea.frame.window.document.body.addEventListener)
NewTextArea.frame.window.document.body.addEventListener('paste', edtPaste, true);
//FF
else if(NewTextArea.frame.contentWindow.document.addEventListener)
NewTextArea.frame.contentWindow.document.addEventListener("paste", edtPaste, true);
Но для ИЕ и Оперы, так и не нашел. Есть какие-нибудь у кого-нибудь идеи? |
может быть вот это поможет для ИЕ
else if(NewTextArea.frame.window.document.body.attachEvent)
NewTextArea.frame.window.document.body.attachEvent("onpaste",edtPaste);
|
| Часовой пояс GMT +3, время: 11:10. |