tinymce 未加载到 iframe chrome 扩展中 - "tinymce should have been loaded into global scope"

Question

我正在尝试将 tinymce 编辑器放置在 chrome 扩展应用程序的 iframe 中。但是当我加载应用程序时，tinymce textArea 标签已被设置为隐藏，并且在控制台中出现“tinymce 应该已加载到全局范围”错误。它没有打开 tinymce 编辑器。

尝试在 manifest.json 中插入 tinymce 的 cdn link，尝试将脚本添加到“tinymce.min.js”js 文件但没有任何效果。

谁能帮忙支持一下？

Answer 1

我不确定究竟是什么导致了这个“tinymce 应该被加载到全局范围”错误，但是由于您已经在使用构建系统，我建议使用 npm 模块将 TinyMCE 集成到扩展中。据我所知，TinyMCE 的大部分问题（在浏览器扩展的上下文中）是因为

TinyMCE 尝试使用 http（如样式或插件）加载一堆文件，这在扩展上下文中不起作用。所以我们需要禁用此功能并手动加载它们。
出于某种原因，即使从 npm 模块加载，TinyMCE 也不想处于全局上下文中，因此我们手动将其分配给 window.tinymce

在我们的项目中，我们使用的是 React，因此也使用了 tinymce-react，但我希望即使您坚持使用普通的 TinyMCE，这个片段也会对您有所帮助。

import React from "react";

import tinymce from 'tinymce/tinymce.min.js';

// TinyMCE wants to be in global scope, even if loaded from npm module
window.tinymce = tinymce;

import { Editor } from '@tinymce/tinymce-react';

// We're manually importing theme, icons and plugins because otherwise TinyMCE tries to resolve 
// them himself and load throught http, but this won't work with chrome extension
// Theme
import 'tinymce/themes/silver/theme.min.js';
// Toolbar icons
import 'tinymce/icons/default/icons.min.js';

// importing the plugin js.
import 'tinymce/plugins/paste/plugin.min.js';
import 'tinymce/plugins/link/plugin.min.js';
import 'tinymce/plugins/lists/plugin.min.js';
import 'tinymce/plugins/advlist/plugin.min.js';
import 'tinymce/plugins/anchor/plugin.min.js';
import 'tinymce/plugins/autolink/plugin.min.js';
import 'tinymce/plugins/charmap/plugin.min.js';
import 'tinymce/plugins/code/plugin.min.js';
import 'tinymce/plugins/codesample/plugin.min.js';
import 'tinymce/plugins/colorpicker/plugin.min.js';
import 'tinymce/plugins/table/plugin.min.js';
import 'tinymce/plugins/wordcount/plugin.min.js';
import 'tinymce/plugins/textcolor/plugin.min.js';
import 'tinymce/plugins/image/plugin.min.js';
import 'tinymce/plugins/imagetools/plugin.min.js';
import 'tinymce/plugins/contextmenu/plugin.min.js';

// We're also importing styles manually and later attach them to editor. `?raw` here means that we're not using 
// any kind of style-loader (webpack) and just want to import content of file as plain string
// This requires additional setup in webpack and might look different for other build systems
import contentCss from 'tinymce/skins/content/default/content.min.css?raw';
import contentUiCss from 'tinymce/skins/ui/oxide/content.min.css?raw';

// This is our wrapper component to not copy-past this whole process of initialization to each file where we need tinymce
export const TinyMceEditor = (props) => {

    return (
        <Editor
            {...props}
            init={{
                skin: false,
                content_css: false,
                menubar: false,
                toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright ' +
                    'alignjustify | outdent indent |  numlist bullist checklist link | forecolor backcolor casechange ' +
                    'removeformat | charmap | fullscreen | fontselect fontsizeselect formatselect',
                plugins: [
                    'paste link lists advlist anchor autolink charmap code codesample ' +
                    'table wordcount'
                ],
                content_style: [contentCss.toString(), contentUiCss.toString()].join(''),
            }}
        />);
};

我们正在使用 "tinymce": "^5.9.2" 和 "@tinymce/tinymce-react": "^3.13.0"

要使 webpack 能够使用此 ?raw 查询将文件作为字符串加载，您需要将其添加到您的 webpack 配置中 module.rules array

{
    resourceQuery: /raw/,
    type: 'asset/source',
}

tinymce 未加载到 iframe chrome 扩展中 - "tinymce should have been loaded into global scope"

tinymce not loaded inside the iframe chrome extension - "tinymce should have been loaded into global scope"

javascript

iframe

google-chrome-extension

tinymce