Javascript-форум - Редактор текста с помощью модели DOM

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Редактор текста с помощью модели DOM (https://javascript.ru/forum/css-html/80044-redaktor-teksta-s-pomoshhyu-modeli-dom.html)

Редактор текста с помощью модели 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] + ";");
	}
}

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>

Цитата:

Сообщение от 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>

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

laimas, a lot of laughs, по твоей ссылке можно найти редактор, в котором можно выделить кнопки и вставить их для редактирования.

рони, то что нужно, а можно сделать чтоб значения применялись без нажатия на кнопку?

Rudman,

Цитата:

Сообщение от рони

~~onsubmit~~

oninput

рони, cпасибо

Цитата:

Сообщение от Malleys

Белый шум, а то, что в это поле можно вставить весь форум... или кнопки из-под поля... Это тоже входит в планы? Я к тому, что в программах редактирования текстов обычно нельзя скопировать интерфейс программы, чтобы его вставить в поле и редактировать.

А вы предлагаете сделать всю страницу некопируемой / невыделяемой?

Цитата:

Сообщение от Malleys

Это очень странно, если такое возможно (как у вас)!

Вы как будто интернет впервые увидели и никогда не пользовались формой ответа на данном форуме...

К тому же, это был ответ (далеко не исчерпывающий) на конкретный вопрос на форуме, а не продакшен-решение.

Белый шум, вы можете задавать ещё много философских и метафизических вопросов... Однако у рони всё в порядке! И его даже похвалили!

Malleys,
Вопрос был у вас, у меня был ответ в форме вопроса.

А у топикстартера постановка вопроса была двусмысленной (пример расходился с текстовой частью вопроса) - ему и дали два варианта ответа. Один из ответов оказался тем, что он и имел ввиду. Это стандартная ситуация для форума, не вижу проблемы. Разве что можно позавидовать телепатическим способностям рони :victory: