Tridion RTF文本选择

Question

我正在编写一个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>

并且用户将光标插入'和'中的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);

Answer 1

所以我找到了CurrentElement选择,并看到明显的明显setSelectedHTMLElement.不知道我怎么错过了,不过很可惜这里是低于...的评论请注意-确保该方法是可用的(如果用户所选文本的字符串并不直接等同于一个HTML元素的setSelectedHTMLElement方法将失败,并删除我们用户选择(因此意味着GUI扩展.aspx不能(重新)注入新的HTML ...

//if there's no tagname then the setSelected will fail and remove the (non-element based) select the user has done
if (htmlSelectedNode.nodeName && htmlSelectedNode.nodeName != '#text') { 
    //unlikely to get #text here as it's the htmlSelectedNode.commonAncestorContainer.nodeName
    $log.message(logt + 'selecting the htmlSelectedNode.nodeName:' + htmlSelectedNode.nodeName);
    target.editor.setSelectedHTMLElement(htmlSelectedNode);
}
else {
    $log.message(logt + 'no htmlSelectedNode.nodeName - user probably selected incomplete element:');
}