>我正在尝试实现。我已经从官方网站下载了最后一个文件 https://www.tiny.cloud/get-tiny/self-hosted 并将其添加到此路径"app/javascript/vendor/tinymce.min.js"下 但我仍然收到 apikey 错误。
API 密钥错误 我在前端使用带有 React 的 rails 6，并且我已经用纱线安装了官方的 TinyMCE React 组件。
将脚本添加到应用程序.html.erb文件最终会出现此错误 应用程序.html.erb 错误
这是我的应用程序.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Test TinyCME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<script src="../../javascript/vendor/tinymce.min.js"></script>
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'index' %>
</head>
<body>
<%= yield %>
</body>
</html>
这是我的 React 组件，我在其中放置编辑器
import React from "react";
import { Editor } from "@tinymce/tinymce-react";
const index = () => {
const handleEditorChange = (content, editor) => {
console.log("Content was updated:", content);
};
return (
<div className="container">
<Editor
name="content"
initialValue="<p>This is the initial content of the editor</p>"
init={{
height: 500,
selector: "textarea",
branding: false,
menubar: false,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste code",
],
toolbar:
"undo redo | formatselect | bold italic backcolor |
alignleft aligncenter alignright alignjustify |
bullist numlist outdent indent | removeformat",
}}
onEditorChange={handleEditorChange}
/>
</div>
);
};
export default index;
似乎也可以使用 web pack 自托管，但我不明白我该怎么做，如果有人已经这样做了。他/她可能会非常有帮助。
谢谢。
如果您在尝试使用 TinyMCE 自托管时遇到 API 密钥错误，这意味着 Tiny React Wrapper 找不到您的自托管 Tiny 安装(或者更具体地说，它没有找到可用的tinymce变量(，因此，它会尝试从云加载 TinyMCE。
Cloud TinyMCE需要一个API密钥，然后检查该API密钥是否有注册的域。您没有发送密钥，因此TinyMCE无法确认加载它的域是否"允许"加载它。
将自托管的TinyMCE与React一起使用，您有两种不同的部署选项。
- 独立于 React 应用程序部署 TinyMCE：将脚本添加到 HTML 文件的
<head>或<body>末尾。 - 使用模块加载器(如 Webpack 和 Browserify(将 TinyMCE 与 React 应用程序捆绑在一起。以下是有关将 TinyMCE 与模块加载器一起使用的更多信息。