Я пишу расширение GUI, которое, по сути, переносит выделенный текст в определенный DIV. У меня есть текст, который инкапсулирован с помощью DIV, но немного ударил блок...
Когда пользователь не выбрал конкретный фрагмент текста, я предполагаю, что это намерение обернуть ближайший элемент HTML
htmlSelectedNode = target.editor.getSelectedHTMLElement()
Все это работает нормально, и я передаю элемент HTML в мое расширение. После некоторых манипуляций я применяю HTML, но он вводит новый HTML внутри предыдущего элемента - вместо его замены...
Можно ли "выбрать" элемент HTML - я могу видеть .focus() и .setCapture(), но это, похоже, не делает трюк - я думаю, что идеальным было бы использование той же функциональности, что и применялось при выборе элемента из раскрывающегося списка "Текущий элемент" на панели ленты, но мне не удалось найти метод onclick/select, связанный с этим выпадающим списком.
Просто уточнить... с примером...
если текст был
<div class="notrelevant"><p>test1</p><p>this is an example</p></div>
и пользователь вставил курсор между я и s в 'is' Я хочу, чтобы GUI предварительно выбирал ближайший элемент HTML - в этом случае конечный результат был бы...
<div class="notrelevant"><p>test1</p><div class="INJECTED_CORRECTLY"><p>this is an example</p></div></div>
EDIT: Для полноты я включил событие отправки, которое я использую для (повторного) вставки HTML в RTF (хотя я не думаю, что было бы целесообразно манипулировать выбором в этот момент и предпочло бы "отобрать" текст выше, используя более "стандартную", существующую функциональность Tridion...)
$evt.addEventHandler(popup, "submit",
function DateHighlighter$execute$onPopupSubmitted(event) {
var el = event.data.html;
if (el) {
if (htmlSelectedNode != null) {
var lDocument = htmlSelectedNode.ownerDocument;
var lTempContainer = lDocument.createElement("span");
try {
lTempContainer.innerHTML = el || "";
}
catch (err) {
//assigning a value to innerHTML can be sensitive to browser but the error is fine to be ignored
}
var parentNode = htmlSelectedNode.parentNode;
parentNode.replaceChild(lTempContainer, htmlSelectedNode);
//Move to the new element
var lTextRange = $dom.createTextRange(lTempContainer);
$dom.moveRangeToElement(lTextRange, lTempContainer);
//Select and remove the temporary element
$dom.selectRange(lTextRange, $dom.getSelection(lDocument));
$dom.removeNode(lTempContainer, false);
}
else {
// Insert new created element (DIV)
target.editor.applyHTML(el);
}
}
else {
//TODO: test this - it likely not required
if (htmlSelectedNode.attributes["class"] != null)
htmlSelectedNode.removeAttribute("class");
//TODO: test this - it likely not required
if (htmlSelectedNode.attributes["ondblclick"] != null)
htmlSelectedNode.removeAttribute("ondblclick");
//TODO: the node isn't removed - leaves the empty <div>...
// - delete the node and then apply the node2.outerHTML? - or follow parentnode pattern above!
var htmlSelectedNode2 = htmlSelectedNode.innerHTML;
htmlSelectedNode = htmlSelectedNode2;
}
//Refreshes the Design view
target.editor.setCurrentView("Source");
target.editor.setCurrentView("RichText");
target.item.closeActivePopup();
});
$evt.addEventHandler(popup, "unload", DateHighlighter$execute$onPopupCanceled);