Форум PHP программистов -> Как вместо тегов применять стиль в текстовом поле?

Как вместо тегов применять стиль в текстовом поле?

Подписка на тему | Сообщить другу | + закладки | Версия для печати

Kuzma92	۩ [x] Дата
Пользователь Профиль Группа: Пользователь Сообщений: 81 Пользователь №: 46556 На форуме: 1 год, 13 дней Карма:	Здравствуйте уважаемые специалисты. Помогите, пожалуйста, реализовать дополнительный функционал к тому что уже есть. У меня есть простое текстовое поле 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); } } Но как сделать так, чтобы при клике, например на курсив, выделенный текст не оборачивался в теги, а выделялся курсивом? При этом необходимо, чтобы значение из текстового поля записывалось в файл вместе с тегами. Помогите, пожалуйста, понятия не имею как это реализовать.

brevis	Дата
Здесь живет Профиль Группа: Форумчанин Сообщений: 690 Пользователь №: 39616 На форуме: 10 лет, 10 месяцев, 6 дней Карма: 71	Тут наверное нужен wysiwyg. Вот тут можно выбрать: https://github.com/JefMari/awesome-wysiwyg-editors -------------------- Чатик в телеге

Kuzma92	۩ Дата
Пользователь Профиль Группа: Пользователь Сообщений: 81 Пользователь №: 46556 На форуме: 1 год, 13 дней Карма:	brevis, спасибо за информацию. Почитал, ознакомился. Все эти редакторы слишком объемны для моих скромных потребностей, там много всего лишнего, того чего мне совсем не нужно. А для моих нужд необходимо только три стиля - жирность, курсив и подчеркивание. Уважаемые специалисты, буду очень признателен, если поможете с самым коротким, простым и легким решением, если конечно это вполне реально реализуемо.

brevis

Дата

Здесь живет

Профиль
Группа: Форумчанин
Завсегдатай форума

Сообщений: 690
Пользователь №: 39616
На форуме: 10 лет, 10 месяцев, 6 дней
Карма: 71

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Минимальный WYSIWYG</title>
    <style>
        #editor {
            border: 1px solid #ccc;
            min-height: 200px;
            padding: 10px;
        }
        #toolbar button {
            margin: 5px;
            padding: 5px 10px;
        }
    </style>
    <script>    
        function formatText(command) {
            document.execCommand(command, false, null);
        }
    </script>
</head>
<body>

<div id="toolbar">
    <button onclick="formatText('bold')"><b>B</b></button>
    <button onclick="formatText('italic')"><i>I</i></button>
    <button onclick="formatText('underline')"><u>U</u></button>
</div>

<div id="editor" contenteditable="true">
    Это минимальный WYSIWYG
</div>

</body>
</html>

--------------------

Чатик в телеге

Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда

Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда

Kuzma92	۩ Дата
Пользователь Профиль Группа: Пользователь Сообщений: 81 Пользователь №: 46556 На форуме: 1 год, 13 дней Карма:	brevis, здравствуйте. Да, спасибо вам, это очень хороший вариант. И если еще добавить html: <form id="form"> <textarea id="demo" name="text" style="display:none;"></textarea> <input type="button" value="Submit" onclick="submitForm()"> </form> и JS: function submitForm() { demo.value = editor.innerHTML; alert("Передаем:\n" + demo.value); } то задача решается. Один только вопрос, пожалуйста, подскажите. При переходе на каждую новую строку передаются данные так: Это минимальный WYSIWYG <div>Это новая строка</div> То есть каждая новая строка берется в теги <div>. Но как сделать так, чтобы каждая новая строка не бралась ни в какие теги, не переносилась на новую строку, а только отделялась тегом <br> ? Это сообщение отредактировал Kuzma92 - 15.08.2024 - 17:44

brevis	Дата
Здесь живет Профиль Группа: Форумчанин Сообщений: 690 Пользователь №: 39616 На форуме: 10 лет, 10 месяцев, 6 дней Карма: 71	Можно таким подходом: document.querySelector('[contenteditable]').addEventListener('keypress', function(event) { if (event.key === 'Enter') { event.preventDefault(); document.execCommand('insertHTML', false, '<br><br>'); } }); -------------------- Чатик в телеге

Kuzma92	۩ Дата
Пользователь Профиль Группа: Пользователь Сообщений: 81 Пользователь №: 46556 На форуме: 1 год, 13 дней Карма:	brevis, да, супер классно! Огромное вам спасибо, очень помогли. Реально вам искренне благодарен!