Pytanie JavaScript webkit-fałszywy adres URL


Id Jest to możliwe, gdy obraz (na przykład) zostanie wklejony ze schowka do edytowalnego regionu zawartości Webkit, a kod źródłowy wygląda następująco:

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

uzyskać dostęp do obrazu za pośrednictwem javascript, aby wysłać go na serwer wraz z tekstem?


12
2017-11-05 17:33


pochodzenie


Czy możesz nieco opisać, skąd wstawiasz te obrazy z / do i skąd czerpiesz fałszywy adres URL webkita? - Anthony Corbelli
@GetFresh, występuje podczas wklejania rzeczywistych danych obrazu do pola contentEditable (np. Kopiowanie obrazu z innej aplikacji lub innej strony internetowej). - eyelidlessness
Aby odtworzyć powyższe zachowanie. 1) W przeglądarce internetowej kliknij prawym przyciskiem myszy obraz i wybierz "Kopiuj obraz" 2) Idź do ckeditor.com/demo 3) Użyj skrótów klawiaturowych, aby wkleić obraz do edytora 4) Kliknij przycisk "Źródło" w CKEditor, aby zobaczyć nowy znacznik <img>. - metavida


Odpowiedzi:


Oczywiście możesz użyć dowolnej abstrakcji dla słuchaczy wydarzeń, które lubisz; Dostarczam wersję nieskalibrowaną; to również wyklucza 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);
}

Kiedy mamy do czynienia z dziwactwem w pastach WebKit, warto sprawdzić zawartość wklejania clipboardData:

console.dir(eventObj.clipboardData);

Ale z mojego doświadczenia wynika, że ​​Web Inspector wydaje się sprawdzać obiekt na żywo w pamięci w czasie wyświetlania konsoli, a nie obiekt w tym czasie iw zakresie console.dir został wywołany. W tym momencie paste zdarzenie się zakończy i dostęp Javascript do schowka zostanie odwołany, dzięki czemu types Właściwość będzie null a rzeczywiste dane schowka będą ukryte. Ale w twoim przypadku możesz to zrobić, aby uzyskać lepszy obraz typów dostępnych i ich wyników:

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

Spędziłem więcej czasu, niż chciałbym przyznać się do debugowania clipboardData w przeglądarkach WebKit. Mam nadzieję że to pomoże!


6
2017-11-21 02:05



Świetna odpowiedź, to było pomocne. Niestety z jakiegoś powodu, kiedy loguję zawartość clipboardData, Dostaję 4 typy (public.tiff, image / tiff, public.png, image / png), ale wszystkie pojawiają się jako undefined. Wygląda na to, że rzeczy mogły się zmienić, odkąd to napisałeś. Masz pomysł, jak zdobyć te dane? Twoje zdrowie. - devios1
W tej chwili (Safari 8.x) nie ma sposobu, aby przejść przez "webkit-fake-url problem "i uzyskałem prawdziwe dane. Zbadałem każdy możliwy sposób i podsumowałem moje wrażenia Narzędzie do śledzenia błędów CKEditor. - oleq