TinyMCE编辑器和Base64

Question

我正在为React应用程序使用TinyMCE编辑器。当我将数据剪切并粘贴到编辑器中时，数据是Base64格式的。现在数据也存储为Base64，这是一个消耗更多空间的长字符串，而且当我检索数据时，数据会被覆盖。我在同一页上使用了两个编辑器。请帮帮我。

Answer 1

要将图像上传到服务器，必须在编辑器的init属性中使用images_upload_handler选项，并在其上存储一个处理上传的函数。

文档中有示例，GitHub repo也有。

<Editor
onInit={(evt, editor) => setEditorContent(editor.getContent())}
initialValue={content}
onEditorChange={(curContent, editor) => setEditorContent(curContent)}
init={{
height: 500,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount', 'image'
],
toolbar: 'undo redo | blocks | ' +
'bold italic underline | forecolor backcolor | ' +
'alignleft aligncenter alignright alignjustify | ' +
'bullist numlist | outdent indent | ' +
'image | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
file_picker_types: 'file image media',
images_upload_handler: upImg
}}
/>

const upImg = (blobInfo, progress) => new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
// send your data to the server here ...
// server must return the image url,
// then you must call resolve() with the url 
.then(response => {
resolve(response.fileUrl)
}).catch(error => {
console.log('error:', error)
})
})