Как поменять элемент в div contenteditable используя Select

02.07.2019, 09:30. Показов 819. Ответов 0

Метки javascript для начинающих, javascript.html, javascripts, jquery курсор, javascript (Все метки)

Студворк — интернет-сервис помощи студентам

Здравствуйте, я сейчас делаю текстовой редактор и когда выбираю тип элемента, P, H2 или H3, то курсор с div contenteditable уходит, в итоге не чего не меняется, как это исправить?

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div>
<select name="" id="selectFormat">
  <option selected value="" class="p">P</option>
  <option value="" class="h2">h2</option>
  <option value="" class="h3">h3</option>
</select>
<button class="bold">жирный</button>
<button class="italic">курсив</button>
</div>
 
<div contenteditable id="editor-container"></div>

JavaScript:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(".p").on("click", function () { 
  document.execCommand( 'formatBlock', false, 'P' );
})
 
$(".h2").on("click", function () { 
  document.execCommand( 'formatBlock', false, 'H2' );
})
 
$(".h3").on("click", function () { 
  document.execCommand( 'formatBlock', false, 'H3' );
})

Programming

Эксперт

39485 / 9562 / 3019

Регистрация: 12.04.2006

Сообщений: 41,671

Блог

02.07.2019, 09:30

Ответы с готовыми решениями:

Contenteditable div, как менять тип элемента на котором находится курсор
Здравствуйте, я сейчас делаю свой текстовой редактор или WYSIWYG, сделал кнопку которая добавляет заголовок второго уровня, но она не...

Курсор в div contenteditable
Здравствуйте! У меня есть такой див <div contenteditable="true" id="area"></div> Каждый раз когда я пишу что-то в нем...

Заменить тег div contenteditable
Доброй ночи! Уже мозг сломал! И интеренет весь перелопатил.... никак нехочет меняться тег <div></div> на <p></p> ...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

inter-admin

Эксперт

29715 / 6470 / 2152

Регистрация: 06.03.2009

Сообщений: 28,500

Блог

02.07.2019, 09:30

Помогаю со студенческими работами здесь

Сбивается курсор в div contenteditable
Здравствуйте! Подскажите, пожалуйста, как изменить текущий код так, чтобы курсор, установленный в div contenteditable, не сбивался, когда...

Установка фокуса в div contenteditable=“true”
Здравствуйте,подскажите,как быть,есть div <div id="editable_zone" contenteditable="true"></div> я в него перемещаю изображения ...

Окно чата со смайлами в div contenteditable=true
Доброе время суток, друзья! Пишу чат с возможностью непосредственной вставки смайлов (а-ля вконтакте). Нашел замечательное решение,...

Запретить печатать в div с contenteditable за пределеами этого элемента
Привет всем, у меня возникла следующая задача: есть div с contenteditable, и у него указана ширина и высота. Проблема в том что когда текст...

Перевод строки при переносе текста из div с contenteditable
Здравствуйте хочу сделать следующие: Пользователь пишет комментарий, в тег div c атрибутом contenteditable="true", если он...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

Наверх