我正在编写一个 GUI 扩展,它基本上将选定的文本包装在特定的 DIV 中。我有用 DIV 封装的文本,但遇到了一些障碍......
当用户没有选择特定的文本时,我假设意图是包装最近的 HTML 元素
htmlSelectedNode = target.editor.getSelectedHTMLElement()
这一切似乎工作正常,我将 HTML 元素传递到我的扩展中。经过一些操作后,我应用了 HTML,但它在前一个元素中注入了新的 HTML - 而不是替换它......
是否可以“选择” HTML 元素 - 我可以看到 a.focus()
和 a.setCapture()
但这些似乎不起作用 - 我想理想的做法是使用从“当前元素”中选择元素时应用的相同功能" 功能区栏上的下拉菜单,但我未能成功找到与此下拉菜单关联的 onclick/select 方法。
只是为了澄清......举个例子......
如果文本是
<div class="notrelevant"><p>test1</p><p>this is an example</p></div>
并且用户在“is”中的 i 和 s 之间插入了光标,我希望 GUI 预先选择最近的 HTML 元素 - 在这种情况下,最终结果将是......
<div class="notrelevant"><p>test1</p><div class="INJECTED_CORRECTLY"><p>this is an example</p></div></div>
编辑: 为了完整起见,我已经包含了提交事件,我用来(重新)将 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's likely not required
if (htmlSelectedNode.attributes["class"] != null)
htmlSelectedNode.removeAttribute("class");
//TODO: test this - it's 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);