Tinymce rich text image upload OSS function

preface

The rich text plugin is familiar to all of you. It makes it easier for you to edit text. What you see is what you get.

Business Requirements Picture Uploading

Picture upload function, picture upload rich text with ah, is not the following kind of?

Easily open the requirements document and take a peek…

Before you need to insert an image, automatically upload the link to OSS, that is, the rich text must be our own image address ？？？？

Quickly open Tinymce document, my heart cool half half, this only picture file upload upload callback method. Don’t even think about inserting links or uploading them.

Dui requirements? Rich text editors don’t support this feature?

Watch me beat up Tinymce, force him to put on a court show, make unsupported features, meet demands, walk…

Start the radar

Find the palace, the key came, core thought, dark please close your eyes, leopard cat for prince

The selection and inspection of a new prince

Dawn, please open your eyes, dust settled

Success is born

Destruction of radar

This article is done from a different Angle, making the functionality you want in the absence of rich text support.

The essence is still using the native hijacking of the DOM method, before the image insertion, complete the link acquisition, verification, upload, backfill process.

Afterword.

This article mainly explains the idea of implementing the function. There are a lot of drawbacks to the implementation, such as the control of two buttons, such as the checksum callback, such as the switch of tabs, but it does work.