Вставьте изображение в редактор после загрузки

Question

Мне удалось загрузить изображения с помощью перетаскивания в библиотеку SP 2013, перехватив события paste и fileUploadrequest (+ добавлены обязательные заголовки и использовался /_api/web/getfolderbyserverrelativeurl(\'/sites/theSite/theLibrary\')/files/add(overwrite=true,%20url=\'aDynamicFilename.jpg\') в качестве URL-адреса запроса).

Проблема с этим подходом состоит в том, что даже если изображение загружено, оно не вставляется в редактор (без ошибок). Я не устанавливаю config.uploadUrl для этого подхода.

Q # 1: Есть ли какой-либо шаг, который я должен пройти после загрузки изображения? Как сказать экземпляру CKEDITOR вставить изображение?

Позже я заметил, что если я устанавливаю config.uploadUrl на тот же URL, который я использую выше, редактор успешно вставляет изображение,Проблема в том, что из моих испытаний config.uploadUrl инициализируется вместе с экземпляром CKEDITOR (поэтому не может быть назначен динамически для каждого изображения, если несколько изображений перетаскиваются в редактор).

Q # 2: Есть ли другой способ настроить uploadUrl или, возможно, какое-либо другое свойство конфигурации, которое позволило бы работать с пользовательской загрузкой и вставить изображение в редактор?

Answer 1

В итоге заставил его работать, следуя подходу, аналогичному включенному в этом репо:

RyanSiu1995 / ckeditor-ImageUploader

1. Использование FileReader и начните загрузку изображения, когда оно вставлено в CKEditor
2. В событии fileReader onload создайте элемент img в объекте редактора documentс некоторой непрозрачностью и со строкой Base64 fileReader как src
3. В событии fileLoader * uploaded удалите img и повторнодобавьте его к фактическому URL файла (изменение атрибута src на img не вызывало событие изменения редактора, к которому я подключился, поэтому я решил заменить весь элемент)

Вотсоответствующий раздел из плагина ckeditor-ImageUploader:

    fileDialog.on('change', function (e) {
        var fileTools = CKEDITOR.fileTools,
            uploadUrl = fileTools.getUploadUrl( editor.config, 'image' ),
            file = e.target.files[0],
            loader = editor.uploadRepository.create(file),
            reader = new FileReader(),
            notification,
            img;

    // verify
    if (!/image/i.test(file.type)) {
        notification = editor.showNotification( 'Please check the correct format.', 'warning' );

        setTimeout(function() {
            notification.hide()
        }, 2000);

        return false
    }

    loader.upload(uploadUrl);

    // preview image
    reader.readAsDataURL(e.target.files[0]);

    reader.onload = function (e) {
        img = editor.document.createElement('img');
        img.setAttribute('src', e.target.result);
        img.setStyle('opacity', 0.3);
        editor.insertElement(img);
    }

    loader.on('uploaded', function(evt) {
        editor.widgets.initOn(img, 'image', {
            src: evt.sender.url
        });
        img.setAttribute('src', evt.sender.url);
        img.setStyle('opacity', 1);
    });

    loader.on('error', function() {
        img.$ && img.$.remove();
    });

    fileTools.bindNotifications(editor, loader);

    // empty input
    fileDialog[0].value = "";