插入符号未显示在空 iframe 中

Question

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

$.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

    });

});