Редактор текста с помощью модели 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> |
Цитата:
<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,
Цитата:
|
рони, cпасибо
|
Цитата:
Цитата:
К тому же, это был ответ (далеко не исчерпывающий) на конкретный вопрос на форуме, а не продакшен-решение. |
Белый шум, вы можете задавать ещё много философских и метафизических вопросов... Однако у рони всё в порядке! И его даже похвалили!
|
Часовой пояс GMT +3, время: 12:52. |