20.04.2020, 23:58
|
|
Интересующийся
|
|
Регистрация: 25.03.2020
Сообщений: 17
|
|
|
Редактор текста с помощью модели DOM
Dom-модель позволяющая редактировать текст
Как сделать чтоб при выборе флажка значение применялось к тексту
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Text format</title>
</head>
<body>
<form>
<h3>Введите текст и выберите стиль</h3>
<div class="continer">
<p><input type="checkbox" value="Bold">Bold</p>
<p><input type="checkbox" value="Underline">Underline</p>
<p><input type="checkbox" value="Italics">Italics</p>
<p><input type="radio" name="pos" value="Left">Left</p>
<p><input type="radio" name="pos" value="Right">Right</p>
<p><input type="radio" name="pos" value="Justify">Justify</p>
<textarea cols="30" rows="10" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa commodi aut, eaque, vitae assumenda, pariatur illo modi ipsam quis totam, itaque. Distinctio modi illum, consectetur quam labore incidunt dicta adipisci?</textarea>
</form>
<button>Show text</button>
<hr style="margin-top: 10px;">
</div>
<script src="js/script.js"></script>
</body>
</html>
Что то пытался сделать:
function fChange(){
let prop = this.input.getAttribute('value');
if(this.getAttribute('type') == 'checkbox')
objBox[prop] = this.value + "<b>";
else
objBox[prop] = this.value;
let text = document.getElementById('text');
for(let key in objBox){
text.style.setProperty(key, objBox[key]);
console.log(key+ ":" + objBox[key] + ";");
}
}
|
|
21.04.2020, 02:21
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Rudman,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text format</title>
</head>
<body>
<form onsubmit="fChange(event,this)">
<h3>Введите текст и выберите стиль</h3>
<div class="continer">
<label><input type="checkbox" value="font-weight:bold;">Bold</label>
<label><input type="checkbox" value="text-decoration:underline;">Underline</label>
<label><input type="checkbox" value="font-style:italic;">Italic</label>
<label><input type="radio" name="pos" value="text-align:left;">Left</label>
<label><input type="radio" name="pos" value="text-align:right;">Right</label>
<label><input type="radio" name="pos" value="text-align:justify">Justify</label>
<textarea cols="30" rows="10" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa commodi aut, eaque, vitae assumenda, pariatur illo modi ipsam quis totam, itaque. Distinctio modi illum, consectetur quam labore incidunt dicta adipisci?</textarea>
<button>apply the settings</button>
<hr style="margin-top: 10px;">
</div>
</form>
<script>
function fChange(event,form){
event.preventDefault();
let property = "";
form.querySelectorAll(":checked").forEach(({value}) => property +=value);
text.style.cssText = property;
}
</script>
</body>
</html>
|
|
21.04.2020, 06:06
|
 |
Профессор
|
|
Регистрация: 19.01.2012
Сообщений: 505
|
|
|
Сообщение от Rudman
|
|
Редактор текста с помощью модели DOM
|
DOM - это не через textarea, а через div с параметром contenteditable:
<html><body><div contenteditable="true" style="width:70ex; height:9ex; border:2px black solid; padding:4px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa commodi aut, eaque, vitae assumenda, pariatur illo modi ipsam quis totam, itaque. Distinctio modi illum, consectetur quam labore incidunt dicta adipisci?</div>
<label><input type="checkbox" value="font-weight:bold;">Bold</label>
<label><input type="checkbox" value="text-decoration:underline;">Underline</label>
<label><input type="checkbox" value="font-style:italic;">Italic</label>
<label><input type="radio" name="pos" value="text-align:left;">Left</label>
<label><input type="radio" name="pos" value="text-align:right;">Right</label>
<label><input type="radio" name="pos" value="text-align:justify">Justify</label>
</body></html>
|
|
21.04.2020, 08:03
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
|
|
21.04.2020, 14:38
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Белый шум, а то, что в это поле можно вставить весь форум... или кнопки из-под поля... Это тоже входит в планы? Я к тому, что в программах редактирования текстов обычно нельзя скопировать интерфейс программы, чтобы его вставить в поле и редактировать. Это очень странно, если такое возможно (как у вас)!
laimas, a lot of laughs, по твоей ссылке можно найти редактор, в котором можно выделить кнопки и вставить их для редактирования.
Последний раз редактировалось Malleys, 21.04.2020 в 14:45.
|
|
21.04.2020, 15:06
|
|
Интересующийся
|
|
Регистрация: 25.03.2020
Сообщений: 17
|
|
|
рони, то что нужно, а можно сделать чтоб значения применялись без нажатия на кнопку?
|
|
21.04.2020, 15:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Rudman,
|
Сообщение от рони
|
onsubmit
|
oninput
|
|
21.04.2020, 15:22
|
|
Интересующийся
|
|
Регистрация: 25.03.2020
Сообщений: 17
|
|
|
рони, cпасибо
|
|
21.04.2020, 15:38
|
|
Профессор
|
|
Регистрация: 19.01.2012
Сообщений: 505
|
|
|
Сообщение от Malleys
|
|
Белый шум, а то, что в это поле можно вставить весь форум... или кнопки из-под поля... Это тоже входит в планы? Я к тому, что в программах редактирования текстов обычно нельзя скопировать интерфейс программы, чтобы его вставить в поле и редактировать.
|
А вы предлагаете сделать всю страницу некопируемой / невыделяемой?
|
Сообщение от Malleys
|
|
Это очень странно, если такое возможно (как у вас)!
|
Вы как будто интернет впервые увидели и никогда не пользовались формой ответа на данном форуме...
К тому же, это был ответ (далеко не исчерпывающий) на конкретный вопрос на форуме, а не продакшен-решение. |
|
21.04.2020, 16:37
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Белый шум, вы можете задавать ещё много философских и метафизических вопросов... Однако у рони всё в порядке! И его даже похвалили!
|
|
|
|
