Question

我有问题。我有一个iframe（可编辑），当我点击按钮时，我将创建一个链接。所以这不是问题。但是，在此之后我停留在“链接”模式。我在FireFox中只有这个问题。怎么了。很多。

index.php中的JavaScript函数

    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>

所以，当我用图像创建链接时，我会保持“超链接”模式。仅限FireFox。所以我可以写一个普通的文本，但它就像一个超链接。

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

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

您可以删除不再需要的实例，即文本环绕的zwnjs：

从onkeyup延迟。
保存或导出内容时。
当用户重新调整插入符号时。

注意：如果放置时间过长，用户可能会发现他们的存在，或至少发现一种奇怪的行为。例如，如果您在新插入的链接后写入一些文本，但随后决定删除该文本和链接，则在按住删除键时会注意到一个字符暂停。因此，最好在不再需要它们时立即删除它们。

下面你会找到一个工作演示。我的代码没有使用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

2 个答案: