Всем привет!
Давно уже в фоновом режиме мучаюсь над задачей написание текстового WEB редактора.
Его особенность - необходимость реализации всплывающих подсказок (как при наборе кода в PhpStorm например).
То есть есть массив слов, загруженный из базы данных через ajax, есть wysiwyg редактор.
Нужно при наборе текста заставить под курсором появляться поле со списком слов загруженных через ajax, включающих набранные в редакторе буквы.
Основные сложности с которыми никак не могу справиться - определение координат текстового курсора, чтобы окно подсказки появлялось в нужном месте, и собственно выбор метода вывода этого окна подсказки. Ведь нужно чтобы при его отображении курсор оставался в редакторе и не перескакивал в начало текста.
Если есть пример подобного редактора - скиньте ссылочку.
Полная Версия: WEB редактор текста с подсказками на основе JS
| Цитата (Kapitan79 @ 11.02.2015 - 10:20) |
| Основные сложности с которыми никак не могу справиться - определение координат текстового курсора |
В чем сложность то, координату курсора мышки определить можно, значит и координату позиции(каретки) можно получить где кликнули. При наборе отталкиваемся от координаты позиции(каретки).
Для понимания процесса лучше разобрать принцип работы какого нибудь WYSIWYG редактора.
P.S. Рабочее пространство у Вас не будет настоящим полем ввода, это будет набор html тегов.
_____________
Mysql, Postgresql, Redis, Memcached, Unit Testing, CI, Kohana, Yii, Phalcon, Zend Framework, Joomla, Open Cart, Ymaps, VK Api
http://jsfiddle.net/7vw0ehhc/
как сделать множественную подсказку и ставить её под курсор - должно тараканов в голове хватить
кроме этого - для регистра независимости нужно использовать regexp в цикле (в условии)
_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
как сделать множественную подсказку и ставить её под курсор - должно тараканов в голове хватить
кроме этого - для регистра независимости нужно использовать regexp в цикле (в условии)
_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
| Цитата (T1grOK @ 11.02.2015 - 14:40) |
| В чем сложность то, координату курсора мышки определить можно, значит и координату позиции(каретки) можно получить где кликнули. |
А если кликнули в начале текста, а потом на 10 строк ниже перешли? Не годится позиция мышки.
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
| Цитата (sergeiss @ 11.02.2015 - 13:11) |
| А если кликнули в начале текста, а потом на 10 строк ниже перешли? |
| Цитата (T1grOK @ 11.02.2015 - 10:40) |
| При наборе отталкиваемся от координаты позиции(каретки) |
Знаем начальную позицию каретки. При клике на любую клавишу, смещаем на нужное количество пикселей вверх
вниз/вбок и т.д.
_____________
Mysql, Postgresql, Redis, Memcached, Unit Testing, CI, Kohana, Yii, Phalcon, Zend Framework, Joomla, Open Cart, Ymaps, VK Api
T1grOK
| Цитата |
| Знаем начальную позицию каретки. При клике на любую клавишу, смещаем на нужное количество пикселей вверх вниз/вбок и т.д. |
А если я увеличил размер шрифта в браузере?
_____________
Senior PHP developer: PHP5, MySQL, JavaScript, CakePHP, Yii/Yii2, Zend Framework, Smarty, XML/Xslt, JQuery, Jquery Mobile, Bootstrap, ExtJS, HTML, HTML5, CSS, Linux, SVN, Git, Memcached, Redis, MongoDB, Zend Guard, Ioncube, FFMpeg, PayPal, Webmoney, Qiwi, Facebook API, Vkontakte Api, Google API, Twitter Api, Steam Api.
Junior Android Developer: Android SDK, многопоточность, работа с HTTP запросами, JSON, SQLite, фрагменты.
Шрифт в браузере в приницпе разный. I и скажем L имеют разную ширину. Но это пол беды - я вычислил что чтобы всё было более менее адекватно за среднюю ширину буквы надо принять 8 пикселей.
Но когда я пытаюсь создать контейнер со списком слов, у меня во первых уезжает текст вокруг контейнера, а во вторых после отрисовки контейнера курсор текстового редактора встает в начало строки.
Но когда я пытаюсь создать контейнер со списком слов, у меня во первых уезжает текст вокруг контейнера, а во вторых после отрисовки контейнера курсор текстового редактора встает в начало строки.
| Цитата (Kapitan79 @ 11.02.2015 - 19:16) |
| Но когда я пытаюсь создать контейнер со списком слов, у меня во первых уезжает текст вокруг контейнера, а во вторых после отрисовки контейнера курсор текстового редактора встает в начало строки. |
Ты этот контейнер куда помещаешь, прямо внутрь textarea? Или он, все-таки, относится к другому объекту и только визуально находится внутри текстовой области?
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
Что если вместо позиции курсора мышки просматривать offset блока в котором происходит запись + количество введенных символов чтобы было около вводимого символа. Если редактор вроде FCEditor тогда там символы появляются в блоке div тогда надо еще и количество символов подсчитывать. Мне, так кажется.
_____________
Трус не играет в хокей
_____________
Трус не играет в хокей
| Цитата |
| Ты этот контейнер куда помещаешь, прямо внутрь textarea? Или он, все-таки, относится к другому объекту и только визуально находится внутри текстовой области? |
<!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 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><script>window.buf_word = "";window.px_count = 0;</script></head><body id="tt" style="border: 3px;" onkeypress="press(event)">'+ Textarea.value +'</body></html>');
FrameDoc.close();
FrameDoc.designMode = "on";
}
Код я скопировал из статьи где то на хабре и до конца его честно говоря не понимаю.
В результате iframe с помощью textarea превращается в один большой редактор, который допускает вставку других контейнеров.
Здесь расположена полная версия этой страницы.