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 に答える