createElement("a") - FireFox JavaScript

Question

我有问题。我有一个 iframe（可编辑），当我单击该按钮时，我将创建一个 link。所以这不是问题。但是，在此之后我停留在 "link" 模式。我在 FireFox 中只有这个问题。怎么了。非常感谢。

JavaScript index.php

中的函数

    function insertLink(verlinkung,text) 
    {
        var doc = document.getElementById("frame").contentWindow.document;      
        var sel = doc.getSelection();

        if (sel.rangeCount > 0)
        {
            var range= sel.getRangeAt(0);

myParent=document.getElementById("frame").contentWindow.document.body;
            alink=document.createElement("a");

            text= document.createTextNode(text);

            alink.href = verlinkung;
            if (document.getElementById('check_underline').checked == false)
            {
                alink.setAttribute("style","text-decoration: none;");
            }
            else
            {
                alink.setAttribute("style","text-decoration: underline;");
            }
            alink.appendChild(text);

            myParent.appendChild(alink);
            range.insertNode(alink);

        }
    }

-- 在与 javascript 函数相同的站点中

<img src ='./images/toolbar/plus.png' onMouseDown = "insertLink(document.getElementById('link_href').value,document.getElementById('link_text').value);">

在Index.php

<iframe src = './editor.php' id = 'frame' class = 'iframe_design'>

editor.php 中 iframe 的内容：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

    <script language = 'JavaScript'>
        function lade()
        {
            document.body.contentEditable='true';
            document.designMode='on';
            void 0;
}

</head>  

<body style = 'font-family: verdana; font-size: small;'>

</body>

</html>

因此，当我用图像 Click 创建 Link 时，我停留在 "hyperlink" 模式。仅在 FireFox 中。所以我可以写一个普通的文本，但它像一个 hyperlink.

Answer 1

你正在做的应该有用。

试试这个简化版本：

<div id="x">A link should appear here: </div>

<script>
    var a = document.createElement("a");
    var text = document.createTextNode("I'm a link");
    a.setAttribute("style", "text-decoration: underline;");
    a.setAttribute("href", "https://github.com/adrianblynch?tab=repositories");
    a.appendChild(text);
    document.getElementById("x").appendChild(a);
</script>

我在 Chrome 和 Firefox 中工作。

Answer 2

到目前为止我能找到的唯一解决方案是确保在 link 之后有一些额外的内容，但仍在同一父级中，即 <p> 或 body标签。我通过在 hyperlink 之后直接附加一个不可见字符 &zwnj 来完成此操作。这解决了您当前遇到的问题，但是使用它您必须设计一种干净、无干扰的方法来删除这些特殊字符。

您可以删除不再需要的实例，即被文本包围的 zwnjs，或者：

在 onkeyup 的延迟之后。
当您保存或导出内容时。
当用户重新聚焦插入符号时。

Note: if left for too long it is possible for the user to discover their presence, or at least notice a strange behaviour. For example, if you write some text after a newly inserted link, but then decide to delete that text and the link you'll notice a one character pause when holding down the delete key. So it would be best to remove them as soon as they are no longer required.

您将在下面找到一个工作演示。我的代码没有使用 iframe，但您可以轻松地将其修改回以那种方式运行。

function insertLink(verlinkung, text) {
  var doc = document, sel = doc.getSelection();
  if ( sel.rangeCount > 0 ) {
    var range = sel.getRangeAt(0), 
        myParent = document.getElementById('editable'),
        docFragment = range.createContextualFragment('<a href="' + verlinkung + '">' + text + '</a>&zwnj;');
    range.insertNode(docFragment);
  }
}

html, body { height: 100%; }

.editable {
  width: 500px;
  height: 400px;
  border: 1px dotted gray;
  padding: 10px;
}

button {
  background: orange;
  border-radius: 10px;
  border: 0;
  padding: 8px;
  margin-top: 8px;
}

p {
  padding: 0;
  margin: 0;
  margin-bottom: 8px;
}

<div id="editable" class="editable" ContentEditable="true">
<p>
Focus your caret at the end of this text and click "Add Link", then place the caret after the new link and type some text. The text should not be part of the link.
</p>
<p>
The only way I could stop Firefox from placing the caret inside the link's range, and so not inserting new content inside it, was to make sure there was some content after it.
</p>
<p>
Using <strong>&amp;zwnj;</strong> &mdash; <em>zero width non-joiner</em> &mdash; means that you can have an invisible character, that isn't treated as whitespace (and so isn't automatically removed). The downside to this method is that you'll need to find a point where you can safely remove these special characters. You could wait until you are saving/exporting your editor content &mdash; but if you wait until then it is possible the user will notice their existence when deleting characters.
</p>
</div>
<button onclick="insertLink('#test', 'Test')">Add Link</button>

createElement("a") - FireFox JavaScript

createElement("a") - FireFox JavaScript

javascript

hyperlink

createelement