Вставить HTML-тег для выделенного текста внутри тега абзаца
Я пытаюсь добавить новый элемент для выбранного элемента в тег абзаца. Фрагмент кода HTML, как показано ниже:
<div class = "parent-bodytext">
<p>Hello</p>
<p>This one is</p>
<p>Sample Text</p>
</div>
Итак, в приведенном выше фрагменте я выбрал «одно» слово из второго тега P и, используя любое событие, я пытаюсь добавить элемент к этому выделенному тексту, чтобы результат был таким, как показано ниже:
<div class = "parent-bodytext">
<p>Hello</p>
<p>This <strong>one</strong> is</p>
<p>Sample Text</p>
</div>
Итак, как можно добавить этот вновь созданный «сильный» элемент для выделенного выделенного текста?
@Justcode, если я выберу любую кнопку, чтобы к выделенному тексту был добавлен сильный тег.
Возможный дубликат Как сделать выделенный текст полужирным / курсивом / подчеркнутым в javascript?
Я не уверен на 100%, но я считаю, что невозможно добавить сильный тег с выделенным текстом, если вы хотите сделать это, вам нужно использовать какой-нибудь текстовый редактор, например ckeditor ckeditor.com, и использовать css, чтобы скрыть границу и т.д., чтобы он выглядел как исходная страница.
@YaseenAhmad Я пробую эту часть только в CKEditor. Вы знаете, как этого добиться с помощью CKEditor?
@AvinashJadhav см. Эту ссылку jsfiddle.net/pq8yg5ke дайте мне знать, если вам понадобится дополнительная помощь.
@YaseenAhmad, это именно то, что я ищу. Не могли бы вы уточнить код javascript? Я там ничего не нашел.
Я отвечаю на вопрос всем доступным кодом, но это поможет вам. удачи.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Обновлено: удалена зависимость jQuery. Вы можете добиться этого с помощью CSS. Во-первых, вам нужно разделить каждое слово пробелом. Затем добавьте класс strong в диапазоне, из которого возникло событие.
window.onload = function () {
document.getElementsByClassName("parent-bodytext")[0].onclick = function(e) {
var tgt = e.target;
if (tgt && tgt.nodeName === 'SPAN') {
tgt.classList.add('strong');
}
};
};.strong{
font-weight: bold;
}<div class = "parent-bodytext">
<p><span>Hello</span></p>
<p><span>This</span> <span>one</span> <span>is</span></p>
<p><span>Sample</span> <span>Text</span></p>
</div>Хороший ответ, но он хочет добавить сильного только с выделенным текстом, а не с полным текстом.
Возможно ли это без jquery? Использование базового API HTML, например element.innerHTML, document.getSelection (), getRangeAt (0).
@AvinashJadhav удалить зависимость jQuery.
@YaseenAhmad немного изменил код, теперь класс strong добавляется только к выбранному слову, вы можете запустить фрагмент кода и попробовать.
Вы можете использовать window.getSelection для этой цели
const wrapper = document.getElementsByClassName('parent-bodytext')[0];
wrapper.addEventListener('mouseout', event => {
const selection = window.getSelection();
if (selection.rangeCount) {
const replacement = document.createElement('strong');
replacement.textContent = selection.toString();
const range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(replacement);
}
}); <div class = "parent-bodytext">
<p>Hello</p>
<p>This one is</p>
<p>Sample Text</p>
</div>Вы хотели что-то подобное?
window.onload = () => {
function getSelectionParentElement() {
var parentEl = null,
sel;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
parentEl = sel.getRangeAt(0).commonAncestorContainer;
if (parentEl.nodeType != 1) {
parentEl = parentEl.parentNode;
}
}
} else if ((sel = document.selection) && sel.type != "Control") {
parentEl = sel.createRange().parentElement();
}
return parentEl;
}
function getSelectedText() {
var text = "";
if (typeof window.getSelection != "undefined") {
text = window.getSelection().toString();
} else if (
typeof document.selection != "undefined" &&
document.selection.type == "Text"
) {
text = document.selection.createRange().text;
}
return text;
}
const makeBold = (selectStart, selectEnd, length, text)=>{
let replacedText = `<strong>${text.substr(selectStart, length)}</strong>`;
let textHalfA = text.substr(0, selectStart);
let textHalfB = text.substr(selectEnd, text.length - 1);
return textHalfA + replacedText + textHalfB;
};
function handleMouseUp() {
// the selected text
const text = getSelectedText();
// the length of the selected content
const selectedTextLength = text.length;
// the parent of the selected content
let parent = getSelectionParentElement();
// the entire content of the parent
let parentText = parent.innerHTML;
// where the user's selection starts
let selectStart = window.getSelection().getRangeAt(0).startOffset;
// where the user's selection ends
let selectEnd = window.getSelection().getRangeAt(0).endOffset;
if (parent) {
parent.innerHTML = makeBold(selectStart, selectEnd, selectedTextLength, parentText);
}
}
document.onmouseup = handleMouseUp;
document.onkeyup = handleMouseUp;
};<p>I am a sentence.</p>Также вот ручка :)
Edit: Code's updated. The modification of the selected content should be done correctly now. Although, I have no idea how to deal with a second modification to the already modified element.(I'll update again soon. Unless, OP has an idea ;))
когда я отвечаю, у меня такая же проблема, когда вы выбираете только «A» в тексте, он будет полужирным «A» везде в тексте.
Ах. Я пропустил это. Подожди секунду
@YaseenAhmad исправил это :) Я постараюсь исправить проблему, о которой я упомянул после школы.
Пожалуйста, объясните подробнее, когда вам нужно добавить сильный тег