如何在屏幕上使用多个编辑器将自定义插件添加到 tinymce-react

问题描述 投票:0回答:0

我创建了一个自定义插件并且它可以正常工作,除非我在屏幕上有多个编辑器。现在我正在尝试修复此问题,但只有在

tinymce.PluginManager.add()
调用后初始化的编辑器才会收到插件。在没有收到插件之前初始化的编辑器。

如果我在编辑器的任何实例初始化之前尝试调用

tinymce.PluginManager.add()
,我会得到错误
tinymce is not defined
。如果我
import tinymce from "tinymce"
并这样做,我会得到错误
Uncaught SyntaxError: Unexpected token '<' (at theme.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at model.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at plugin.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at icons.js:1:1)
.

我相信我已经阅读并尝试了我能找到的一切。

这是我在做什么:

import { Editor } from "@tinymce/tinymce-react";
import uploadPdfPlugin from "./plugins/uploadPdf";

const MyEditor = () => {
  const registerPlugins = () => {
    tinymce.PluginManager.add("uploadPdf", uploadPdfPlugin);
  };

  return (
    <div className="mb-md-0 mb-1">
      <Editor
        onInit={() => registerPlugins()}
        init={{
          menubar: false,
          external_plugins: {
            uploadPdf: "./plugins/uploadPdf.js"
          },
          plugins: [
            "advlist",
            "autolink",
            "autoresize",
            "lists",
            "link",
            "image",
            "charmap",
            "anchor",
            "searchreplace",
            "visualblocks",
            "code",
            "fullscreen",
            "insertdatetime",
            "media",
            "table",
            "preview",
            "help",
            "wordcount",
            "image",
            "code"
          ],
          toolbar:
            "undo redo | blocks | " +
            "bold italic underline | forecolor backcolor | " +
            "alignleft aligncenter alignright alignjustify | " +
            "bullist numlist | outdent indent | " +
            "image uploadPdf | " +
            "code removeformat help",
          content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
          file_picker_types: "file image media"
        }}
        apiKey="*****"
      />
    </div>
  );
};

export default MyEditor;


tinymce tinymce-plugins tinymce-react
© www.soinside.com 2019 - 2024. All rights reserved.