0

我在 contentEditable iframe 中设置插入符号位置时遇到问题，只要我添加一个“:)”表情符号。

你会怎么管理？

这是一个基本模板：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        var init = function () { // initialization

            this.editor = $('#wysiwyg');
            this.editor.curWin = this.editor.prop('contentWindow');
            this.editor.curDoc = this.editor.curWin.document;
            this.editor.curDoc.designMode = "On";
            this.editor.curBody = $(this.curDoc).contents().find('body');
            this.editor.html = function (data) { // shortcut to set innerHTML
                if (typeof data == "undefined")
                    return this.curBody.html();
                this.curBody.html(data);
                return $(this);
            };
            var emoji = function (data) { // replace every :) by an image
                return data.replace(':)', '<img src="http:\/\/dean.resplace.net\/blog\/wp-content\/uploads\/2011\/10\/wlEmoticon-smile1.png"\/>');
            };
            var self = this;
            this.editor.contents().find('body').keypress(function (ev) { // handler on key pressed
                var me = $(this);

                setTimeout(function () { // timeout so that the iframe is containing the last character inputed
                    var sel = self.editor.curWin.getSelection();
                    var offset = sel.focusOffset;

                    me.html( emoji( me.html() ) );

                    var body = $(self.editor.curDoc).find('body').get(0);
                    sel.collapse(body, offset); //here is where i set positionning
                    return;
                }, 100);
                return true;
            });

        };
    </script>
</head>
<body onload="init()">
    <iframe id="wysiwyg"></iframe>
</body>
</html>

StackOverflow 要求我添加更多上下文来解释代码部分，但对我来说似乎很清楚。很抱歉添加这么多“酷故事兄弟”评论，但我看不出我能解释更多。无论如何，我对任何问题持开放态度。

4

1 回答 1

1

快速修复...检查是否正在更换...如果正在更换，则重新调整插入符号。否则就这样吧。

var init = function() { // initialization
    this.editor = $('#wysiwyg');
    this.editor.curWin = this.editor.prop('contentWindow');
    this.editor.curDoc = this.editor.curWin.document;
    this.editor.curDoc.designMode = "On";
    this.editor.curBody = $(this.curDoc).contents().find('body');
    this.editor.html = function(data) { // shortcut to set innerHTML
        if (typeof data == "undefined") return this.curBody.html();
        this.curBody.html(data);
        return $(this);
    };
    var emoji = function(data) { // replace every :) by an image
        var tmp = data;
        tmp = tmp.replace(':)', '<img src="http:\/\/dean.resplace.net\/blog\/wp-content\/uploads\/2011\/10\/wlEmoticon-smile1.png"\/>');
        if (tmp !== data) {
            return [true, tmp];
        }
        return [false, tmp];
    };
    var self = this;
    this.editor.contents().find('body').keypress(function(ev) { // handler on key pressed
        var me = $(this);
        var res = emoji(me.html());
        if (res[0]) {
            setTimeout(function() { // timeout so that the iframe is containing the last character inputed
                var sel = self.editor.curWin.getSelection();
                var offset = sel.focusOffset;

                me.html(res[1]);

                var body = $(self.editor.curDoc).find('body').get(0);
                sel.collapse(body, offset); //here is where i set positionning
                return;

            }, 100);
        }
        return true;
    });

};
init();​
于 2012-05-08T18:14:23.190 回答