Выделение / Формат текстовых полей - PullRequest
Новая
       4

Выделение / Формат текстовых полей

1 голос
/ 18 августа 2010

Я хочу реализовать живую разность внутри веб-страницы, которая сохраняет пробелы.

В прошлом я делал нечто подобное, используя комбинацию TinyMCE и JQuery в IE6 (требуется для этого проекта), ноэто не сохранило пробелы.(Это не должно было быть, но я не добавил ничего, чтобы заставить это сделать это, он просто сделал).TinyMCE не был идеальным, так как я имел дело с простым текстом, а TinyMCE - это редактор стилей WYSIWYG, поддерживающий форматированный текст.Большая часть его функциональных возможностей не использовалась и было / было трудно отключить.

Я просмотрел большинство проектов, перечисленных в http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors. EditArea показалось многообещающим, но я не могу определитькакие элементы на самом деле используются для отображения текста.

$ ('# frame_modified'). Contents (). Find ('# editor'). Text ()

отображает много информации о строках (123456789101112и так далее) вместе со строкой находится курсор, но не все остальные.Я не понял, как применить / изменить стили, связанные с этим.

Допустим, пользователь вводит foo, я хотел бы обернуть его, чтобы он отображался как foo на лету.Какое самое простое решение для получения такой функциональности?

IE8 является целевым браузером для этого проекта.

1 Ответ

0 голосов
/ 19 августа 2010

Вы можете выполнить некоторые действия с событием onKeyDown (в одном из ваших собственных плагинов). Если ваш курсор уже находится в новом диапазоне, добавьте только что введенный символ, иначе создайте новый диапазон с введенным символом. Примерно так: 

ed.onKeyDown.add(function(ed,evt){
  char = getChar(evt.keyCode); // your function to get the character to be inserted depending on evt.keyCode

  // if span already exists
  node = ed.selection.getNode();
  if (node.nodeName.toLowerCase() == 'span' && node.className == 'myclass'){
     node.innerHTML += char;
  }
  // new span
  else {
    doc = ed.getDoc();
    new_element = doc.createElement('span');
    new_element.className = "myclass";
    new_element.innerHTML = char;
    tinymce.activeEditor.mceInsertContent(new_element);
  }
})
...