Ruby on rails 与React项目一起在ROR中自托管TinyMCE，但仍然获得；“域未注册”；_Ruby On Rails_Reactjs_Webpack_Tinymce_Ruby On Rails 6

Ruby on rails 与React项目一起在ROR中自托管TinyMCE，但仍然获得；“域未注册”；

ruby-on-rails reactjs webpack tinymce

Ruby on rails 与React项目一起在ROR中自托管TinyMCE，但仍然获得；“域未注册”；,ruby-on-rails,reactjs,webpack,tinymce,ruby-on-rails-6,Ruby On Rails,Reactjs,Webpack,Tinymce,Ruby On Rails 6,我正在努力实现。我已经从官方网站下载了最后一个文件，并将其添加到路径“app/javascript/vendor/tinymce.min.js”下但是我仍然收到apikey错误我在前端使用rails 6和React，并用纱线安装了官方的TinyMCE React组件将脚本添加到application.html.erb文件会导致此错误这是我的application.html.erb <!DOCTYPE html> <html> <head>

我正在努力实现。我已经从官方网站下载了最后一个文件，并将其添加到路径“app/javascript/vendor/tinymce.min.js”下但是我仍然收到apikey错误

我在前端使用rails 6和React，并用纱线安装了官方的TinyMCE React组件

将脚本添加到application.html.erb文件会导致此错误

这是我的application.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;

从“React”导入React；
从“@tinymce/tinymce-react”导入{Editor}”；
常数索引=（）=>{
const handleEditorChange=（内容、编辑器）=>{
日志（“内容已更新：”，内容）；
};
返回(
);
};
出口违约指数；

似乎也可以使用web pack自托管，但如果有人已经这样做了，我不知道如何才能做到这一点。他/她可能会很有帮助

谢谢。

如果您在尝试使用TinyMCE自托管时遇到API密钥错误，这意味着Tiny React包装器无法找到您的Tiny自托管安装（或者更具体地说，它没有找到可用的

TinyMCE

变量），因此，它会尝试从云中加载TinyMCE

Cloud TinyMCE需要一个API密钥，然后检查注册域的API密钥。您没有发送密钥，因此TinyMCE无法确认加载密钥的域是否“允许”加载密钥

使用带有React的自托管TinyMCE，您有两种不同的部署选项

独立于React应用程序部署TinyMCE：向HTML文件的

或

末尾添加脚本

使用模块加载器（如Webpack和Browserify）将TinyMCE与React应用程序绑定

一个简单的方法做1。就是使用。