Javascript 包含dom图像的contentEditable中的插入符号定位_Javascript_Contenteditable_Caret

Javascript 包含dom图像的contentEditable中的插入符号定位

javascript

Javascript 包含dom图像的contentEditable中的插入符号定位,javascript,contenteditable,caret,Javascript,Contenteditable,Caret,我在内容可编辑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"&

我在内容可编辑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>


var init=函数（）{//初始化
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=函数（数据）{//设置innerHTML的快捷方式
如果（数据类型==“未定义”）
返回这个.corbody.html（）；
this.curBody.html（数据）；
返回美元（此）；
};
var emoji=函数（数据）{//replace every:）为图像
返回数据。替换（'：）'，''；
};
var self=这个；
this.editor.contents（）
var me=$（此）；
setTimeout（函数（）{//timeout），以便iframe包含最后输入的字符
var sel=self.editor.curWin.getSelection（）；
var偏移=选择焦点偏移；
html（emoji（me.html（））；
var body=$（self.editor.curDoc.find（'body'）.get（0）；
sel.collapse（body，offset）；//这里是我设置定位的地方
返回；
}, 100);
返回true；
});
};

StackOverflow要求我添加更多的上下文来解释代码部分，但对我来说这似乎很清楚。很抱歉添加这么多“酷故事兄弟”的评论，但我看不出还有什么比这更能解释的了。不管怎样，我愿意接受任何问题。

快速修复。。。检查是否正在进行更换。。。如果正在制作，则重新调整插入符号。否则就别管它了

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();

var init=function（）{//初始化
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=函数（数据）{//设置innerHTML的快捷方式
if（typeof data==“undefined”）返回此.corbody.html（）；
this.curBody.html（数据）；
返回美元（此）；
};
var emoji=函数（数据）{//replace every:）为图像
var tmp=数据；
tmp=tmp.replace（'：）'，''；
如果（tmp！==数据）{
返回[true，tmp]；
}
返回[false，tmp]；
};
var self=这个；
this.editor.contents（）
var me=$（此）；
var res=emoji（me.html（））；
if（res[0]）{
setTimeout（function（）{//timeout），以便iframe包含最后输入的字符
var sel=self.editor.curWin.getSelection（）；
var偏移=选择焦点偏移；
html（res[1]）；
var body=$（self.editor.curDoc.find（'body'）.get（0）；
sel.collapse（body，offset）；//这里是我设置定位的地方
返回；
}, 100);
}
返回true；
});
};
init（）；

这行吗？有什么问题？如果没有问题，也许这对codereview.stackexchange.com或问题的筛选更好？它正在工作，但插入符号的定位在添加表情符号后就非常混乱。这才是真正的问题。你能通过jsfiddle或屏幕截图告诉我们吗？试着键入“是：）它是一团糟”哇！美好的做得好！然而，两个小虫子仍然在这里。如果您尝试键入“ok:）it is:）working:）”然后转到上一个单词只需键入：），则carret将弄乱其位置。另一个错误是，在键入之后，不再使用图像替换：），但想法仍然是一样的。如果没有替换，不要碰插入符号，我很快就把它拼凑起来了。