特定の DIV で選択したテキストを本質的にラップする GUI 拡張機能を作成しています。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);