Ищете простой эквивалент форматируемой текстовой области

Question

Я создал немного dsl для запросов к базе данных нашей компании. Я сейчас пытаюсь создать веб-интерфейс. Я начал использовать текстовые области, чтобы позволить пользователям вводить свои запросы, но недавно обнаружил, что вы не можете форматировать фрагменты текста в текстовых областях (что я бы сделал, чтобы выделить ошибки в тексте запроса и т. Д.) - теги не работают в текстовой области ,

Мы стандартизировали Google Chrome, поэтому мне нужен виджет, который:

1. выглядит как текстовая область
2. можно изменить размер (как текстовые в Chrome)
3. позволяет форматировать подстроки внутри себя, используя теги и классы (например, подстроку)

что я не хочу:

1. панели инструментов / кнопки и т. Д.
2. сложный API, чтобы просто сделать выше.

Я посмотрел на tinymce , но не могу понять, как получить весь текст текстовой области, найти подстроку, а затем обернуть эту подстроку в тег. (Я сделал это с помощью обычной текстовой области и javascript, поэтому, если это похоже, отлично.)

Любое руководство, идеи и т. Д., Очень ценится.

Answer 1

Если я вас правильно понимаю, вы можете использовать элемент div (или другой) с атрибутом contenteditable и некоторыми стилями. Затем вы можете получить содержимое элемента с разметкой в ​​свойстве innerHTML и как обычный текст в свойстве textContent. Простой пример:

<div contenteditable style=
  "width: 20em; height: 10em; overflow: auto; border: solid gray 1px" 
  id=c>foo <i>bar</i></div>
<button onclick="alert(document.getElementById('c').innerHTML)">show</button>

Answer 2

Я настоятельно рекомендую CodeMirror (и на GitHub ). Он имеет массу вариантов форматирования, которые уже доступны, и звучит как то, что вы ищете (подсветка синтаксиса). Он чрезвычайно настраиваемый (я смог сделать эту штуку более изогнутым для меня) и работает во многих браузерах.

Вы могли бы начать с MySQL Mode и настроить его по мере необходимости (я предполагаю некоторый SQL, когда вы говорите запрос, но другие режимы могут работать вместо этого, если я ошибаюсь) .

Для автоматического изменения размера редактора добавьте в свой CSS следующее:

.CodeMirror-scroll {
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%
}

Answer 3

CKEditor может быть вашим выбором.Его API легко настроить и использовать:
http://ckeditor.com/
http://docs.cksource.com/

Вы можете создать свою собственную панель инструментов или вообще не использовать ее.