Самостоятельный хостинг TinyMCE в ROR с React Project, но по-прежнему появляется сообщение «домен не зарегистрирован» - PullRequest
Новая
       37

Самостоятельный хостинг TinyMCE в ROR с React Project, но по-прежнему появляется сообщение «домен не зарегистрирован»

0 голосов
/ 26 мая 2020

пытаюсь реализовать. Я загрузил последний файл с официального сайта https://www.tiny.cloud/get-tiny/self-hosted и добавил его по этому пути «app / javascript / vendor / tinymce.min.js», но я все равно получаю ошибку apikey.

ошибка ключа api Я использую rails 6 с React на интерфейсе, и я установил официальный компонент TinyMCE React с yarn.

Добавление скрипта в приложение . html .erb файл заканчивается этой ошибкой приложение. html .erb error

вот мое приложение. 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>

вот мой компонент реакции, куда я помещаю редактор 

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;

Кажется, что также можно размещать себя в веб-пакете, но я не вижу как я могу это сделать, если кто-то уже это сделал. Он / Она могут быть очень полезны.

Спасибо.

1 Ответ

1 голос
/ 28 мая 2020

Если вы получаете ошибку ключа API при попытке использовать TinyMCE на собственном хостинге, это означает, что Tiny React Wrapper не может найти вашу локальную установку Tiny (или, более конкретно, она не обнаружила созданную переменную tinymce available), поэтому он пытается загрузить TinyMCE из облака.

Cloud TinyMCE ожидает ключ API, а затем проверяет этот ключ API для зарегистрированных доменов. Вы не отправляете ключ, и поэтому TinyMCE не может подтвердить, что домен, из которого он загружается, «разрешен» для его загрузки.

Используя Self Hosted TinyMCE с React, у вас есть два разных варианта развертывания.

  1. Разверните TinyMCE независимо от приложения React: добавьте сценарий либо в <head>, либо в конец <body> файла HTML.
  2. Объединение TinyMCE с приложением React используя загрузчик модулей, такой как Webpack и Browserify. Вот дополнительная информация об использовании TinyMCE с загрузчиками модулей .
...