Всем привет!
Всех с наступающим!
Вновь мне потребовался совет бывалых людей.
Мне необходимо написать он лайн редактор, но с некоторыми особенностями.
Главная особенность - мне нужно, чтобы в этом редакторе в случае набора символа # на текущей позиции курсора открывалось поле со списком, в котором отображается список заранее полученных значений из базы данных. В общем на подобие того как это происходит в большинстве IDE.
Подскажите в какую сторону копать если кто сталкивался. Если я не вижу очевидного - прошу простить - новый год всё таки уже на носу и думается тяжело))))
Полная Версия: Написать специфический он лайн редактор
Kapitan79, по-моему, ты уже сам описал как это сделать, не?
Вот эти слова:
Вот эти слова:
| Цитата |
| "мне нужно, чтобы в этом редакторе в случае набора символа # на текущей позиции курсора открывалось поле со списком, в котором отображается список заранее полученных значений из базы данных" |
переводим на чуть более технический язык:
| Цитата |
| "делаем обработчик нажатий клавиш в окне редактора, в котором при нажатии символа # открываем поле со списком, скрытое до этого момента, в котором отображается список...." |
.
А что НГ? Уже "корпоратиФФ" прошел, что ли?
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
А что НГ? Уже "корпоратиФФ" прошел, что ли?
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
| Цитата |
| Kapitan79, по-моему, ты уже сам описал как это сделать, не? |
Нда... Наверно туплю.
| Цитата |
| А что НГ? Уже "корпоратиФФ" прошел, что ли? smile.gif |
Неа
Будет 25 числа. Но душа уже просит праздника и о работе думать не хочется с одной стороны, а с другой до корпоратива этого ещё кучу всего сделать надо. 
Всё таки нашёл я проблему, которую не понимаю.
Почитал про wysiwyg редакторы, решил сделать по аналогии.
Создал в HTML textarea, с помощью js создал iframe и начал в нём отображать всё что пишется в textarea.
Воспользовался статьёй http://habrahabr.ru/post/38077/
Но мне по условию задачи было нужно, чтобы при вводе определённого символа выпадало меню выбора значений.
Я решил реализовать его с помощью ещё одного iframe, который открывается внутри первого. У меня получилось, но проблема вылезла в неожиданном месте. После того как я из выпадающего меню выбираю одно из значений, курсор в редакторе по непонятной причине переводится в начало строки и символ, ввод которого до этого был перехвачен, встаёт в начало строки, а не в то место , где был введён.
Не могу понять что с этим делать.
Код ниже.
Помогите разобраться где тут собака порылась.
Почитал про wysiwyg редакторы, решил сделать по аналогии.
Создал в HTML textarea, с помощью js создал iframe и начал в нём отображать всё что пишется в textarea.
Воспользовался статьёй http://habrahabr.ru/post/38077/
Но мне по условию задачи было нужно, чтобы при вводе определённого символа выпадало меню выбора значений.
Я решил реализовать его с помощью ещё одного iframe, который открывается внутри первого. У меня получилось, но проблема вылезла в неожиданном месте. После того как я из выпадающего меню выбираю одно из значений, курсор в редакторе по непонятной причине переводится в начало строки и символ, ввод которого до этого был перехвачен, встаёт в начало строки, а не в то место , где был введён.
Не могу понять что с этим делать.
Код ниже.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="editor.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
textEditor();
};
</script>
<title></title>
</head>
<body>
<div>
<textarea id="editor" onkeypress="press(event)"></textarea>
</div>
</body>
</html>
function press(e)
{
if (e.charCode == 35 || e.charCode == 46)
{
var Container = document.getElementsByTagName("body") ;
var iframe = "<iframe style='width: 100%; height: 100%;' src=\"javascript: document.open(); document.domain='" +
document.domain + "'; document.close();\" frameborder='0'></iframe>";
Container[0].innerHTML = Container[0].innerHTML+iframe ;
var Frame = Container[0].childNodes[0] ;
var FrameDoc = Frame.contentDocument ;
FrameDoc.open() ;
/** Если наэата #*/
if (e.charCode == 35)
{
FrameDoc.write('<html><head><script src="editor.js" type="text/javascript"></script><script type="text/javascript">window.onload = function () {submenu(1);};</script></head><body id="t" ></body></html>');
FrameDoc.close() ;
FrameDoc.designMode = "on" ;
}
/** Если нажата . */
if (e.charCode == 46)
{
FrameDoc.write('<html><head><script src="editor.js" type="text/javascript"></script><script type="text/javascript">window.onload = function () {submenu(2);};</script></head><body id="t" ></body></html>');
FrameDoc.close() ;
FrameDoc.designMode = "on" ;
}
}
}
function textEditor()
{
// Допустим, что нам известен id нужного тега textarea
var Textarea = document.getElementById("editor") ;
var Container = document.createElement("DIV") ;
Container.id = "container" ;
// Добавим контейнер к родителю текстарии, потом перенесем ее внутрь контейнера и скроем
Textarea.parentNode.insertBefore(Container, Textarea) ;
Container.appendChild(Textarea) ;
Textarea.style.display = 'none' ;
// Создадим фрейм и добавим его в контейнер редактора
var iframe = "<iframe style='width: 100%; height: 100%;' src=\"javascript: document.open(); document.domain='" +
document.domain + "'; document.close();\" frameborder='0'></iframe>";
Container.innerHTML = iframe + Container.innerHTML;
var Frame = Container.childNodes[0];
// Хитрое определение IE ;)
var isIE = /*@cc_on!@*/false;
// Выделим документ фрейма в отдельную переменную
var FrameDoc = isIE ? Frame.contentWindow.document : Frame.contentDocument;
FrameDoc.open();
// Если содержимое тега body будет пустым, в FF курсор станет каким-то через-чур маленьким.
// Чтобы этого избежать, добавим & nbsp; (без пробела)
FrameDoc.write('<html><head><script src="editor.js" type="text/javascript"></script></head><body id="tt" style="border: 3px;" onkeypress="press(event)">'+ Textarea.value +'</body></html>');
FrameDoc.close();
FrameDoc.designMode = "on";
}
function submenu(type)
{
var arr_complex = ["Complex1","Complex2"];
var arr_registr = ["kv1","kv2","vbb"];
var container = document.body;
var sel = document.createElement("ul");
var list_val;
sel.id = "sel_complex";
sel.style = "margin:-2px -2px -1px -2px; border:none; ";
if (type == 1)
{
list_val = arr_complex;
}
else
{
list_val = arr_registr;
}
for (var i=0; i< list_val.length; i++)
{
var option = document.createElement('li');
option.innerHTML = list_val[i];
option.style.fontSize = "9px";
option.setAttribute("onmouseover", "this.style.backgroundColor = '#9b9b9c'");
option.setAttribute("onmouseout", "this.style.backgroundColor = '#FFFFFF'");
option.setAttribute("onclick", "add_value(this.innerHTML)");
sel.appendChild(option);
}
container.appendChild(sel);
}
function add_value (text)
{
var frame_body = window.parent.document.body;
var frame_menu = window.parent.document.getElementsByTagName('iframe');
frame_body.removeChild(frame_menu[0]);
frame_body.innerText = frame_body.innerHTML + text;
}
Помогите разобраться где тут собака порылась.
Здесь расположена полная версия этой страницы.