Чтобы добавить id к активному div при вставке курсора внутри contenteditable="true", вам необходимо использовать JavaScript для обработки события нажатия клавиши. Ниже приведен подробный пример кода, объясняющий, как это сделать:
1. В первую очередь, вам нужно добавить атрибут contenteditable="true" к вашему div элементу, чтобы позволить пользователю редактировать его содержимое:
<div contenteditable="true" id="myDiv"></div>
2. Далее, вы должны добавить обработчик событий для отслеживания нажатия клавиши:
document.getElementById("myDiv").addEventListener("keydown", function(event) { // код обработчика событий будет здесь });
3. Внутри обработчика событий, вы должны проверить, была ли нажата клавиша "Вставить" (keyCode 86) в сочетании с клавишей "Control" (keyCode 17) или "Command" (keyCode 91) для Mac:
document.getElementById("myDiv").addEventListener("keydown", function(event) { if ((event.keyCode === 86 && event.ctrlKey) || (event.keyCode === 86 && event.metaKey)) { // код обработчика событий будет здесь } });
4. Внутри этого условия, вы можете использовать document.execCommand('insertHTML', false, 'HTML код')
для вставки HTML кода в активный div. Также, вы можете добавить id к вставляемому содержанию:
document.getElementById("myDiv").addEventListener("keydown", function(event) { if ((event.keyCode === 86 && event.ctrlKey) || (event.keyCode === 86 && event.metaKey)) { var html = "Ваш HTML код с добавлением id к вставляемому содержанию"; document.execCommand('insertHTML', false, html); } });
Вам нужно заменить "Ваш HTML код с добавлением id к вставляемому содержанию" на реальный код, который вы хотите вставить с добавленным id. Например, можно добавить параграф с определенным id:
var html = "<p id='myParagraph'>Ваш текст</p>";
Таким образом, при вставке курсора внутри contenteditable="true" div и нажатии комбинации клавиш "Ctrl+V" или "Command+V" для Mac, будет вставлен нужный HTML код с добавленным id.
Надеюсь, это поможет.