Я написал специальное поле для AdminUI Keystone JS, которое использует редактор TinyMCE.
Keystone JS запускает сервер Apollo GraphQL и автоматически генерирует мутации и запросы на основе вашей схемы CMS . TinyMCE имеет возможность для ввода пользовательских хуков для загрузки изображений .
Я хотел бы иметь возможность подключить два загружаемых изображения с TinyMCE на сервер Keystone JS, используя мутации GraphQL.
Например, в моей настройке у меня есть Image поле в CMS. Keystone JS имеет мутацию GraphQL, которая позволит мне загрузить изображение
createImage(data: ImageCreateInput): Image
, где imageCreateInput равно
type ImageCreateInput {file: Upload}
В этом уроке есть объяснение о том, как загрузить изображения из клиента Apollo на сервер Apollo (на котором работает Keystone JS).
const UPLOAD_MUTATION = gql`
mutation submit($file: Upload!) {
submitAFile(file: $file) {
filename
mimetype
filesize
}
}
`;
return (
<form>
<Mutation mutation={UPLOAD_MUTATION} update={mutationComplete}>
{mutation => (
<input
type="file"
onChange={e => {
const [file] = e.target.files;
mutation({
variables: {
file
}
});
}}
/>
)}
</Mutation>
</form>
);
Я немного озадачен тем, как интегрировать это в TinyMCE, особенно потому, что пример основан на использовании формы, и TinyMCE отправляет мне закодированные данные - насколько я могу см. - Base64.
TinyMCE предоставляет мне возможность указать пользовательский обработчик загрузки :
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'postAcceptor.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
Кажется, что TinyMCE предоставляет мне BLOB-объект, когда, насколько я вижу, , Apollo Client ожидает имя файла. Я просто использую blobInfo.filename? Есть ли лучший способ выгрузить изображения TinyMCE на сервер GraphQL Apollo?
Я никогда ранее не загружал изображения с помощью TinyMCE, поэтому сейчас я немного заблудился. Спасибо за любую помощь