文章/答案/技术大牛

发布

社区首页 >问答首页 >createElement("a") - FireFox JavaScript

问createElement("a") - FireFox JavaScript
EN

Stack Overflow用户

提问于 2015-04-10 00:43:55

回答 2查看 1.2K关注 0票数 1

我有问题。我有一个iframe(可编辑)，当我点击按钮，我将创建一个链接。所以这不是问题所在。但是，在这之后，我仍然保持“链接”模式。我在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>

因此，当我创建一个链接与图像单击，我停留在“超链接”模式。只在FireFox。所以我可以写一个普通的文本，但它像超链接一样工作。

createelement

javascript

hyperlink

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-10 02:54:08

你现在所做的应该是有效的。

试试这个简化的版本：

<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中为我工作。

票数 0

Stack Overflow用户

发布于 2015-04-10 10:27:13

到目前为止，我能找到的唯一解决方案是确保链接之后有一些额外的内容，但仍然在相同的父节点(即<p>或body标记)中。我是通过在超链接后面直接添加一个不可见的字符&zwnj来做到这一点的。这解决了您当前的问题，但使用它，您将必须设计一个干净的，不干扰的方式来删除这些特殊的字符。

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

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

注意:如果离开时间太长，用户可能会发现他们的存在，或者至少注意到一种奇怪的行为。例如，如果您在新插入的链接之后编写了一些文本，然后决定删除该文本和链接，则在按住delete键时会注意到一个字符暂停。因此，当它们不再需要时，最好尽快将它们移除。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29551472

复制

相似问题

问createElement("a") - FireFox JavaScript
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问createElement("a") - FireFox JavaScriptEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问createElement("a") - FireFox JavaScript
EN