Как создать текстовую область ввода html, чтобы подчеркнуть или отформатировать определенные слова? - PullRequest
Новая
       14

Как создать текстовую область ввода html, чтобы подчеркнуть или отформатировать определенные слова?

1 голос
/ 01 сентября 2010

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

Мне уже известны некоторые текстовые редакторы (такие как juju editor и lwrte), а также некоторые подсветки синтаксиса, но я не уверен, что они делают то, что я хочу.

Итак, кто-нибудь знает инструмент, который позволил бы мне сделать это?

Спасибо

1 Ответ

2 голосов
/ 17 июня 2011

Вы можете сделать div "contenteditable", установив для этого атрибута значение true в div.Затем окружите эти слова разметкой, которая не влияет на макет, но ее можно стилизовать и легко удалить позже.

Примерно так: 

<style type="text/css">
  .content {
    border: 5px inset #000;
    padding: 5px;
  }

  .content .curse {
    color: #f00;
    font-weight: bold;
    text-decoration: underline;
  }
</style>
<div contentEditable="true" class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat gravida tempus. Vivamus convallis, purus dictum bibendum ullamcorper, neque ipsum aliquam ligula, sit amet imperdiet est ante non nisl. Mauris dignissim libero et urna iaculis at iaculis metus semper. Sed ac nisl eu arcu molestie pretium quis quis ligula. Cras vitae enim vitae lacus molestie dictum. Donec rutrum tincidunt augue, vel pretium lectus faucibus ut. In consequat diam accumsan urna fermentum vitae tincidunt ipsum rutrum. Curabitur sagittis, ante a viverra fringilla, orci urna feugiat urna, eu ultricies lacus odio adipiscing risus. Sed pellentesque blandit ipsum vel hendrerit. Nulla nibh mauris, egestas sed consectetur et, lobortis in dolor. Curabitur eu ante lectus. Cras consequat, dui sed pellentesque tempor, purus turpis egestas sapien, in fermentum eros tortor vel mi. Integer accumsan, augue id elementum pretium, est quam vehicula nisl, at congue purus sem quis ipsum. Aliquam commodo, erat in euismod lacinia, tortor lectus interdum lacus, quis vestibulum augue nulla in tellus.
</div>
<script type="text/javascript">
  $(document).ready(function() {
    var html = $('.content').html();
    $('.content').html(html.replace(/lectus/gi, '<span class="curse">lectus</span>'));
  });
</script>
...