Подтвердить что ты не робот

Javascript webkit-fake-url

Id Возможно, когда изображение (например) вставлено из буфера обмена в область содержимого редактируемого веб-сайта, а исходный код выглядит следующим образом:

webkit-fake-url://DCAC99B9-BA40-4BA7-A419-9C60AAB081DA/image.png

чтобы иметь возможность получить доступ к изображению через javascript для отправки обратно на сервер вместе с текстом?

Ответ 1

Очевидно, вы можете использовать любую абстракцию для прослушивателей событий, которые вам нравятся; Я предоставляю неабстрактную версию; это также исключает IE < 9

if('addEventListener' in editableElement) {
    editableElement.addEventListener('paste', function(e) {
        // First two conditionals should weed out browsers which
        // don't allow access to pasted content
        if(('clipboardData' in e) && ('types' in e.clipboardData) &&
            e.clipboardData.types.indexOf('public.url') > 1) {
            e.target.ownerDocument.execCommand('insertImage', null,
                e.clipboardData.getData('public.url'));
            e.preventDefault();
            e.stopPropagation();
        }
    }, false);
}

При работе со странностями в пачках WebKit рекомендуется проверить событие вставки clipboardData:

console.dir(eventObj.clipboardData);

Но по моему опыту, Web Inspector, кажется, проверяет живой объект в памяти на момент отображения консоли, а не на объект в то время и в области console.dir. К этому моменту событие paste закончится, и доступ к буфере обмена будет заблокирован, поэтому свойство types будет null, и фактические данные буфера обмена будут скрыты. Но в вашем случае вы можете сделать это, чтобы лучше понять, какие типы доступны и какими будут их результаты:

for(var i = 0; i < eventObj.clipboardData.types.length; i++) {
    console.log(eventObj.clipboardData.types[i] + ':',
        eventObj.clipboardData.getData(eventObj.clipboardData.types[i]));
}

Я потратил больше времени, чем я хотел бы признать отладку clipboardData в браузерах WebKit. Надеюсь, это поможет!