Question

我正在尝试使用iframe实现自己的富文本编辑器。但是，当我在空的富文本编辑器中单击时，插入符号或鼠标光标不会显示。在检查谷歌后，我发现我们需要事先在iframe中添加一些html，例如'break tag。但是我的下面的代码只会将break标记添加到第一个富文本编辑器而不是第二个。不确定我在这里做错了什么.......

$.fn.createRichTextEditor = function(width,height="auto") {
    var iframeDocument;

    var iframeDocumentId = this.attr("id") + "-rte-editor";

    var newHtml =   "<div id='rte-" + iframeDocumentId + "' class='rte'>" +
                    "<ul class='rte-toolbar'>" +
                    "<li id='bold'><button id='rte-boldBtn-" + iframeDocumentId + "' class='rte-button' value='bold' title='Bold'></button></li>" +
                    "<li id='italic'><button id='rte-italicBtn-" + iframeDocumentId + "' class='rte-button' value='italic' title='Italic'></button></li>" +
                    "<li id='underline'><button id='rte-underlineBtn-" + iframeDocumentId + "' class='rte-button' value='underline' title='Underline'></button></li>" +
                    "<li id='createLink'><button id='rte-createLinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='createLink' title='Link'></button></li>" + 
                    "<li id='unlink'><button id='rte-unlinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='unlink' title='Unlink'></button></li>" + 
                    "</ul>" +
                    "<iframe class='rte-iframe' id='" + iframeDocumentId + "' frameBorder='0'></iframe>" +
                    "</div>";

    this.after(newHtml);
    this.css('display', 'none');

    var iframe = document.getElementById(iframeDocumentId);
    var rte = iframe.parentElement;
    $(rte).css('width', width);
    $(rte).css('border', '1px solid #ccc');

    $(iframe).on('load', function() {
        $(iframe).width("100%");
        $(iframe).height(height);
        iframeDocument = iframe.contentDocument;    
        iframeDocument.designMode = 'On';
        $(iframeDocument).find('body').html('<br><br/>');

    });

};

Answer 1

您需要遍历插件中的每个匹配元素：

$.fn.createRichTextEditor = function (width, height) {

    this.each(function () {

        // Your code for each element here

    });

});

Caret未在空iframe中显示

1 个答案: