javascript - React JS TinyMCE Editor（视频上传检索问题）

Question

我的问题是：

当我将图像或视频上传到 TinyMCE 编辑器时，它会毫无问题地作为 BLOB 数据类型进入数据库。我可以看到标签元素<img>并<video>带有相应的 src 属性。

但是，当我从数据库中检索该 BLOB 数据并将其放入 TinyMCE 编辑器时，视频标签<video>将在其中放置一个空源（例如。<video><source src=""></video>）。

我的编辑器代码：

let editor = null;
const [editorContent, setEditorContent] = React.useState('');

return (
        <Editor
            onInit={(event) => editor = event.target}
            value={editorContent}
            onEditorChange={setEditorContent}
            apiKey="MY_API_KEY"
            init={{
                menubar: false,
                language: "pt_BR",
                plugins: 'image media',
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | image media',
                file_picker_types: 'image media',

                file_picker_callback: function (cb) {
                    const input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*, video/*');
                    input.onchange = function () {
                        const file = this.files[0];
                        const reader = new FileReader();

                        reader.onload = function () {
                        const id = 'blobid' + (new Date()).getTime();
                        const blobCache = editor.editorUpload.blobCache;
                        const base64 = reader.result.split(',')[1];
                        const blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);

                        cb(blobInfo.blobUri(), {title: file.name});
                    };

                    reader.readAsDataURL(file);
                };

                input.click();
            },
        }}
    />
);

将 HTML 数据存储到服务器的按钮（完美运行）：

onClick={() => {
                        const allLogins = LoginLocalStorage.getAll();
                        const login = Login.deserialize(allLogins[0]);

                        TopicService.createTopic(
                            login.id,
                            login.username,
                            topicDescription,
                            editorContent,
                            topicTypeFilter
                        ).then((json) => {
                            const topic = json.response;

                            setTopics(actualTopics => [
                                <Topico
                                    topic={Topic.deserialize(topic)}
                                    isDesktop={isDesktop}
                                    onEditClick={() => onEditClick(topic)}
                                />,
                                ...actualTopics
                            ]);

                            setShow(false);

                            setTopicDescription('');
                            setEditorContent('');
                        }).catch((error) => {
                            setCreateTopicAlertMessage(JSON.stringify(error));
                            setCreateTopicAlertVisible(true);
                        });

而且，当我做这样的事情时：

const topicDetailsRetrievedFromDatabase = "<video><source src="base64_SRC"/></video>";

<Editor
    value={topicDetailsRetrievedFromDatabase}
/>

数据进入编辑器，其中所有<video>元素都包含一个<source src="">元素（它从数据中删除“BASE64_SRC”）。

我不知道你发生了什么，有人知道吗？？？

标签： javascriptreactjstinymceblob