форматированный ввод
Думаю многие из вас встречали на некоторых сайтах возможность формаированного ввода. Т.е. возможность вставки елементов и картинок в область ввода текста, как в 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, время: 00:19. |