0

我正在用 iframe 制作一个所见即所得的编辑器。我想为突出显示的文本添加样式。现在我做了这样的词。我之所以这么说是因为它的行为有点奇怪，而且并不总是准确的，或者它没有得到正确的词来以某种方式替换为 jquery。但大致。它确实有效。我的第一个问题是为什么会这样。

我的第二个问题是。正如您在代码中看到的那样，当单击框架体时，文本被选中。然后它将选定的文本输出到一个 div 中，我可以通过 features() 在页面上看到它。这就像一个魅力。输出选择完全没有问题。那为什么样式不准确呢？就像我做一个文本h2。未选择的文本也具有相同的样式。

当我改变点击选择。So when selecting takes place in the framebody. 做你的事。但这根本行不通。虽然单击它确实有效。当我说我已经搜索了很多答案时，请相信我。可能是我没有正确阅读或理解它。但这无疑让我汗流浃背:)。我认为应该得到一个很好的正确答案。而不是 20 个令人困惑的答案。

 $(document).ready(function() 
    {
        var id = createIframe();
        var iFrame = document.getElementById(id);   

        iframebody = $('#'+id).contents().find('body');


        $(iframebody).click(function() 
            {   
                    selectedText = getSelectedText(iFrame);     

                features(iFrame);       
            });
    }); 

    function actions(frame,txt)
    {
    $('#bold').click(function()
    {
        iFrameBody = frame.contentWindow.document.body;

        boldStyle = $(iFrameBody).html().replace(txt, '<b>' + txt + '</b>');

        $(iFrameBody).html(boldStyle);
    }); 

    $('#italic').click(function()
    {
        iFrameBody = frame.contentWindow.document.body;

        italicStyle = $(iFrameBody).html().replace(txt, '<i>' + txt + '</i>');

        $(iFrameBody).html(italicStyle);
    });

    $('#h1').click(function()
    {
        iFrameBody = frame.contentWindow.document.body;

        h1Style = $(iFrameBody).html().replace(txt, '<h1>' + txt + '</h1>');

        $(iFrameBody).html(h1Style);
    });
    }

    function features(frame)
    {
        if(henksFeatures.selectionPreview === true)
        {
            $("#selected-output").text(getSelectedText(iFrame)).show(); 
        }
    }
4

1 回答 1

0

好的，所以不要使用 jquery 方法替换。我发现 javascript 的 execCommand 与 iframe 配合得非常好。所以不再有选择问题。解决了

于 2013-05-31T12:22:18.523 回答