Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.08.2024, 23:55
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

Как вместо тегов применять стиль в текстовом поле?
Здравствуйте уважаемые специалисты. Помогите, пожалуйста, реализовать дополнительный функционал к тому что уже есть.
У меня есть простое текстовое поле textarea:

<form>
<div>
<button type="button" onclick="insertTag('description','<b>','</b>')">B</button>
<button type="button" onclick="insertTag('description','<i>','</i>')">I</button>
<button type="button" onclick="insertTag('description','<u>','</u>')">U</button>
</div>
<textarea id='description' name='description'></textarea>
</form>


И есть такой скрипт, который при выделении текста оборачивает его в теги.

function insertTag(formName,startTag,endTag){
   var el=document.getElementById(formName);
   el.focus();
   if (el.selectionStart==null){
      var rng=document.selection.createRange();
      rng.text=startTag+rng.text+endTag
   }else{
      el.value=el.value.substring(0,el.selectionStart)
      +startTag+el.value.substring(el.selectionStart,el.selectionEnd)
      +endTag+el.value.substring(el.selectionEnd);
   }
}


Но как сделать так, чтобы при клике, например на курсив, выделенный текст не оборачивался в теги, а выделялся курсивом?
При этом необходимо, чтобы значение из текстового поля записывалось в файл вместе с тегами.
Помогите, пожалуйста, понятия не имею как это реализовать.
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2024, 10:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,206

Сообщение от LADYX
Но как сделать так, чтобы при клике, например на курсив, выделенный текст не оборачивался в теги, а выделялся курсивом?
textarea не обладает такими возможностями...

Как вариант - ищи подключаемые редакторы, которые могут визуализировать редактирование.
https://ru.docs.webix.com/desktop__text_editors.html

Последний раз редактировалось ksa, 07.08.2024 в 10:35.
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2024, 03:25
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

ksa, спасибо за информацию. Почитал, ознакомился.

Все эти редакторы слишком объемны для моих скромных потребностей, там много всего лишнего, того чего мне совсем не нужно. А для моих нужд необходимо только три стиля - жирность, курсив и подчеркивание. Уважаемые специалисты, буду очень признателен, если поможете с самым коротким, простым и легким решением, если конечно это вполне реально реализуемо.
Ответить с цитированием
  #4 (permalink)  
Старый 13.08.2024, 04:30
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,583

LADYX, простых решений нет. Тем сложная и проблемная. Самописку делать - нужен отдел разработки, месяц на написание и год на устранение багов. Если вы конечно хотите чтоб оно гарантированно работало, а не глючило через раз - иначе можно и за вечер написать.:)
Потому только готовые библиотеки с историей активной жизни больше чем пару лет. Гуглить "simple wysiwyg" и отсеивать.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как убрать кнопку, чтобы скрипт срабатывал при потере фокуса поля ввода? Блондинка Общие вопросы Javascript 24 26.04.2021 16:57
Как сделать поле ввода тегов\меток на чистом js gunner17 Events/DOM/Window 2 21.03.2019 09:01
Как объединить 4 одинаковых функции Batyabest Общие вопросы Javascript 2 21.12.2013 22:53
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Как передать данные из jqGrid в текстовое поле? Rooner jQuery 2 27.09.2012 19:31