6

Друзья, имеется такой пользовательский интерфейс.

<textarea> - туда юзер заносит текст, который отображается в <div class="text">

<select id="part"> - цвет текста частично - позволяет, чтобы юзер выделил часть текста <div class="text"> и установил цвет - метод createElement("span")

Однако, если в textarea юзер внесет изменения, createElement("span") сбрасывается, с точки зрения юзера - цвет всего текста снова становится черным (по умолчанию)

Что можно сделать для сохранения createElement("span")

Заранее спасибо.


$("#part").change(function () {
    var selectedText = window.getSelection ? window.getSelection() : document.selection.createRange();            
    if (selectedText.getRangeAt) {
        var range = selectedText.getRangeAt(0);
        var newNode = document.createElement("span");
                if ($(this).val() == 1) {
                          newNode.setAttribute('class', 'highlightedTextRed');
                        } 
                else if ($(this).val() == 2) {
                    newNode.setAttribute('class', 'highlightedTextBlue');}
                else  {
                newNode.setAttribute('class', 'highlightedTextWhite');}         
                range.surroundContents(newNode);
        }        
});
5
  • jsfiddle.net/Nata_Hamster/jbs3wyfv/48 Вот полный код
    – Natalya
    20 ноя 2017 в 12:07
  • Просто Используй div с атрибутом contenteditable.
    – Qwertiy
    20 ноя 2017 в 12:15
  • Установила contenteditable="true" для <div contenteditable="false">. К сожалению, не помогло(
    – Natalya
    20 ноя 2017 в 12:21
  • Потому что надо использовать вместо textarea, а не вместе с ней.
    – Qwertiy
    20 ноя 2017 в 12:33
  • Я наверное не правильно поняла... Вы не могли бы тут изменения внести и ссылку дать, если не сложно. Заранее спасибо... jsfiddle.net/Nata_Hamster/jbs3wyfv/48
    – Natalya
    20 ноя 2017 в 13:37

1 ответ 1

0

Как один из вариантов.
Пример работает только с синим цветом.

var Q;
Q = {};
Q.tmpText = '';

document.getElementById('setDescriptionPh5').addEventListener('input', function(e) {
	document.getElementById('descriptionPh5').innerHTML = this.value.replace(/\n/g, '<br>').replace(/\[b\]/gi, '<span class="highlightedTextBlue">').replace(/\[\/b\]/gi, "</span>");
});

$("#part").change(function() {
	var selectedText = window.getSelection ? window.getSelection() : document.selection.createRange();
	if (selectedText.getRangeAt) {
		var range = selectedText.getRangeAt(0);
		var newNode = document.createElement("span");
		if ($(this).val() == 1) {
			newNode.setAttribute('class', 'highlightedTextRed');
		} else if ($(this).val() == 2) {
			newNode.setAttribute('class', 'highlightedTextBlue');
		} else {
			newNode.setAttribute('class', 'highlightedTextWhite');
		}
		range.surroundContents(newNode);
	}
	Go();
});

function Go() {
	Q.tmpText = document.getElementById('descriptionPh5').innerHTML;
	document.getElementById('setDescriptionPh5').value = Q.tmpText.replace(new RegExp('<br>', 'g'), '\n').replace(/<span class="highlightedTextBlue">/gi, '\[b\]').replace(/<\/span>/gi, '\[\/b\]');
}
.highlightedTextRed {
  color : red;
}
.highlightedTextBlue {
  color : blue;
}
.highlightedTextWhite {
  color : white;
}	
div {
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<div>
  <select id="part">
    <option VALUE="0">Цвет текста частично
    </option>
    <option VALUE="1">Красный
    </option>
    <option VALUE="2">Синий
    </option>
    <option VALUE="3">Белый
    </option>			
  </select>
</div>
<br>
<div class="text" style="text-align: left; transform: translateY(-50%); line-height: 90%; font-size: 23px; font-family: Candara; padding-top: 30px" id="descriptionPh5">
</div>	
<textarea type="text" id="setDescriptionPh5" placeholder="Вставьте текст" style="margin-top:5px; margin-bottom:5px" rows="5" cols="80">
</textarea>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.