форматированный ввод
Думаю многие из вас встречали на некоторых сайтах возможность формаированного ввода. Т.е. возможность вставки елементов и картинок в область ввода текста, как в Word'e.
Может кто-то знает как это реализуется? |
http://ckeditor.com/
вот такая есть штука знаю.. |
Если сам не сделаю, обязательно воспользуюсь. Достойное готовое решение. Как и в остальных подобных интерфейсаз ввода я обнаружил там iframe, кто-нибудь знает каков механизм работы?
|
|
То что нужно, iframe работает как textarea
$('body').ready(function(){ document.getElementById('inp').contentWindow. document.designMode='on'; }) |
А как бы в этом iframe менять содержимое? А то я с ними давно не работал :)
|
Geddar, так же, как и в текущем окне, просто перед каждым свойством добавляйте document.getElementById(id).contentWindow
|
contentDocument || contentWindow.document
|
Чёт не получается, поиски тоже результатов особых не дали. Можно более конкретный пример?
Обратиться к элементу получаеться а получить/изменить содержимое не очень |
var iframe = document.getElementById(iframeId); var doc = iframe.contentDocument || iframe.contentWindow.document; doc.getElementById(id)... |
Создал пустой документ, поставил scr на него присвоил body id'шник и через innerHTML всё заработало, Спасибо
|
Последний вопрос по данной теме, я тут нагуглил execCommand у которго есть определённые команды. Можно ли форматировать выделеное своим html кодом не ограничиваясь набором команд?
|
Цитата:
|
(|||:) имхо
Если не знаешь или в лом ответить - лучше промолчать. |
function nodeList(parentNode, list, level) { var i, node, count; if (!list) list = new Array(); level++; for (i = 0; i < parentNode.childNodes.length; i++) { node = parentNode.childNodes[i]; if (node.nodeType != 1) continue; count = list.length; list[count] = new Array(); list[count][0] = node; list[count][1] = level; nodeList(node, list, level); } return list; } // rgbNormal - приводит цвет к стандарту #RRGGBB function rgbNormal(color) { color = color.toString(); var re = /rgb\((.*?)\)/i; if(re.test(color)) { compose = RegExp.$1.split(","); var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var result = "#"; for (var i = 0; i < compose.length; i++) { rgb = parseInt(compose[i]); result += hex[parseInt(rgb / 16)] + hex[rgb % 16]; } return result; } else return color; } function execCommandImitation(start, end) { // Cтавим ForeColor-форматирование с помощью специального цвета doc.execCommand("ForeColor", false, "#f5F856"); // Получаем все элементы форматируемого документа var allNodes = nodeList(doc.body, false, 0); // Сортируем их по уровню вложенности var maxLevel = 0; for (i = 0; i < allNodes.length; i++) { maxLevel = allNodes[i][1] > maxLevel ? allNodes[i][1] : maxLevel; } // 4. Для всех элементов заменяем FONT и SPAN со специальным цветом на переданный код var node, newnode, color, parent; for (j = maxLevel; j >= 1; j--) { for (i = 0; i < allNodes.length; i++) { if (allNodes[i][1] != j) continue; node = allNodes[i][0]; sname = node.nodeName.toLowerCase(); color = node.color ? rgbNormal(node.color) : rgbNormal(node.style.color); if (color) color = color.toLowerCase(); if (sname == "font" || sname == "span" && color == "#f5f856") { try { node.innerHTML = start + node.innerHTML + end; } catch(e) {} parent = node.parentNode; while (node.childNodes.length > 0) parent.insertBefore(node.firstChild, node); parent.removeChild(node); } } } ifr.focus(); } </script> <span onclick="execCommandImitation('<div align=\'right\'>','</div>')">Вправо</span> Метод конечно не идеален, но принцип ясен. Используя execCommand выделяем каким-особенным цветом текст (или другим параметром) и потом меняем это на своё. Недостаток - такое форматирование не обратимо |
2007 год... баян, конечно. Это ответ был. Но если ты не можешь проверить сам такую вещь, может лучше подождать с написанием WYSIWYG-редактора?
Да и просто, не обязательно сразу отвечать в тему. Почему было самому сначала не попробовать? Зачем повышать энтропию форума? Может стоит начать думать о других, почтовые ящики не резиновые ведь? ;) upd: почему не обратимо? |
Если через execCommand выделить, к примеру, жирный текст, то он станет обратно нормальным. Сдесь же такое не прокатит. И есть некоторые глюки.
"Почему было самому сначала не попробовать?" - иногда решение бывает простым, как с фреймами например, а поиски займут намного больше времени или без результатны. И WYSIWYG-редактор нужен мне, причём своими руками, что б вставлять в теги необходимые данные и связать всё это с пхп через AJAX. P.S. с точки зрения информатики энтропия - это мера неопределённости информации, с точки зрения физики - мера идеальности макросостояния. Конкретизируйте ;) |
Цитата:
Цитата:
|
Повторное выделение жирным отменят предыдущее. Так же с отсальными свойствами и Ctrl-Z тоже.
Подробнее:Делаю тестовую оболочку. Пользователь-"создатель теста", должен смочь добавлять инпуты. Например несколько правильных ответов. Соответсвенно их нужно пронумеровать, будь это радио или чекбоксы. А правильный ответ будет храниться в базе. К тому же, прога должна сама определять тип вопроса. например если ответ один из нескольких - радио, несколько - чекбоксы, один, который нужно самому ввести - просто инпут-текст. |
Часовой пояс GMT +3, время: 01:19. |