Question

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

我的第二个问题是。正如您在代码中看到的那样，当单击框架体时，文本会被选中。然后它将所选文本输出到div中，我可以通过features（）在页面上看到它。这就像一个魅力。输出选择完全没问题。那为什么造型不准确？就像我制作文字h2一样。未选择的文本也会获得相同的样式。

当我更改单击以选择时。所以当选择发生在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(); 
        }
    }

Answer 1

好的，而不是使用jquery方法替换。我发现javascript的execCommand与iframe一起令人印象深刻。所以没有选择问题了。解决

iframe jquery行为

1 个答案: