TinyMCE editor and Base64

Question

I'm using the TinyMCE editor for my React application. When I cut and paste the data into the editor, the data is in Base64 format. Now the data is also storing as Base64 which is a long string consuming more space and also when I retrieve the data the data is overwritten. I'm using 2 editors on the same page. Please help me.

Answer 1

To upload images to a server, you must use the images_upload_handler option inside the editor's init attribute, and store a function on it that will handle the upload.

The docs has examples, and the GitHub repo too.

<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)
      })
  })